1. Syötä tekstin väri
Syötä värikoodi HEX-, RGB- tai HSL-muodossa – tai valitse väri värinvalitsimesta.
Tarkista värikontrasti ja luettavuus WCAG-standardien mukaan
Syötä tekstin ja taustan väri, ja työkalu näyttää, onko kontrasti riittävä. Laskelmat perustuvat kansainväliseen saavutettavuusstandardiin WCAG 2.1.
Loading tool editor...
Miksi värien luettavuus on tärkeää?
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.
Näin käytät värikontrastin tarkistusta
Luettavuuden tarkistaminen kestää vain muutaman sekunnin:
2. Syötä taustaväri
Syötä taustaväri, jolla teksti näytetään.3. Lue tulokset
Työkalu laskee kontrastisuhteen ja näyttää, täyttävätkö värit WCAG-vaatimukset normaalille tekstille, suurelle tekstille ja kuvakkeille.4. Säädä värejä
Jos kontrasti on liian matala, Match-toiminto ehdottaa automaattisesti värivarianttia, joka täyttää valitun kynnyksen.
Mitä värimuotoja tuetaan?
HEX
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– sininen
Kontrastisuhde
8.59:1
Normaali teksti
AA (min. 4.5:1)AAA (min. 7:1)
Näin tulkitset luettavuustestin tulokset
Kun värit on syötetty, työkalu näyttää tulokset kolmessa osassa:
- Normaali teksti – vaatii kontrastin 4.5:1 (AA) tai 7:1 (AAA). Koskee tekstiä alle 18pt (24px) tai alle 14pt lihavoitua.
- Suuri teksti / lihavoitu – vaatii kontrastin 3:1 (AA) tai 4.5:1 (AAA). Koskee otsikoita, painikkeita ja korostettua tekstiä.
- Kuvakkeet – vaatii kontrastin 3:1 (AA). Koskee kuvakkeita ja graafisia käyttöliittymäelementtejä, jotka välittävät tietoa.
Vihreä merkki tarkoittaa, että vaatimus täyttyy. Punainen merkki tarkoittaa, että kontrasti on liian matala ja se on korjattava.
Mitä luettavuustestin tulokset tarkoittavat?
Työkalu näyttää kontrastisuhteen asteikolla 1:1 (ei kontrastia) – 21:1 (maksimaalinen kontrasti – musta teksti valkoisella pohjalla). Tulosta verrataan WCAG-standardin raja-arvoihin:
- Normaali teksti – vaatii kontrastin vähintään 4.5:1 tasolle AA (minimistandardi) tai 7:1 tasolle AAA (laajennettu standardi). Koskee tekstiä alle 18pt (24px) tai alle 14pt (18.5px) lihavoitua.
- Suuri teksti / lihavoitu – vaatii kontrastin vähintään 3:1 tasolle AA tai 4.5:1 tasolle AAA. Koskee tekstiä 18pt (24px) tai 14pt (18.5px) lihavoitua ja suurempaa – otsikoita, painikkeita, korostuksia.
- Kuvakkeet ja graafiset elementit – vaativat kontrastin vähintään 3:1 tasolle AA. Koskee kuvakkeita, painikkeita, lomakekenttiä ja muita käyttöliittymäelementtejä, jotka välittävät tietoa.
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.
Automaattinen värin sovitus WCAG-vaatimuksiin
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:
- Valitse sovitustavoite listasta – esim. AA normaalille tekstille tai AAA suurelle tekstille.
- Käynnistä toiminto Match-painikkeella.
- Työkalu etsii tekstivärin valoisuusvariantteja ja ehdottaa lähintä vaatimukset täyttävää.
- Ehdotettu värikoodi voidaan kopioida leikepöydälle tai asettaa suoraan uudeksi tekstiväriksi.
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.
Mitä tasot AA ja AAA tarkoittavat WCAG-standardissa?
| 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 |
Taso AA (vähimmäistaso)
- 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
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
Värikontrastin tarkistuksen vianmääritys
Näen virheilmoituksen värimuodosta
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.
Match-toiminto ei löydä sopivaa väriä
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.
Värinvalitsimen väri ei vastaa syötettyä koodia
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.
Missä värien luettavuutta kannattaa tarkistaa?
Luettavuus on tärkeää kaikkialla, missä jonkun on luettava tekstiä tai tunnistettava käyttöliittymäelementti:
Verkkosivustot
Teksti sivuilla, painikkeet, linkit, lomakkeet. Erityisen tärkeää yrityksille, joiden kävijöillä on eri ikä ja erilaiset näkökyvyt.Verkkokaupat
Hinnat, Osta nyt -painikkeet, tuotetiedot. Heikko luettavuus voi tarkoittaa menetettyjä tilauksia.Esitykset
Projektorilla näytetyissä dioissa on usein heikompi kontrasti kuin näytöllä. Värit kannattaa tarkistaa ennen esitystä.Julisteet ja esitteet
Painetut materiaalit, joita katsotaan erilaisissa valaistusolosuhteissa, vaativat korkeaa kontrastia.Mobiilisovellukset
Puhelimia käytetään kirkkaassa auringonvalossa, yöllä, eri-ikäisten ihmisten toimesta.Ravintolan ruokalistat
Usein painettu värilliselle paperille tai koristekuvioilla – liian matala kontrasti syntyy helposti.
Värien luettavuus värisokeille
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:
- Deuteranopia – vaikeus erottaa vihreää ja punaista (yleisin muoto)
- Protanopia – vaikeus nähdä punaista
- Tritanopia – vaikeus nähdä sinistä ja keltaista (harvinainen)
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ä.
Saavutettavuusvaatimukset Suomessa
Suomi on implementoinut EU:n saavutettavuusdirektiivin Lailla digitaalisten palvelujen tarjoamisesta (306/2019). Laki edellyttää julkisen sektorin verkkopalveluilta WCAG 2.1 AA -tason noudattamista.
- Julkinen sektori — valtion, kuntien ja hyvinvointialueiden verkkopalvelujen on täytettävä WCAG 2.1 AA. Etelä-Suomen aluehallintovirasto (AVI) valvoo noudattamista.
- EU:n esteettömyysdirektiivi (EAA) — kesäkuusta 2025 alkaen vaatimukset laajenevat yksityiselle sektorille: verkkokaupat, pankit, liikennepalvelut ja mediapalvelut.
- Suomalainen erityispiirre — Suomen digitaalinen julkishallinto on Euroopan edistyneimpiä. Suurin osa viranomaispalveluista toimii verkossa, mikä tekee saavutettavuudesta erityisen tärkeää.
Kontrastisuhde 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille on lakisääteinen vaatimus.
Mikä erottaa värikontrastin tarkistuksen?
Objektiivinen arviointi matemaattiseen kaavaan perustuen
Kontrastisuhde lasketaan WCAG-ohjeiden kaavalla – tulos ei riipu näytön asetuksista eikä yksilöllisestä värien havaitsemisesta.Kansainvälisen WCAG-standardin mukainen
Tulokset vastaavat WCAG 2.1:n vaatimuksia, jotka ovat digitaalisen saavutettavuuden lainsäädännön perusta EU:ssa ja monissa muissa maissa.Automaattinen värin sovitus kynnysarvoon
Match-toiminto löytää tekstivärin variantin, joka täyttää valitun kontrastikynnyksen – säilyttää sävyn, muuttaa vain valoisuutta.Viisi värimuotoa
Tuetut muodot: HEX, RGB, RGBA, HSL ja HSLA. Värikoodin voi liittää suoraan Figmasta, Photoshopista tai CSS-tyylitiedostosta.Kolme sisältötyyppiä yhdessä testissä
Yksi tarkistus näyttää tuloksen normaalille tekstille, suurelle tekstille (otsikot, painikkeet) ja kuvakkeille – jokaista tyyppiä ei tarvitse testata erikseen.Reaaliaikainen tekstin esikatselu
Tekstin tai taustan värin muutos päivittää esikatselun välittömästi – näet, miltä teksti näyttää valitulla taustalla, jo ennen käyttöönottoa.
Usein kysytyt kysymykset värikontrastin tarkistuksesta
Auta meitä parantamaan työkalujamme
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.
Tarvitsetko saavutettavan verkkosivuston?
Suunnittelemme verkkosivustoja kaikki käyttäjät huomioiden — oikea värikontrasti, luettava typografia ja looginen rakenne.