Värikontrasti ja saavutettavuus: WCAG-vaatimukset ja korjaukset

Vaaleanharmaa teksti valkoisella pohjalla näyttää suunnittelutiedostossa siistiltä. Puhelimessa kirkkaassa auringonvalossa tai heikkonäköiselle se on raskasta luettavaa. Se on myös yleisin saavutettavuusvirhe ylipäätään: WebAIM Million 2026 (avautuu uuteen välilehteen) löysi matalan kontrastin tekstiä 83,9 %:sta miljoonan suosituimman sivuston etusivuista, keskimäärin 34 tapausta sivua kohden.

Hyvä uutinen on, että kontrastia voi mitata, raja-arvot ovat selvät ja korjaukset enimmäkseen edullisia. Tämä opas antaa sinulle luvut, ilmaiset työkalut ja tavan korjata brändivärit aloittamatta alusta.

Mikä on kontrastisuhde?

Kontrastisuhde on luku, joka vertaa kahden värin, yleensä tekstin ja sen taustan, suhteellista kirkkautta eli luminanssia. WCAG:ssä se lasketaan kiinteällä kaavalla, ja tulos vaihtelee välillä 1:1 (ei eroa, valkoinen valkoisella) ja 21:1 (musta valkoisella). Mitä suurempi luku, sitä helpompi värit on erottaa toisistaan.

Kaava on (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleamman värin ja L2 tummemman värin suhteellinen luminanssi. Sitä ei koskaan tarvitse laskea käsin, mutta yksi yksityiskohta on tärkeä: vain luminanssilla on merkitystä, ei värisävyllä. Siksi punainen teksti vihreällä taustalla voi näyttää voimakkaalta ja saada silti huonon tuloksen.

Toinen usein unohtuva yksityiskohta on pyöristys. W3C:n kriteerin 1.4.3 Understanding-asiakirja (avautuu uuteen välilehteen) toteaa, että laskettuja arvoja ”ei pidä pyöristää (esim. 4,499:1 ei täytä 4,5:1-rajaa)”. Harmaa #767676 valkoisella (4,54:1) siis riittää, kun taas #777777 valkoisella (4,48:1) ei, vaikka kukaan ei erottaisi niitä silmällä.

Mitä kontrastisuhdetta WCAG edellyttää?

AA-tasolla, johon useimmat lait ja sopimukset viittaavat, tavallinen teksti tarvitsee taustaansa nähden vähintään suhteen 4,5:1 ja suuri teksti 3:1 (onnistumiskriteeri 1.4.3). Käyttöliittymän osat ja merkitykselliset grafiikat tarvitsevat 3:1 viereisiin väreihin nähden (1.4.11). Tiukempi AAA-taso edellyttää 7:1 tavalliselle ja 4,5:1 suurelle tekstille (1.4.6).

Miksi juuri 4,5:1? W3C selittää, että luku ”kompensoi kontrastiherkkyyden heikkenemistä, jota käyttäjät, joiden näönmenetys vastaa noin 20/40-näköä, tavallisesti kokevat”. Toisin sanoen raja on asetettu kohtalaisesti heikentyneen näön mukaan, ja siihen ryhmään kuuluu moni iäkkäämpi asiakas, joka ei koskaan pitäisi itseään vammaisena.

Osa tekstistä on vapautettu: logot ja tuotenimet, puhtaasti koristeellinen teksti, teksti, joka ei näy kenellekään, kuvassa oleva teksti, kun kuvassa on merkittävästi muuta visuaalista sisältöä, sekä passiivisten (käytöstä poistettujen) säätimien teksti. Logosi saa jäädä ennalleen. Logosi haalealla värillä ladottu kappale ei.

Mikä lasketaan suureksi tekstiksi?

WCAG:ssä suuri teksti tarkoittaa vähintään 18 pisteen tekstiä tai vähintään 14 pisteen lihavoitua tekstiä. W3C muuntaa nämä noin 24 CSS-pikseliksi ja lihavoituna 18,5 pikseliksi. Kaikki pienempi tarvitsee täyden 4,5:1-suhteen. Leipäteksti, kuvatekstit, lomakekenttien nimiöt, hinnat ja alatunnisteen linkit eivät juuri koskaan ole suurta tekstiä, joten ne tarvitsevat korkeamman suhteen.

Näin se toimii käytännössä. Harmaa #949494 valkoisella saa tuloksen 3,03:1. Se riittää 28 pikselin otsikolle mutta ei 16 pikselin kappaleelle samassa värissä. Moni sivusto täyttää vaatimuksen otsikoissa mutta ei missään niiden alla.

Ohuet ja koristeelliset fontit vaativat erityistä huolellisuutta. W3C huomauttaa, että reunanpehmennyksen vuoksi ”erityisen ohuet tai epätavalliset fontit voidaan selaimessa piirtää paljon haaleammalla värillä” kuin valitsemasi väri. Jos brändifonttisi on kevyt leikkaus, jätä reilusti pelivaraa 4,5:1:n yläpuolelle sen sijaan, että tähtäisit lukuun 4,51.

Koskeeko kontrasti painikkeita, kuvakkeita, kohdistuksen ilmaisimia ja kaavioita?

Kyllä. Onnistumiskriteerin 1.4.11 (AA) mukaan kaikki, mitä ihmisten on nähtävä tunnistaakseen säätimen, sen tilan tai grafiikan, tarvitsee 3:1 viereisiin väreihin nähden. Tämä kattaa lomakekenttien reunat, kuvakkeet ilman tekstiä, kohdistuksen reunukset, valintaruutujen ja kytkimien tilat sekä kaavioiden viivat ja sektorit. Painikkeen sisällä oleva teksti tarvitsee edelleen 4,5:1.

• Lomakekentät: vaaleanharmaa #CCCCCC-reuna valkoisella saa tuloksen 1,61:1. Jos tuo haalea viiva on ainoa merkki siitä, mihin kirjoitetaan, se ei riitä.
• Painikkeet: WCAG ei edellytä näkyvää reunaa jokaisen painikkeen ympärille. W3C:n kriteerin 1.4.11 Understanding-asiakirjan (avautuu uuteen välilehteen) mukaan raja tarvitaan vain, kun säädintä ei voi tunnistaa muulla visuaalisella tavalla. Jos painikkeen tunnistaa vain värillisestä muodosta, muodon kontrastin on oltava 3:1 sivun taustaan nähden.
• Kuvakkeet: haun suurennuslasi, toivelistan sydän tai ostoskorikuvake ilman viereistä tekstiä tarvitsee 3:1.
• Kohdistuksen ilmaisimet: näppäimistökohdistuksen näyttävän reunuksen on erotuttava ympäröivästä taustasta. WCAG 2.2 -oppaamme käsittelee uudemmat kohdistusta koskevat kriteerit.
• Kaaviot: viivakaavion viivat ja piirakkakaavion sektorit tarvitsevat 3:1, elleivät samat arvot näy myös tekstinä.
• Passiiviset säätimet on vapautettu, mutta ihmisten on silti pystyttävä erottamaan, voiko painiketta painaa.

Leipätekstin linkit ovat erikoistapaus. Jos ne erottuvat vain värillä ilman alleviivausta, W3C:n tekniikka G183 (avautuu uuteen välilehteen) edellyttää linkin värin ja ympäröivän tekstin välille 3:1, ja molemmilla on silti oltava 4,5:1 taustaan nähden. Kolmen kaikki nämä ehdot täyttävän värin löytäminen on vaikeaa. Alleviivaus on paljon helpompi.

Miten värikontrasti tarkistetaan?

Käytä ilmaista kontrastityökalua yksittäisille väripareille, selaimen kehittäjätyökaluja verkossa oleville sivuille ja automaattista skannausta ongelmakohtien löytämiseen koko sivustolta. Tarkista sitten silmämääräisesti se, minkä työkalut ohittavat: teksti kuvien ja liukuvärien päällä, hover- ja kohdistustilat, kenttien vihjetekstit ja virheilmoitukset. Useimpiin näistä kuluu muutama minuutti sivupohjaa kohden.

• WebAIM Contrast Checker (avautuu uuteen välilehteen): syötä kaksi heksakoodia ja saat suhdeluvun sekä tuloksen tavalliselle tekstille, suurelle tekstille ja graafisille objekteille. Sen vaaleuden liukusäädin auttaa löytämään lähimmän riittävän sävyn.
• Colour Contrast Analyser (avautuu uuteen välilehteen): Visperon ilmainen työpöytäsovellus Windowsille ja macOS:lle. Sen pipetti poimii minkä tahansa pikselin näytöltä, mikä on kätevää kuvien päällä olevalle tekstille, PDF-tiedostoille ja sovelluksille, ja siinä on myös värisokeussimulaattori.
• Chrome DevTools: tarkastele tekstiä ja avaa värinvalitsin. Sen kontrastisuhdeosio (avautuu uuteen välilehteen) näyttää AA- ja AAA-rajat viivoina ja voi ehdottaa riittävää väriä. CSS Overview -paneeli luettelee kaikki sivun kontrastiongelmat.
• Automaattiset tarkistustyökalut: selainlaajennukset ja Lighthouse löytävät matalan kontrastin tekstin koko sivulta, mutta kuvien tai liukuvärien päällä olevan tekstin ne merkitsevät usein käsin tarkistettavaksi sen sijaan, että antaisivat hyväksytyn tai hylätyn tuloksen.

Missä työkalut eivät riitä, tarkista käsin. Kun teksti on ison pääkuvan päällä, tarkista kuvan vaalein kohta vaaleimpien kirjainten takana; W3C luettelee taustakuvat, joiden kontrasti ei riitä, tunnettuna virheenä (F83). Vie osoitin painikkeiden päälle, siirry niihin sarkaimella, aiheuta lomakevirhe ja vaihda tummaan tilaan, jos sellainen on. Myös tumma teema voi jäädä vajaaksi: harmaa #757575 #121212-taustalla saa tuloksen 4,07:1. Oppaamme verkkosivuston saavutettavuuden testaamisesta käsittelee kontrastia muiden nopeiden manuaalisten tarkistusten rinnalla.

Miten matalan kontrastin voi korjata brändiä muuttamatta?

Yleensä lisäämällä brändiväristä tummemman sävyn tekstiä ja pieniä elementtejä varten ja säilyttämällä alkuperäisen suurissa otsikoissa, taustoissa ja kuvituksissa. Moni brändiväri jää vajaaksi vain pienissä koissa. Valkoisen tekstin vaihtaminen tummaksi vaalealla brändivärillä riittää usein, ja useimmat kävijät huomaavat vain, että sivua on helpompi lukea.

1. Tee jokaisesta brändiväristä tekstiin sopiva versio, jolla on vähintään 4,5:1 tärkeimpiin taustoihin nähden, ja käytä sitä leipätekstissä, linkeissä ja pienissä kuvakkeissa.
2. Käytä alkuperäistä kirkasta väriä suurissa otsikoissa (niissä 3:1 riittää), taustoissa, kuvituksissa ja koristeissa.
3. Vaihda vaaleilla brändiväreillä painikkeen teksti valkoisesta tummaksi.
4. Lisää kuvien päällä olevan tekstin taakse peittävä tai puoliläpinäkyvä tausta.
5. Tarkista kaikki tilat: hover, kohdistus, vierailtu, valittu, virhe ja vihjeteksti.
6. Tallenna riittävät väriparit design tokeneiksi tai teeman asetuksiksi, jotta uudet sivut perivät ne eikä niitä keksitä joka kerta uudelleen.

Suunnittelu värisokeille: miksi pelkkä väri ei riitä

Kontrasti ja väri ovat eri ongelmia. Colour Blind Awarenessin (avautuu uuteen välilehteen) mukaan noin joka 12. miehellä ja joka 200. naisella on värinäön poikkeama, useimmiten puna-vihervärisokeus. WCAG 1.4.1 (avautuu uuteen välilehteen) (taso A) edellyttää, ettei väri ole ainoa visuaalinen tapa välittää tietoa, joten yhdistä se tekstiin, kuvakkeisiin, kuvioihin tai alleviivauksiin.

• Lomakevirheet: pelkkä punainen reuna ei riitä. Lisää kentän viereen viesti, kuten ”Anna postinumero”, mieluiten kuvakkeen kanssa.
• Saatavuus ja tila: vihreä tai punainen pallo tuotteen vieressä ei kerro monelle ostajalle mitään. Kirjoita ”Varastossa” tai ”Loppuunmyyty”.
• Kaaviot: selite, joka nojaa värien yhdistämiseen, on vaikealukuinen. Merkitse viivat suoraan tai käytä kuvioita ja erilaisia viivatyylejä.
• Linkit: alleviivaa ne leipätekstissä edellä mainituista syistä.

Jos haluat nähdä ongelman itse, Chromen DevTools osaa jäljitellä värinäön poikkeamia, ja Colour Contrast Analyserissa on myös simulaattori. Kontrasti auttaa tässäkin: suhdeluku mittaa vaaleutta eikä sävyä, joten kaksi väriä, joiden suhde on suuri, erottuvat toisistaan, vaikka niiden sävyt näyttäisivät samanlaisilta. Lisää siitä, miten heikkonäköiset ja muut toimintarajoitteiset ihmiset säätävät laitteitaan, löydät artikkelista miten vammaiset ihmiset käyttävät verkkoa.

Riittävätkö suuren kontrastin tilat ja kontrastipainikkeet?

Eivät. Käyttöjärjestelmän kontrastiteemat ja sivun omat kontrastipainikkeet auttavat niitä, jotka tietävät tarvitsevansa lisää kontrastia ja ottavat sen käyttöön. WCAG arvioi sivusi kuitenkin oletustilassa, joten värien, jotka jokainen kävijä näkee ensimmäisenä, on edelleen täytettävä vaatimukset. Kontrastipainike on lisävaihtoehto niille, jotka haluavat enemmän, ei korjaus riittämättömille väreille.

Osa vammaisista ihmisistä käyttää Windowsin kontrastiteemoja, jotka korvaavat sivun värit omillaan. Sivusto kannattaa testata sellaisen teeman ollessa käytössä: taustakuvina toteutetut kuvakkeet voivat kadota, ja pelkällä box-shadow-varjolla piirretyt kohdistuksen tyylit voivat hävitä. CSS:n prefers-contrast-mediakyselyllä voit myös tarjota suuremman kontrastin version niille, jotka ovat pyytäneet sitä järjestelmänsä asetuksissa.

Omassa widgetissämme on kontrastisäätö ja värisokeusprofiili, ja jotkut kävijät pitävät niitä hyödyllisinä. Sanoisimme silti saman: jos leipätekstisi on #999999 valkoisella, muuta CSS:ää. Widget antaa lisää kontrastia haluavalle kävijälle keinon saada sitä. Se ei tee riittämättömistä oletusväreistä vaatimusten mukaisia, ja ohjeidemme WCAG-kooste sanoo saman.