Värikontrastisuhde

Värikontrastisuhde mittaa tekstin ja taustan luminanssieroa arvioidakseen, onko värikombinaatio riittävän luettava heikkonäköisille.

Mikä on värikontrastisuhde?

Värikontrastisuhde mittaa, kuinka eri tavalla kaksi väriä näyttävät ihmissilmälle. Se vertaa etualan väriä (yleensä tekstiä) sen taustaan ja ilmaisee tuloksen suhteena kuten 4,5:1. Suhde 1:1 tarkoittaa, ettei eroa ole lainkaan. Suurin mahdollinen suhde 21:1 on puhdas musta puhtaalla valkoisella.^[1]

Miksi värikontrasti on tärkeä?

Hyvä kontrasti auttaa kaikkia lukemaan helpommin. Se on välttämätön heikkonäköisille ihmisille, vanhemmille aikuisille, värisokeiden käyttäjille ja kenelle tahansa, joka lukee näyttöä kirkkaassa auringonvalossa. Heikko kontrasti on myös yleinen este ihmisille, joilla on kognitiivisen saavutettavuuden tarpeita.

WebAIMin 2024 tutkimuksen mukaan heikko tekstin kontrasti oli yleisin yksittäinen saavutettavuusvirhe. Sitä löytyi 81 prosentilta testatuista sivuista.^[1] Suurilla sisältörikkailla sivustoilla — viranomaisportaaleissa, pankkien hallintapaneeleissa, vakuutuslomakkeissa — heikko kontrasti voi tehdä kriittisestä tiedosta lukukelvotonta.

Miten kontrastisuhde lasketaan?

WCAG käyttää kaavaa, joka perustuu suhteelliseen luminanssiin — havaitun kirkkauden mittaan:

Kontrastisuhde = (L1 + 0,05) / (L2 + 0,05)

L1 on vaaleamman värin luminanssi. L2 on tummemman. Kaava painottaa jokaista värikanavaa ihmissilmän toiminnan mukaan: vihreä vaikuttaa eniten havaittuun kirkkauteen, sininen vähiten.^[1]

Laskua ei tarvitse tehdä käsin. Monet ilmaiset työkalut tekevät sen automaattisesti.

Mitä WCAG vaatii?

WCAG asettaa kolme kontrastisääntöä:

1.4.3 Kontrasti (minimi) — taso AA

Normaali teksti: vähintään 4,5:1
Suuri teksti (18px+ tai 14px lihavoitu+): vähintään 3:1
Logot ja koristeellinen teksti on vapautettu

1.4.6 Kontrasti (parannettu) — taso AAA

Normaali teksti: vähintään 7:1
Suuri teksti: vähintään 4,5:1

1.4.11 Ei-tekstinen kontrasti — taso AA (lisätty WCAG 2.1:ssä)

Painikkeet, lomakekentät, kohdistusindikaattorit ja informatiiviset kuvakkeet: vähintään 3:1 ympäröiviä värejä vasten^[2]

Taso AA on EU:n ja Ison-Britannian saavutettavuussääntöjen vaatima standardi. Se tekee 4,5:1-suhteesta leipätekstin tavoitteen, joka useimpien organisaatioiden pitää saavuttaa.

Miten kontrastisuhteita testataan?

Useat työkalut tekevät testauksesta helppoa:

Selaimen DevTools — Chrome ja Firefox näyttävät kontrastisuhteet saavutettavuuspaneeleissaan ja värinvalitsimissaan.
WebAIM Contrast Checker — Ilmainen verkkotyökalu osoitteessa webaim.org/resources/contrastchecker/
Automaattiset skannerit — Työkalut kuten axe, Lighthouse ja WAVE merkitsevät kontrastivirheet osana tavallisia skannauksia.
Suunnittelutyökalut — Figmassa ja Adobe XD:ssä on sisäänrakennetut tai lisäosilla toimivat kontrastintarkistimet, joten suunnittelijat voivat korjata ongelmat ennen koodin kirjoittamista.

Automaattiset työkalut toimivat hyvin yksivärisille taustoille. Kuvan, liukuvärin tai videon päällä oleva teksti vaatii manuaalista tarkistusta.

Mitkä ovat yleisimmät kontrastivirheet?

Nämä virheet toistuvat auditoinnista toiseen:

Vaaleanharmaa teksti valkoisella — Suosittua minimalistisessa suunnittelussa, mutta usein alle 4,5:1.
Lomakekenttien paikkamerkintäteksti — Muotoiltu hyvin heikolla kontrastilla, jotta se näyttäisi "passiiviselta". WCAG koskee sitäkin.
Brändivärit — Kaksi keskisävyistä brändiväriä, jotka näyttävät suunnittelijan silmään eri sävyiltä, voivat silti hylätä kontrastitesteissä.
Pelkkä kuvake -painikkeet — WCAG 2.1:ssä ohjaimina käytettävien kuvakkeiden pitää täyttää 3:1 ei-tekstisen kontrastin sääntö.
Käytöstä poistetut elementit — Teknisesti vapautettu WCAG:n kontrastisäännöistä, mutta monet organisaatiot pitävät ne minimikontrastitasolla käytettävyyden vuoksi.

Sisältö- ja suunnittelutiimien pitää testata brändivärivalikoimansa WCAG-standardia vasten ennen väripäätöksiä. IT-tiimien pitää lisätä kontrastintarkistus automaattiseen testausputkeensa. Lakitiimien pitää tietää, että kontrastivirheet ovat helpoiten viranomaisten havaittavia ongelmia. Kontrastiongelmat tulevat usein esiin myös virallisissa saavutettavuusauditoinneissa.

Entä WCAG 3.0?

Nykyisessä kontrastikaavassa on tunnettuja heikkouksia, erityisesti sinisen tekstin ja hyvin paksun fontin kanssa. Kehitteillä oleva WCAG 3.0 ehdottaa uutta menetelmää nimeltä APCA (Advanced Perceptual Contrast Algorithm), joka käsittelee enemmän fonttikokoja, -painoja ja värikombinaatioita. APCA ei ole vielä virallinen standardi.^[3]

Miten Askem auttaa?

Suurilla sisältösivustoilla — viranomaisportaaleissa, pankkien hallintapaneeleissa, vakuutuslomakkeissa — kontrastivirheitä syntyy usein joukoittain, kun sivupohja tai brändiväri muuttuu. Jatkuvan saavutettavuusseurannan työkalut tarkistavat kontrastisuhteet jokaisella sivulla automaattisesti WCAG 1.4.3:n ja 1.4.11:n mukaan. Askemin kaltaiset työkalut havaitsevat virheet heti ja lähettävät hälytyksen sen sijaan, että ne jäisivät huomaamatta seuraavaan auditointiin. Raportit näyttävät, mitkä sivut ovat ongelmallisia, joten suunnittelu- ja sisältötiimit voivat priorisoida korjaukset.

Lähteet

W3C — WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum): https://www.w3.org/TR/WCAG22/#contrast-minimum
W3C — WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast: https://www.w3.org/TR/WCAG22/#non-text-contrast
W3C — WCAG 3.0 APCA contrast method (Working Draft): https://www.w3.org/TR/wcag-3.0/