Varikontrastin tarkistin
Tarkista kontrastisuhde kahden varin valilla WCAG AA- ja AAA-saavutettavuustasoja vasten.
Nain kaytat tyokalua Kontrastin tarkistin
- 01
Valitse tekstin vari ja taustan vari.
- 02
Lue kontrastisuhde ja WCAG lapi- tai hylatty-merkit.
- 03
Saada vareja kunnes ne lapaisevat tarvitsemasi tason.
Mitä kontrastintarkistin tekee
Tämä WCAG-värikontrastin tarkistin näyttää tekstin ja taustan värien tarkan kontrastisuhteen sekä sen, täyttyvätkö saavutettavuustasot AA ja AAA. Valitse värit värivalitsimella tai heksakoodilla ja katso reaaliaikainen esikatselu.
Säädä värejä, kunnes tunnukset läpäisevät tarvitsemasi tason. Tulos päivittyy heti muutosten aikana.
Miksi kontrastilla on merkitystä
Tekstiä on vaikea tai mahdoton lukea, jos sen vaaleus on liian lähellä taustan vaaleutta. Tämä koskee etenkin heikkonäköisiä ja värinäön poikkeamista kärsiviä sekä kaikkia, jotka käyttävät puhelinta kirkkaassa auringonvalossa. Riittävä kontrasti pitää sisällön luettavana kaikille.
WCAG:n AA- ja AAA-raja-arvot
Web Content Accessibility Guidelines eli WCAG määrittää standardin. AA on useimpien sivustojen tavoittelema taso, johon monet saavutettavuuslait viittaavat. Se vaatii tavalliselle tekstille kontrastisuhteen 4,5:1 ja suurelle tekstille 3:1. AAA on tiukempi: 7:1 tavalliselle ja 4,5:1 suurelle tekstille.
Suuren tekstin raja on matalampi, koska suuremmat kirjaimet säilyvät luettavina vähäisemmällä kontrastilla. Teksti lasketaan suureksi, kun koko on noin 24 px (18 pt) tai lihavoituna 18,66 px (14 pt).
Miten kontrastisuhde lasketaan
Suhde lasketaan värien suhteellisesta luminanssista virallisella WCAG-kaavalla. Arvo vaihtelee välillä 1:1, eli ei kontrastia ja samat värit, ja 21:1, eli musta valkoisella.
Toimii selaimessasi
Kaikki lasketaan selaimessasi, joten työkalu on nopea ja yksityinen. Valitsemiasi värejä ei lähetetä mihinkään.
Usein kysytyt kysymykset
Mita kontrastisuhdetta tarvitsen?
WCAG AA vaatii 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille (18pt tai 14pt lihavoitu). AAA vaatii 7:1 ja 4,5:1 vastaavasti.
Mika lasketaan suureksi tekstiksi?
Teksti, joka on vahintaan 24px (18pt), tai 18,66px (14pt) lihavoituna. Suurelle tekstille sallitaan alempi kontrastisuhde.
Miten suhde lasketaan?
Kunkin varin suhteellisesta luminanssista kayttaen virallista WCAG-kaavaa, antaen arvon valilla 1:1 (ei kontrastia) ja 21:1 (musta valkoisella).