Ilmainen työkalu
Värikontrastin tarkistus
Tarkista kahden värin kontrastisuhde WCAG 2.1 AA- ja AAA-vaatimusten mukaisesti. Testaa normaali teksti, suuri teksti ja graafiset käyttöliittymäkomponentit — samat kriteerit, joita eurooppalainen saavutettavuusasetus edellyttää.
Text color
#FFFFFF
Background color
#4D65FF
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Large text (24px) — The quick brown fox jumps.
Color blindness simulation
Sample text preview
Large text
Protanopia
~1.3% of males
Sample text preview
Large text
Deuteranopia
~1.2% of males
Sample text preview
Large text
Tritanopia
~0.01% of population
Sample text preview
Large text
Achromatopsia
~0.003% of population
Mikä on värikontrastin tarkistustyökalu?
Värikontrastin tarkistustyökalu laskee tekstivärin (etualan) ja taustavärin välisen luminanssisuhteen ja vertaa sitä WCAG 2.1 -saavutettavuusvaatimuksiin. Riittämätön värikontrasti on yleisin WCAG-virhe verkossa — se löytyy 83,6 %:lta etusivuista WebAIM Million 2024 -analyysin mukaan. Tämä ilmainen Askem-työkalu testaa kaikki viisi WCAG-kontrastikriteeriä ja sisältää värisokeus-simulaation neljälle näkötyypille.
WCAG 2.1 kontrastivaatimukset
| Elementti | WCAG AA | WCAG AAA |
|---|---|---|
| Normaali teksti (< 18pt / < 14pt lihavoitu) | 4,5:1 | 7:1 |
| Suuri teksti (≥ 18pt / ≥ 14pt lihavoitu) | 3:1 | 4,5:1 |
| Käyttöliittymäkomponentit ja graafiset objektit | 3:1 | — |
Miten värikontrasti tarkistetaan
Syötä tekstiväri ja taustaväri hex-arvona, RGB-lukuina tai värivalitsimella. Työkalu laskee kummankin värin suhteellisen luminanssin ja jakaa vaaleamman arvon tummemmalla tuottaen kontrastisuhteen. Tulosta verrataan kaikkiin viiteen WCAG 2.1 -kynnykseen ja näytetään hyväksytty tai hylätty -tulos jokaiselle.
Jos väripari epäonnistuu, työkalu ehdottaa automaattisesti lähintä hyväksyttyä yhdistelmää säätämällä etuvärin valoisuutta. Napsauta Käytä päivittääksesi molemmat värit välittömästi. URL päivittyy jokaisella muutoksella, joten voit jakaa tietyn kontrastintarkistuksen kopioimalla linkin.
Värikontrasti ja eurooppalainen saavutettavuusasetus
Eurooppalainen saavutettavuusasetus (EAA) viittaa EN 301 549 -standardiin, joka sisältää WCAG 2.1 AA-tason vaatimukset. Tämä tarkoittaa, että EAA:n piiriin kuuluvien organisaatioiden on varmistettava vähintään 4,5:1 kontrasti normaalille tekstille, 3:1 suurelle tekstille ja 3:1 käyttöliittymäkomponenteille.
Saavutettavuusauditointi nostaa värikontrastin tyypillisesti ensimmäisten ongelmien joukkoon. Kontrastintarkistuksen käyttö suunnitteluvaiheessa estää nämä virheet ennen julkaisua.
Miksi värikontrasti on tärkeä saavutettavuudelle
Kun tekstillä ei ole tarpeeksi kontrastia taustaansa vasten, sen lukeminen on vaikeaa tai mahdotonta heikkonäköisille, värisokeille tai kenelle tahansa, joka käyttää näyttöä kirkkaassa auringonvalossa. Hyvä kontrasti hyödyttää kaikkia käyttäjiä — ei vain niitä, joilla on näkövamma.
Tämä työkalu tarkistaa yhden väriparin. Jos haluat skannata koko verkkosivustosi kontrastiongelmien ja muiden saavutettavuusvirheiden varalta automaattisesti, tutustu Askem Laadunvarmistukseen. Voit myös testata koko sivustosi saavutettavuustarkistajalla.
Päivitetty viimeksi: maaliskuu 2026
Usein kysytyt kysymykset
Mikä kontrastisuhde vaaditaan WCAG AA -tasolla?
Mikä kontrastisuhde vaaditaan WCAG AAA -tasolla?
Mikä lasketaan suureksi tekstiksi WCAG:ssa?
Mikä on käyttöliittymäkomponenttien vähimmäiskontrasti?
Vaatiiko eurooppalainen saavutettavuusasetus värikontrastia?
Miten korjaan epäonnistuneen kontrastisuhteen?
Voinko jakaa kontrastintarkistuksen tulokset?
Mikä on värikontrastin tarkistustyökalu?
Onko tämä kontrastintarkistus ilmainen?
Miten värisokeus vaikuttaa kontrastin havaitsemiseen?
Tämä tarkistaa yhden väriparin. Askem skannaa koko sivustosi automaattisesti.
- Jatkuva WCAG-seuranta
- Kontrasti, alt-tekstit, otsikot ja paljon muuta
- GDPR-yhteensopiva — EU:ssa isännöity