1.4.3 Kontrasti (minimi)
Onnistumiskriteerin virallinen kuvaus
Tekstin ja tekstiä esittävien kuvien visuaalisen esitystavan kontrastisuhde on vähintään 4,5:1, paitsi seuraavissa tapauksissa:
- Isokokoinen teksti: Isokokoisessa tekstissä ja isokokoista tekstiä esittävissä kuvissa kontrastisuhde on vähintään 3:1.
- Oheissisältö: Tekstille tai tekstiä esittäville kuville ei ole kontrastivaatimusta, jos ne ovat osa inaktiivista käyttöliittymäkomponenttia, yksinomaan koristeita, eivät ole näkyvissä kenellekään tai ovat osa kuvaa, jossa on muuta merkittävää visuaalista sisältöä.
- Logotyypit: Tekstille, joka on osa logoa tai brändin nimeä, ei ole kontrastivaatimusta.
Mitä pitää tehdä?
Varmista riittävä kontrasti tekstin ja taustan välillä.
Miksi tämä on tärkeää?
Parantaa sisällön luettavuutta heikkonäköisille ja värisokeille.
Yleisiä sudenkuoppia
Kontrastin puute on yllättävän yleistä. Ongelmat lisääntyvät, kun kyseessä ovat hover- ja focus-tyylit.
Miten testata?
Tarkista tekstin/tekstikuvien ja niiden taustan välinen värikontrasti. Monet automaattiset työkalut voivat havaita värikontrastiongelmat.
Kontrastin tulisi olla vähintään 4,5:1, paitsi jos teksti on suurta, jolloin kontrastivaatimus on 3:1.
Suuri teksti: teksti, joka on 19px lihavoitu tai 24px tavallinen.
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.
On hyvä huomioida myös, että joskus fontista käytetään eri leikkauksia paksunnetun tekstin esittämiseen sen sijaan, että CSS:llä määritettäisiin font-weight. Tällaisissa tapauksissa automaattiset työkalut saattavat merkata nämä ongelmallisiksi. Itse en yleensä ole tulkinnut näitä ongelmiksi, mutta on hyvä pitää mielessä, että jos joskus nämä fontit eivät välttämättä lataudukaan, voi tällöin teksti oikeasti olla ongelmallinen. Paras tilanne olisi se, että kontrasti tekstin ja taustavärinsä välillä riittäisi riippumatta onko teksti pientä vai suurta.
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ä tekstin ja taustan välillä kontrasti on vähintään 4.5:1.