Kontrastitarkistin
Varmista, että tekstisi ja käyttöliittymäsi täyttävät WCAG 2.1 -kontrastivaatimukset — olennainen osa EAA/EN 301 549 -vaatimustenmukaisuutta. Liitä brändivärit, esikatsele yhdistelmät ja saa selkeä hyväksytty/hylätty-tulos normaalille tekstille, suurelle tekstille ja käyttöliittymäkomponenteille.
Euroopan laajuisesti organisaatioiden luottama työkalu WCAG- ja EAA-vaatimustenmukaisuuden saavuttamiseen
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
Mikä on kontrastitarkistin ja miksi sitä tarvitaan?
Riittävä kontrasti parantaa luettavuutta kaikille — erityisesti käyttäjille, joilla on heikko näkö, värinäköpoikkeavuuksia tai vanhempia näyttölaitteita.
Tarkista 1.4.3 Kontrasti (vähimmäistaso), 1.4.6 Kontrasti (parannettu) ja 1.4.11 Ei-tekstin kontrasti käyttöliittymäkomponenteille ja grafiikalle.
Euroopan esteettömyysasetus (EAA) viittaa EN 301 549 -standardiin, joka pohjautuu WCAG-ohjeisiin — kontrasti on olennainen osa vaatimusten täyttämistä.
Saavutettavat väripaletit luovat selkeitä, kestävän luettavia käyttöliittymiä, jotka toimivat sekä vaaleissa että tummissa teemoissa ja eri laitteilla.
WCAG 2.1 -kontrastirajat (pikaopas)
Vähimmäissuhde: 4.5:1 (teksti alle 24 px normaali / 19 px lihavoitu).
Vähimmäissuhde: 3:1 (≥ 24 px normaali tai ≥ 19 px lihavoitu).
Vähimmäiskontrasti viereisiin väreihin: 3:1 (fokuskehykset, lomakekentät, kuvakkeet jne.).
Kokeile kontrastitarkistinta
Syötä etu- ja taustavärit (HEX). Työkalu laskee kontrastisuhteen ja näyttää hyväksytty/hylätty-tuloksen WCAG-tasojen mukaan. Tulokset päivittyvät kirjoittaessasi.
Usein kysytyt kysymykset
Muuttuuko kontrastivaatimus WCAG 2.2 -versiossa?
Edellyttääkö EAA WCAG-kontrastia?
Mikä lasketaan 'suureksi tekstiksi'?
Tee kontrastitarkistuksista osa työnkulkuasi
Suorita kontrastitarkistuksia suunnittelukatselmuksissa ja koodin PR-tarkastuksissa. Yhdistä automaattisiin skannauksiin laajamittaisen kattavuuden saavuttamiseksi.