Vaaleanharmaa teksti valkoisella taustalla voi näyttää yhdellä silmäyksellä tyylikkäältä ja minimalistiselta – ja olla täysin lukukelvoton käyttäjille, joilla on näkövamma, voimakas auringonvalo näytöllä tai tavallinen silmien rasitus työpäivän päätteeksi. Värikontrasti on yksi esteettömyyden "teknisimmistä" kriteereistä – tarkat luvut on täytettävä – mutta se on myös yksi helpoimmista testata ja korjata etukäteen.

Lyhyesti: mitä tämä opas kattaa

  1. Mitä suhteita WCAG vaatii
  2. Miksi suuren tekstin kontrasti on pienempi
  3. Kontrastisuhteen tarkistaminen käytännössä
  4. Näin valitaan käytettävissä oleva väripaletti etukäteen

Mitä suhteita WCAG vaatii

WCAG määrittelee kontrastisuhteen luvuksi 1:1 (ei kontrastia ollenkaan – sama väri) ja 21:1 (maksimi mahdollinen kontrasti – puhdasta mustaa puhtaan valkoisen päälle). Tasolla AA (pakollinen taso useimmissa paikoissa, mukaan lukien Israel) vaatimus on vähintään 4,5:1 tavallisen tekstin ja sen takana olevan taustan välinen suhde. Tiukemmalla AAA-tasolla vaatimus nousee 7:1:een.

Miksi suuressa tekstissä sallitaan vähemmän kontrastia?

Suuri teksti pysyy luettavana myös pienemmällä kontrastilla, joten WCAG asettaa sille helpomman kynnyksen: 3:1 tasolla AA (4,5:1:n sijaan) ja 4,5:1 tasolla AAA (7:1:n sijaan). "Suuri teksti" määritellään tekstiksi, joka on vähintään 18 pistettä (noin 24 kuvapistettä) tai vähintään 14 pistettä (noin 18,7 kuvapistettä), jos se on lihavoitu. Esimerkiksi suuret otsikot voivat "varaa" hieman pienempään kontrastiin kuin tavallinen tekstikappale ja silti täyttävät vaatimuksen.

Havainnollistava kaavio Kontrastisuhteiden vertailu Kolme tekstiä taustalla esimerkkiä eri kontrastisuhteilla Tekstin ja taustan välinen kontrastisuhde Esimerkkiteksti 1.8:1 — ✕ epäonnistuu Esimerkkiteksti 7.1:1 — ✓ täyttää myös AAA:n Esimerkkiteksti 5.4:1 — ✓ täyttää tason AA Tavallinen teksti: vähintään 4,5:1 · Suuri teksti (24px+ tai 18,7px lihavoitu): vähintään 3:1 Työkalut, kuten WebAIM-kontrastitarkistus, antavat sinulle tarkan suhteen ennen kuin viimeistelet väripaletin
Kolme esimerkkiä tekstistä taustalla: liian alhainen suhde (1,8:1) epäonnistuu jopa perustasolla; kaksi muuta suhdetta täyttävät AA- ja AAA-vaatimukset.

Kontrastisuhteen tarkistaminen käytännössä

Sitä ei tarvitse laskea manuaalisesti – ilmaisten työkalujen, kuten WebAIM Contrast Checkerin, avulla voit syöttää tekstin ja taustan värikoodit ja saada välittömästi tarkan suhteen ja hyväksytyn/hylätyn pisteen jokaiselle tasolle. On syytä tarkistaa paitsi kiinteällä taustalla olevaa tekstiä myös tekstiä taustakuvien tai liukuvärien päällä - missä kontrasti voi vaihdella saman kuvan eri alueiden välillä, joten on parasta testata "ongelmallisin" kohta.

💡 Käytännön vinkki

Ei vain tekstiä: sama kontrastivaatimus (helpommalla kynnyksellä, 3:1) koskee myös graafisia käyttöliittymäkomponentteja, kuten lomakekenttien ääriviivoja, toiminnallisia kuvakkeita ja painikkeiden reunuksia – ei vain kirjaimia.

Esteettömän väripaletin valitseminen etukäteen

Tehokkain tapa on tarkistaa kontrasti mallin suunnitteluvaiheessa, ei jokaisessa asiakirjassa erikseen. Kun valitset merkkivärejä otsikoille, leipätekstille ja linkeille, kannattaa varmistaa etukäteen, että jokainen todella käyttämäsi teksti-taustayhdistelmä täyttää vähintään 4,5:1. Näin jokainen mallista luotu uusi dokumentti "perii" automaattisesti oikean kontrastin sen sijaan, että jokainen dokumentti tarkastettaisiin erikseen sen jälkeen, kun se on jo kirjoitettu.

Haluatko tietää, täyttävätkö asiakirjasi kontrastivaatimukset?

Työkalumme tarkistaa värien kontrastin osana jokaisen sivustosi PDF-tiedoston automaattista tarkistusta.

Skannaa sivustosi ilmaiseksi ←