Tarkistus käyttää virallista WCAG-suhteellisen luminanssin kaavaa, joten luvut vastaavat WebAIM-tarkistimen ja useimpien saavutettavuusauditointien tuloksia. Kaikki lasketaan selaimessasi - värejä ei lähetetä mihinkään, eikä käyttöä ole rajoitettu.
Värikontrasti tarkistus
Toimii kokonaan selaimessasi - ei lähetyksiä, ei rekisteröitymistä.
Kontrastisuhde
Hyväksyttyvaatii 4.5:1
Hyväksyttyvaatii 3:1
Hylättyvaatii 7:1
Hyväksyttyvaatii 4.5:1
Suuri = 18 pt (24 px) tai 14 pt (18,66 px) lihavana.
Mikä on värikontrasti tarkistus?
Värikontrasti tarkistus mittaa tekstin ja taustavärin välisen kontrastisuhteen ja kertoo, täyttääkö se WCAG-saavutettavuusstandardin vaatimukset. Työkalu palauttaa suhteen väliltä 1:1 - 21:1 ja näyttää, läpäiseekö väripari AA- ja AAA-tason vaatimukset sekä normaalille että suurelle tekstille.
Näin se toimii
- 1Syötä värit. Kirjoita heksakoodi, rgb()-arvo tai CSS-värinimi tekstille ja taustalle, tai valitse väri värinvalitsimella.
- 2Lue kontrastisuhde. Kontrastisuhde päivittyy reaaliajassa, ja näet tekstin esikatselun sen taustalla.
- 3Tarkista tulos. Kukin merkki näyttää, läpäiseekö väripari WCAG AA- ja AAA-tason vaatimukset normaalille ja suurelle tekstille.
Kenelle
- Suunnittelijat, jotka testaavat brändivärejä ennen kehitysvaihetta.
- Frontend-kehittäjät, jotka tarkistavat painikkeiden, linkkien ja otsikoiden värit WCAG AA -vaatimuksia vasten.
- Saavutettavuusauditoijat, jotka dokumentoivat kontrastivirheet tarkoilla suhdeluvuilla.
- Sisältö- ja sähköpostitiimit, jotka varmistavat tekstin luettavuuden värillisillä taustoilla.
Usein kysyttyä
Onko värikontrasti tarkistus ilmainen?
On - se on täysin ilmainen, ilman rekisteröitymistä ja rajoituksia. Se toimii kokonaan selaimessasi.
Mikä kontrastisuhde vaaditaan WCAG AA -tasolla?
WCAG 2.1 AA -taso vaatii vähintään 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille. AAA-taso nostaa vaatimuksen 7:1:een normaalille tekstille ja 4,5:1:een suurelle tekstille.
Mitä tarkoittaa suuri teksti?
Suuri teksti on vähintään 18 pt (noin 24 px) tavallisella leikkaustyylillä tai 14 pt (noin 18,66 px) lihavana. Suurelle tekstille sallitaan matalampi kontrastisuhde, koska isommat kirjaimet ovat helpommin luettavissa.
Miten kontrastisuhde lasketaan?
Kaava on (L1 + 0,05) / (L2 + 0,05), jossa L1 ja L2 ovat vaaleamman ja tummemman värin suhteelliset luminanssit. Luminanssi lasketaan sRGB:n punaisen, vihreän ja sinisen kanavasta WCAG 2.x -määritelmän mukaan.
Tukeeko työkalu heksakoodeja, RGB- ja värinimivarvoja?
Kyllä. Voit syöttää 3-, 4-, 6- tai 8-merkkisen heksakoodin, rgb()- ja rgba()-arvon tai minkä tahansa CSS-värinimen, kuten 'teal'. Värin voi valita myös värinvalitsimella.
Miksi sama kontrastisuhde joskus läpäisee ja joskus hylätään?
Vaadittu suhde riippuu tekstikoosta ja tavoiteltavasta tasosta. Esimerkiksi 3,5:1 hylätään AA-tasolla normaalille tekstille, mutta hyväksytään suurelle tekstille - tarkista aina sen koon ja tason mukaan, jota oikeasti käytät.