Värikontrastin tarkistin
Tarkista tekstin ja taustan värien välinen kontrasti WCAG 2:n ja APCA:n mukaan. Tarkistin laskee WCAG 2:n kontrastisuhteen suhteellisesta luminanssista ja ilmoittaa, läpäiseekö kontrasti AA- ja AAA-tason vaatimukset normaalikokoiselle ja suurelle tekstille sekä UI grafiikalle. Lisäksi se näyttää APCA:n vaaleuskontrastiarvon ja ohjeita sen käyttötarkoituksesta. Työkalu on suunniteltu suunnittelijoille ja kehittäjille, jotka rakentavat saavutettavia käyttöliittymiä.
Usein kysytyt kysymykset
Mitä WCAG-tasot tarkoittavat?
AA-taso edellyttää 4.5:1 normaalikokoiselta tekstiltä ja 3:1 suurelta tekstiltä (onnistumiskriteeri 1.4.3); AAA-taso edellyttää 7:1 ja 4.5:1 (1.4.6). Käyttöliittymän osien ja merkityksellisen grafiikan kontrastin viereisiin väreihin nähden on oltava 3:1 (1.4.11). Tarkistin ilmoittaa, täyttyykö kukin näistä viidestä raja-arvosta.
Mitä tarkoitetaan suurella tekstillä?
WCAG määrittelee suureksi tekstiksi vähintään 18 pisteen normaalipainoisen tekstin, joka vastaa noin 24 CSS pikseliä, tai vähintään 14 pisteen lihavoidun tekstin, joka vastaa noin 18.66 CSS pikseliä. Tätä pienempi teksti on normaalikokoista ja vaatii suuremman kontrastisuhteen.
Miksi suhde 4.499:1 ei läpäise AA-tasoa?
WCAG:n raja-arvot ovat tarkkoja, joten suhde, joka pyöristyisi arvoon 4.5 mutta jää sitä pienemmäksi, ei läpäise vaatimusta. Tarkistin vertaa pyöristämätöntä suhdetta ja näyttää sen kahden desimaalin tarkkuudella katkaistuna, joten näytetty luku ei koskaan näytä todellista arvoa paremmalta.
Mikä on APCA?
Accessible Perceptual Contrast Algorithm on kontrastimenetelmä, joka kehitettiin WCAG 3:n luonnoksia varten. Se mallintaa havaittua vaaleuskontrastia, käsittelee tekstiä ja taustaa eri tavoin ja palauttaa vaaleuskontrastiarvon Lc, joka vaihtelee noin arvosta -108 arvoon 106. Se ei vielä sisälly mihinkään julkaistuun WCAG-standardiin, joten käytä vaatimustenmukaisuuden arviointiin WCAG 2:n tuloksia ja APCA:a lisätarkistuksena.
Miksi APCA-arvo on joskus negatiivinen?
APCA huomioi kontrastin napaisuuden: positiiviset arvot tarkoittavat tummaa tekstiä vaalealla taustalla ja negatiiviset arvot vaaleaa tekstiä tummalla taustalla. Ohjeissa käytetään itseisarvoa, joten Lc -75 ja Lc 75 kuuluvat samaan luokkaan.
Miten APCA:n ohjetasot valitaan?
Ne perustuvat APCA:n bronze simple mode -tilaan: Lc 90 on suositeltava leipätekstille, Lc 75 on leipätekstin vähimmäisarvo, Lc 60 sopii muulle sisältötekstille, Lc 45 otsikoille ja suurelle tekstille, Lc 30 nopeasti luettavalle tekstille, kuten paikkamerkeille, ja Lc 15 tekstittömille elementeille. Myös fonttikoolla ja lihavuudella on merkitystä, joten pidä tasoja lähtökohtina, älä lopullisina arvioina.
Mikä APCA-versio on toteutettu?
Toteutus käyttää APCA-W3:n version 0.0.98 G vakioita, revision 4g, sRGB-kanavien yksinkertaista 2.4-eksponenttia, pehmeää mustan rajausta ja matalan kontrastin leikkausta. Musta teksti valkoisella antaa arvoksi noin Lc 106.0 ja valkoinen teksti mustalla noin Lc -107.9, mikä vastaa vertailutoteutusta.
Mitä värimuotoja voin syöttää?
Hex-koodit #-merkin kanssa tai ilman, CSS värinimet, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-väriavaruudet, kuten display-p3, sekä cmyk(). sRGB:n ulkopuoliset värit muunnetaan ensin sRGB:ksi, sillä molemmat kaavat on määritelty sRGB-näyttöväreille.
Miten läpinäkyviä värejä käsitellään?
Puoliksi läpinäkyvä tekstiväri sekoitetaan taustaan ennen mittausta samalla tavalla kuin selain piirtää sen. Puoliksi läpinäkyvä tausta sekoitetaan ensin valkoiseen. Tuloksissa luetellaan läpinäkymättömät tekstin ja taustan värit, joita todella verrattiin.
Onko värien järjestyksellä merkitystä?
WCAG 2:ssa sillä ei ole merkitystä, koska vaaleamman ja tummemman luminanssin suhde on sama kumminkin päin. APCA:ssa järjestyksellä on merkitystä, koska tekstiä ja taustaa painotetaan eri tavoin. Syötä tekstin väri ensimmäiseen kenttään ja taustan väri toiseen.