Värikontrastintarkistaja – Testaa teksti- ja taustavärin saavutettavuus WCAG-standardilla
Värikontrastintarkistaja laskee kahden värin välisen kontrastisuhteen ja tarkistaa, täyttävätkö ne WCAG 2.1 -saavutettavuusstandardin vaatimukset. Syötä hex-värikoodit ja näet välittömästi hyväksyykö vai hylkääkö standardi yhdistelmän.
WCAG AA -taso vaatii vähintään 4.5:1 kontrastisuhteen normaalille tekstille ja 3:1 suurelle tekstille. AAA-taso vaatii 7:1 ja 4.5:1. Työkalu näyttää, millä tasoilla väripari läpäisee testin, ja ehdottaa tarvittaessa korjauksia.
Miksi värikontrasti on tärkeää verkkosivuilla?
Heikko kontrasti tekee tekstistä vaikealukuista erityisesti näkövammaisille, heikkonäköisille ja värisokeuteen kuuluville käyttäjille. Suomessa julkishallinnon verkkopalvelut ovat lain mukaan velvollisia täyttämään WCAG AA -tason. Myös monet yritykset noudattavat standardia vastuullisuus- ja saavutettavuussyistä.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi?
Katso kaikki Ratkaisut →Värikontrastin tarkistus arvioi tekstin ja taustan välisen kontrastisuhteen WCAG-saavutettavuusstandardin mukaan. Välttämätön työkalu web-suunnittelijoille ja kehittäjille saavutettavien sivustojen luomiseen.
Syötä tekstin ja taustan värikoodit, niin työkalu laskee kontrastisuhteen ja kertoo, täyttääkö se WCAG-vaatimukset.
- Laske kontrastisuhde kahden värin välillä (esim. 4.5:1).
- Tarkista, täyttääkö yhdistelmä WCAG AA- tai AAA-tason vaatimukset.
- Esikatsele tekstin luettavuutta valitsemillasi väreillä.
WCAG-standardi määrittelee vähimmäiskontrastisuhteen – korkeampi on aina parempi.
- AA-taso: normaali teksti 4.5:1, iso teksti 3:1 – vähimmäisvaatimus.
- AAA-taso: normaali teksti 7:1, iso teksti 4.5:1 – paras käytäntö.
- Kontrastisuhde 1:1 tarkoittaa identtisiä värejä – 21:1 on musta valkoisella.
Hyvä kontrasti parantaa luettavuutta kaikille – myös kirkkaassa valossa ja pienillä näytöillä.
- Noin 8 % miehistä ja 0,5 % naisista on jonkinlainen värinäön puute.
- Saavutettavuus ei ole vain eettinen velvollisuus – monissa maissa se on myös laillinen vaatimus.
- Työkalu toimii selaimessa – värikoodejasi ei tallenneta.