Syötä tekstin ja taustan väri, ja työkalu näyttää, onko kontrasti riittävä. Laskelmat perustuvat kansainväliseen saavutettavuusstandardiin WCAG 2.1.

Luettavuus on tekstivärin ja taustavärin välinen kirkkausero. Mitä suurempi ero, sitä helpompi teksti on lukea. Liian matala kontrasti tekee sisällöstä vaikeasti luettavaa – erityisesti henkilöille, joilla on näkövamma, ikääntyneille tai vaikeissa valaistusolosuhteissa.
Maailman terveysjärjestön (WHO) mukaan noin 2,2 miljardilla ihmisellä maailmassa on jonkinlainen näkövamma.
Työkalu laskee kontrastisuhteen WCAG 2.1 -standardissa määritellyllä kaavalla – kansainvälisillä digitaalisen saavutettavuuden ohjeilla.
Luettavuuden tarkistaminen kestää vain muutaman sekunnin:
Heksadesimaalimuoto – suosituin verkkosivujen suunnittelussa. Alkaa merkillä # ja sisältää 3 tai 6 merkkiä (numerot 0-9 ja kirjaimet A-F).
#fff – valkoinen (lyhennetty muoto)#ffffff – valkoinen (täysi muoto)#1a73e8 – sininenKontrastisuhde
8.59:1
Normaali teksti
Kun värit on syötetty, työkalu näyttää tulokset kolmessa osassa:
Vihreä merkki tarkoittaa, että vaatimus täyttyy. Punainen merkki tarkoittaa, että kontrasti on liian matala ja se on korjattava.
Työkalu näyttää kontrastisuhteen asteikolla 1:1 (ei kontrastia) – 21:1 (maksimaalinen kontrasti – musta teksti valkoisella pohjalla). Tulosta verrataan WCAG-standardin raja-arvoihin:
Taso AA on monissa maissa saavutettavuuslainsäädännön edellyttämä vähimmäistaso, mukaan lukien EU:n verkkosaavutettavuusdirektiivi. Taso AAA tarjoaa paremman luettavuuden, mutta ei aina ole käytännössä saavutettavissa kaikille elementeille.
Jos kontrasti on liian matala, oikean värin etsiminen kokeilemalla ei ole tarpeen. Match-toiminto löytää automaattisesti tekstivärin variantin, joka täyttää valitun kontrastikynnyksen.
Näin sovitus toimii:
Algoritmi säilyttää alkuperäisen värin sävyn ja kylläisyyden muuttaen ainoastaan valoisuutta. Ehdotettu väri pysyy siis visuaalisen identiteetin mukaisena ja täyttää samalla saavutettavuusstandardin.
| Funkcja | Taso AA (vähimmäistaso) | Taso AAA (parannettu) |
|---|---|---|
| Normaali teksti – min. 4.5:1 | ||
| Normaali teksti – min. 7:1 | ||
| Suuri teksti / lihavoitu – min. 3:1 | ||
| Suuri teksti / lihavoitu – min. 4.5:1 | ||
| Kuvakkeet ja käyttöliittymäelementit – min. 3:1 | ||
| Lakisääteinen vaatimus (EU-direktiivi) | ||
| Vaadittu US ADA / Section 508 mukaan | ||
| Vaadittu UK Equality Act 2010 mukaan | ||
| Suositellaan pääsisällölle |
Tarkista värimuoto. HEX-koodin tulee alkaa merkillä # ja sisältää 3 tai 6 merkkiä (esim. #fff tai #ffffff). RGB-muodossa tarkista, että arvot on erotettu pilkuilla ja ovat välillä 0–255.
Kun tausta ja teksti ovat samanlaisen kirkkaita samassa sävyssä, algoritmi ei ehkä löydä vaatimukset täyttävää varianttia ilman sävyn muuttamista. Harkitse silloin taustavärin vaihtamista tai kokonaan erilaisen tekstivärin valitsemista.
Selaimen värinvalitsin tukee vain HEX-muotoa ilman läpinäkyvyyttä. Jos syötät värin RGBA- tai HSLA-muodossa läpinäkyvyydellä, valitsin näyttää vain väriosan (ilman alphaa). Kontrastilaskelmat huomioivat silti läpinäkyvyyden.
Luettavuus on tärkeää kaikkialla, missä jonkun on luettava tekstiä tai tunnistettava käyttöliittymäelementti:
Värisokeus on värinäön häiriö, joka koskee noin 8 % miehistä ja 0,5 % naisista. Värisokeat voivat kokea vaikeuksia erottaa tiettyjä väripareja, vaikka valoisuuskontrasti olisikin riittävä.
Yleisimmät värisokeuden tyypit:
Tämä työkalu tarkistaa valoisuuskontrastin, joka on tärkeä kaikille käyttäjille. Suunnittelussa kannattaa kuitenkin lisäksi välttää ongelmallisia väriyhdistelmiä (esim. punainen teksti vihreällä pohjalla) eikä luottaa pelkästään väriin tiedon välittämisessä – käytä myös muotoja, kuvakkeita ja tekstiä.
Suomi on implementoinut EU:n saavutettavuusdirektiivin Lailla digitaalisten palvelujen tarjoamisesta (306/2019). Laki edellyttää julkisen sektorin verkkopalveluilta WCAG 2.1 AA -tason noudattamista.
Kontrastisuhde 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille on lakisääteinen vaatimus.

Onko sinulla idea uudelle ominaisuudelle, löysitkö virheen tai haluatko ehdottaa toista työkalua, joka helpottaisi työtäsi? Kirjoita meille – vastaamme 24 tunnin kuluessa.

Suunnittelemme verkkosivustoja kaikki käyttäjät huomioiden — oikea värikontrasti, luettava typografia ja looginen rakenne.