Värikontrasti
Katso myös: color contrast
Etualatekstin ja taustan välinen luminanssisuhde, asteikolla 1:1–21:1. WCAG 2.x vaatii normaalitekstille 4,5:1 ja suurelle tekstille (≥18pt tai 14pt lihavoitu) 3:1 tason AA mukaisesti.
Värikontrasti mittaa kahden värin — yleensä tekstin ja sen taustan — välistä luminanssieroa. Asteikko ulottuu 1:1:stä (ei kontrastia lainkaan — valkoinen valkoisella) 21:1:een (puhdas musta puhtaalla valkoisella). WCAG määrittelee tekstitekstin luettavuudelle minimisuhteet.
WCAG-raja-arvot
WCAG 2.x:n onnistumiskriteerit 1.4.3 (Kontrastin minimi, taso AA) ja 1.4.6 (Parannettu kontrasti, taso AAA) asettavat seuraavat alarajat:
| Tekstityyppi | AA | AAA |
|---|---|---|
| Normaaliteksti (< 18pt tai < 14pt lihavoitu) | 4,5:1 | 7:1 |
| Suuri teksti (≥ 18pt tai ≥ 14pt lihavoitu) | 3:1 | 4,5:1 |
| Graafiset objektit ja käyttöliittymäkomponentit (1.4.11) | 3:1 | — |
WCAG 2.x mittaa kontrastia WCAG-kaavalla (luminanssipohjainen suhde). WCAG 3 tutkii perceptuaalisesti yhtenäistä korvaajaa (“APCA” — Accessible Perceptual Contrast Algorithm), joka käyttäytyy eri tavoin hyvin tummilla tai hyvin vaaleilla taustoilla; APCA ei ole vielä normatiivinen.
Mitä jää havaitsematta
Värikontrasti on yksi harvoista WCAG-säännöistä, jonka työkalu voi havaita luotettavasti, joten automaattiset skannerit löytävät suurimman osan puhtaista teksti-tausta-virheistä. Silti läpi pääsee:
- Syötekenttien täytejako-teksti. Usein #999 tai vaaleampi valkoisella — ei
täytä AA-vaatimusta. Suunnittelijat käyttävät matalakontrastisia
täytejako-tekstejä erottaakseen ne täytetyistä arvoista, mutta todellinen
paras käytäntö on käyttää erillistä
<label>-elementtiä kentän yläpuolella ja korkeakontrastista täytejako-tekstiä — tai ei täytejako-tekstiä lainkaan. - Hover- ja kohdistustilat. Painike, jolla on riittävä oletuskontrasti, voi epäonnistua hover-tilassa (esim. vaalea harmaa hover-tila valkoisella). Tarkista interaktiiviset elementit kaikissa visuaalisissa tiloissa.
- Poistetut käyttöliittymäelementit. Poistetut elementit on muodollisesti
vapautettu AA-kontrastivaatimuksesta, mutta niiden häivyttäminen vain
matalalla kontrastilla jättää värinäköhäiriöiset käyttäjät ilman keinoa
tietää elementin olevan poistettu. Yhdistä väri toiseen vihjeeseen — kuvake,
tunnisteen muutos tai
aria-disabled, jotta ruudunlukuohjelmat ilmoittavat siitä. - Teksti kuvien ja liukuvärjäysten päällä. Sankarikuvien peitteet, joissa sama teksti kulkee sekä kuvan vaalean että tumman alueen yli, epäonnistuvat usein vaaleammassa alueessa.
- Ainoana tunnisteena käytetyt kuvakkeet. 24 pikselin kuvake ilman tekstiä tarvitsee 3:1-suhteen taustaansa vasten (1.4.11), ja kuvakkeen merkitykselliset pikselit — ääriviivavetojen pikselit — ovat mitattavana.
Käytännön testaus
Kolme työnkulkua vähentää kontrastivirheitä varhaisessa vaiheessa:
- Suunnitteluajan tarkistus. Stark, Able ja Adobe XD:n saavutettavuustarkistin arvioivat kontrastin suunnittelutyökalussa. Korjaa ennen koodin kirjoittamista.
- Muuttujapohjainen paletti. Määritä jokainen teksti-tausta-yhdistelmä muuttujana, jonka kontrasti tarkistetaan kerran. Kiellä ad-hoc-väriarvot tekstiä sisältävissä komponenteissa.
- Automaattiset CI-tarkistukset. axe-core, Pa11y tai Lighthouse hylkäävät buildit kontrastirikkomuksista. Halpa lisätä, kallis jättää pois.
Alarajan ylittäminen
4,5:1 on minimi, ei esteettinen tavoite. Käyttäjät, joilla on lievä värinäköhäiriö, ikääntymiseen liittyvä näönheikkeneminen tai heikkolaatuinen näyttö, suosivat 7:1 tai enemmän leipätekstille. Sivusto, joka juuri ja juuri läpäisee AA-tason jokaisessa elementissä, tuntuu yleensä matalakontrastiselta myös käyttäjille, joilla ei ole virallisia toimintarajoitteita.