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.
MAINOS
MAINOS
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.
MAINOS
Mitä tasot AA ja AAA tarkoittavat WCAG-standardissa?
| Feature | 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.
MAINOS
Usein kysytyt kysymykset värikontrastin tarkistuksesta
Mikä on värikontrastisuhde?
Kontrastisuhde on kahden värin välisen kirkkauseron mitta. Asteikko alkaa 1:1:stä (ei eroa) ja päättyy 21:1:een (suurin mahdollinen ero – musta teksti valkoisella taustalla). Mitä korkeampi suhde, sitä helpompi on erottaa teksti taustasta.
Mikä kontrasti on riittävä WCAG:n mukaan?
Normaalille tekstille vähimmäiskontrasti on 4.5:1 (taso AA). Suurelle tekstille – otsikoille 18pt:stä tai lihavoidulle 14pt:stä – riittää 3:1. Kuvakkeille ja käyttöliittymäkomponenteille vaaditaan myös 3:1.
Miksi värini eivät täytä vaatimuksia, vaikka näen ne hyvin?
Henkilökohtainen värien havaitseminen riippuu näytön asetuksista, huoneen valaistuksesta ja yksilöllisestä näkökyvystä. WCAG perustuu objektiiviseen matemaattiseen kaavaan, joka ottaa huomioon erilaiset näkövammat.
Pitääkö saavuttaa kontastitaso AAA?
Ei aina. Taso AA (4.5:1 normaalille tekstille) on vähimmäisvaatimus EU:n saavutettavuussäädösten mukaan. Taso AAA (7:1) tarjoaa paremman luettavuuden, mutta on vaikeampi saavuttaa. Kriittiselle sisällölle – varoitukset, turvallisuusohjeet – kannattaa pyrkiä AAA-tasoon.
Vaatiiko Suomen laki värikontrastia verkkosivuilla?
Kyllä. Laki digitaalisten palvelujen tarjoamisesta (306/2019) edellyttää julkisen sektorin verkkosivujen noudattavan EN 301 549 -standardia, joka viittaa WCAG 2.1 AA:han. Tämä sisältää kontrastisuhteen 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. EU:n esteettömyysdirektiivi laajentaa vaatimuksen yksityiselle sektorille kesäkuusta 2025.
Mikä on WCAG-standardi?
WCAG (Web Content Accessibility Guidelines) on W3C:n kehittämä kansainvälinen verkkosisällön saavutettavuusohjeisto. Se määrittelee mm. vähimmäiskontrastiarvot, otsikkorakenteen ja näppäimistötuen. Suomen laki viittaa WCAG:hen eurooppalaisen EN 301 549 -standardin kautta.
Miten löydän verkkosivuni värikoodit?
Selaimessa (Chrome, Firefox, Edge) avaa kehittäjätyökalut (oikea klikkaus > Tutki). Styles-välilehdellä näet sivun värit. Vaihtoehtoisesti ColorZilla-laajennus mahdollistaa minkä tahansa elementin värin valinnan.
Toimiiko tämä työkalu tumman tilan suunnitteluun?
Kyllä. Työkalu laskee kontrastisuhteen minkä tahansa kahden värin välillä riippumatta siitä, kumpi on vaaleampi. Tummassa tilassa syötä vaalea tekstiväri ja tumma taustaväri. Samat WCAG-kynnysarvot pätevät.
Mikä on turvallinen harmaan vähimmäissävy valkoisella taustalla?
Tummin harmaa, joka läpäisee WCAG AA:n puhtaalla valkoisella (#ffffff), on #767676 suhteella 4,54:1. Vaaleammat sävyt kuten #999999 (2,85:1) eivät läpäise. AAA-vaatimukseen (7:1) tarvitaan vähintään #595959.
Mikä ero on WCAG 2.1 ja 2.2 välillä?
WCAG 2.1 (2018) lisäsi kriteerejä mobiilisaavutettavuudelle ja heikkonäköisyydelle. WCAG 2.2 (2023) lisää kriteerejä fokuksen näkyvyydelle ja vetotoiminnoille, mutta ei muuta kontrastirajoja. Kontrastivaatimukset (1.4.3 ja 1.4.6) pysyvät samoina.
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.