Tekstin väri
Taustan väri
Esimerkit:
Värikontrasti-tarkistaja
Tarkista kahden värin välinen WCAG-kontrastisuhde ja näe, täyttääkö se AA- ja AAA-saavutettavuusvaatimukset.
Värikontrasti-tarkistaja – varmista tekstin luettavuus
Värikontrasti-tarkistaja laskee kahden värin välisen kontrastisuhteen WCAG 2.x -ohjeiston mukaisesti ja kertoo heti, täyttääkö väriyhdistelmä saavutettavuuden AA- ja AAA-vaatimukset. Työkalu on tarkoitettu verkkosivujen suunnitteluun: riittävä kontrasti varmistaa, että teksti on luettavaa myös heikkonäköisille ja eri valaistusolosuhteissa.
Mikä on värikontrasti?
Värikontrasti kuvaa, kuinka selvästi kaksi väriä – tyypillisesti teksti ja sen tausta – erottuvat toisistaan. Kontrasti ilmaistaan suhdelukuna väliltä 1:1 (värit ovat samat, ei kontrastia) ja 21:1 (musta valkoisella, suurin mahdollinen kontrasti). Mitä suurempi luku, sitä helpompi tekstiä on lukea.
Miten kontrastisuhde lasketaan?
Laskenta tapahtuu kahdessa vaiheessa. Ensin jokaiselle värille lasketaan suhteellinen luminanssi (relative luminance). Jokainen RGB-kanava (0–255) jaetaan luvulla 255 ja linearisoidaan sRGB-kaavalla:
jos c ≤ 0,03928: c / 12,92, muuten ((c + 0,055) / 1,055)^2,4
Linearisoidut arvot painotetaan ihmissilmän herkkyyden mukaan:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
Lopuksi kahden värin luminansseista lasketaan kontrastisuhde, jossa L1 on vaaleamman ja L2 tummemman värin luminanssi:
Kontrasti = (L1 + 0,05) / (L2 + 0,05)
Esimerkki: musta teksti valkoisella
Lasketaan kontrasti mustalle tekstille valkoisella taustalla:
- Valkoinen (#FFFFFF): kaikki kanavat ovat 255 → linearisoituna 1,0 → L1 = 0,2126 + 0,7152 + 0,0722 = 1,0
- Musta (#000000): kaikki kanavat ovat 0 → L2 = 0,0
- Kontrasti = (1,0 + 0,05) / (0,0 + 0,05) = 1,05 / 0,05 = 21:1
Tulos 21:1 on suurin mahdollinen ja läpäisee kaikki WCAG-tasot.
WCAG-vaatimukset
WCAG (Web Content Accessibility Guidelines) on kansainvälinen verkkosisällön saavutettavuusohjeisto, jonka W3C julkaisee. Tekstin kontrastivaatimukset ovat:
- AA, tavallinen teksti: vähintään 4,5:1
- AA, suuri teksti: vähintään 3:1
- AAA, tavallinen teksti: vähintään 7:1
- AAA, suuri teksti: vähintään 4,5:1
Suureksi tekstiksi lasketaan vähintään 24 pikselin koko tai 18,66 pikseliä lihavoituna. Suomessa julkishallinnon digipalveluilta edellytetään saavutettavuuslain ja EU:n saavutettavuusdirektiivin nojalla vähintään AA-tasoa.
Miksi kontrasti on tärkeää?
Riittävä kontrasti hyödyttää kaikkia käyttäjiä, mutta erityisesti heikkonäköisiä, ikääntyneitä ja niitä, jotka käyttävät palvelua kirkkaassa auringonvalossa tai heikkolaatuisella näytöllä. Liian vähäinen kontrasti tekee tekstistä raskasta lukea ja voi sulkea osan käyttäjistä palvelun ulkopuolelle. Hyvä kontrasti parantaa siis sekä saavutettavuutta että yleistä käytettävyyttä.
Vinkkejä hyvään kontrastiin
- Käytä tummaa tekstiä vaalealla taustalla tai päinvastoin – vältä kahta keskisävyistä väriä vierekkäin.
- Älä luota pelkkään väriin tiedon välittämisessä; varmista riittävä vaaleusero.
- Testaa leipätekstin lisäksi linkit, painikkeet ja lomakkeiden ohjetekstit.
- Tavoittele leipätekstissä mieluummin selvästi yli 4,5:1, jolloin kontrasti riittää eri näytöillä.
Kokeile myös näitä palveluita
Mainos
Usein kysytyt kysymykset
Mikä on hyvä värikontrasti?
WCAG-ohjeiston mukaan tavallisen tekstin ja taustan välisen kontrastisuhteen tulee olla vähintään 4,5:1 (AA-taso) ja tiukemmalla AAA-tasolla vähintään 7:1. Suuremmalle tekstille (vähintään 18,66 px lihavoituna tai 24 px) riittää 3:1 (AA) tai 4,5:1 (AAA). Mitä suurempi suhde, sitä paremmin teksti erottuu.
Miten kontrastisuhde lasketaan?
Ensin lasketaan molempien värien suhteellinen luminanssi: jokainen RGB-kanava muunnetaan väliltä 0–1, linearisoidaan sRGB-kaavalla ja painotetaan summaksi 0,2126·R + 0,7152·G + 0,0722·B. Kontrastisuhde on (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleamman ja L2 tummemman värin luminanssi. Suhde on aina välillä 1:1 ja 21:1.
Mitä eroa on AA- ja AAA-tasolla?
AA on WCAG:n yleisesti vaadittu vähimmäistaso ja riittää useimpiin verkkopalveluihin: tavalliselle tekstille 4,5:1. AAA on tiukin taso ja vaatii tavalliselle tekstille 7:1; sitä käytetään, kun halutaan erityisen hyvä luettavuus. Julkishallinnon palveluilta edellytetään Suomessa saavutettavuusdirektiivin mukaisesti vähintään AA-tasoa.
Vaikuttaako tekstin koko vaatimukseen?
Kyllä. Suurelle tekstille riittää matalampi kontrasti, koska paksummat kirjaimet erottuvat helpommin. WCAG määrittelee suureksi tekstiksi vähintään 24 pikseliä tai 18,66 pikseliä lihavoituna. Tällöin AA-vaatimus on 3:1 ja AAA-vaatimus 4,5:1.
Mikä on suurin mahdollinen kontrastisuhde?
Suurin kontrastisuhde on 21:1, joka saadaan puhtaan mustan (#000000) ja puhtaan valkoisen (#FFFFFF) välillä. Pienin on 1:1, kun molemmat värit ovat identtiset. Käytännössä hyvä leipätekstin kontrasti on selvästi yli 4,5:1.
Oliko tästä laskurista apua?
