1.4.11 Ei-tekstimuotoisen sisällön kontrasti
Onnistumiskriteerin virallinen kuvaus
Seuraavanlaisten elementtien visuaalisessa esitystavassa kontrastisuhde viereiseen väriin/väreihin on vähintään 3:1:
- Käyttöliittymäkomponentit: Visuaalinen informaatio, joka vaaditaan käyttöliittymäkomponentin ja sen eri tilojen tunnistamiseen, lukuun ottamatta inaktiivisia komponentteja tai jos käyttäjäagentti määrittelee uuden sisällön visuaalisen esitystavan ja sisällön tuottaja ei ole sitä muokannut.
- Graafiset objektit: Grafiikan osat, joita vaaditaan sisällön ymmärtämiseksi, lukuun ottamatta tapauksia, joissa ulkoasu on olennainen tietosisällön välittämiseksi.
Mitä pitää tehdä?
Varmista riittävä kontrasti käyttöliittymäkomponenteille ja graafisille objekteille.
Miksi tämä on tärkeää?
Tekee vuorovaikutteisista elementeistä ja tärkeistä grafiikoista erottuvia.
Yleisiä sudenkuoppia
Kontrastiin liittyy yleisesti ottaen paljon ongelmia. Etenkin kun kyseessä ovat hover- (osoitustyyli) ja focus-tilat (kohdistustyyli). Huomaa, että hover-tilalla on vaatimuksia vain taustaa vasten. Tyylillä ei tarvitse olla tiettyä kontrastia elementin oletustilaan verrattuna.
Infografiikat eivät yleensä täytä useita väreihin liittyviä kriteerejä.
Miten testata?
Varmista, että eri elementtien ja niiden tilojen välinen kontrasti on vähintään 3:1. Automaattiset työkalut voivat havaita joitakin näistä ongelmista, mutta yleensä tarvitaan manuaalista testausta.
Jos et ole varma vaatimuksista, tutustu tämän kriteerin ymmärtämissivuun, joka on linkitetty tälle sivulle. Sivu sisältää paljon erilaisia esimerkkejä ja ohjeita.
Huom! Tekstimerkit, kuten 'X' tai '>' tulkitaan ei-tekstuaalisiksi merkeiksi, kun niitä käytetään symboleina. Eli kun niitä käytetään visuaalisen ilmeensä vuoksi eikä ilmaisemaan jotakin ihmisen kielellä. Joten esimerkiksi sulkunappi, jossa on 'X', tämän kontrastivaatimusta tarkastellaan ei-tekstuaalisen vaatimusten mukaan eikä tekstin.
Miten huomioida tämä kriteeri suunnittelutyössä?
Monesti suositellaan ulkoasun suunnittelua ensin mustavalkoisena. Kun ulkoasu toimii mustavalkoisena, sen jälkeen siihen voi lisätä värin. Näin voi varmistaa myös, ettei pelkällä värillä kommunikoida asioita. Tämä suunnittelulähestymistapa ratkaisee useammankin väriin liittyvän kriteerin tämän lisäksi.
Muista tarkastaa heti ensimmäiseksi värien kohdalta kaikkien väriyhdistelmien kontrasti ja varmista, että elementin ja taustan välillä kontrasti on vähintään 3:1.