Kontrastintarkistin

Näin käytät kontrastintarkistinta

1. Anna Tekstin väri ja Taustaväri. Käytä värinäytteitä tai kirjoita mikä tahansa CSS-arvo kenttiin: HEX-koodi, kuten #595959, rgb(89 89 89), hsl(0 0% 35%) tai nimi, kuten navy.
2. Kontrastisuhde päivittyy kirjoittaessasi, välillä 1:1 (ei kontrastia) – 21:1 (musta valkoisella).
3. WCAG 2.2 -tulokset -taulukko näyttää Hyväksytty tai Hylätty kohdille Normaali teksti, Suuri teksti sekä Käyttöliittymän osat ja grafiikka tasoilla AA ja AAA.
4. Tarkista Esikatselu: se näyttää normaalin tekstin, suuren tekstin, suuren lihavoidun tekstin, painikkeen ääriviivan ja kuvakkeen kahdella värilläsi.
5. Jos jokin taso hylätään, valitse Tavoite kohdasta Ehdotukset. Työkalu ehdottaa kohdat Lähin hyväksytty tekstin väri ja Lähin hyväksytty taustaväri. Napsauta Käytä ottaaksesi toisen käyttöön. Vaihda värit vaihtaa tekstin ja taustan keskenään.

Kaikki lasketaan selaimessasi. Mitään kirjoittamaasi ei lähetetä minnekään.

Näin kontrastisuhde lasketaan

WCAG 2.x määrittelee suhteen kaavalla (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleamman värin suhteellinen luminanssi ja L2 tummemman. Suhteellinen luminanssi lasketaan linearisoiduista sRGB-kanavista: jokainen kanava dekoodataan sRGB:n siirtokäyrällä ja sitten L = 0,2126 R + 0,7152 G + 0,0722 B. Vihreä painaa eniten, koska silmämme ovat siihen herkimmät, minkä vuoksi puhdas vihreä näyttää paljon kirkkaammalta kuin yhtä ”voimakas” puhdas sininen.

Suhdetta ei koskaan pyöristetä ylöspäin. #777777 valkoisella antaa noin 4,48:1 ja jää AA-tason alle normaalilla tekstillä, vaikka se näyttää ”4,5:ltä”. Tämä työkalu katkaisee näytettävän arvon kahteen desimaaliin, jotta se, minkä näet, on sama, minkä WCAG tarkistaa.

Jos tekstin väri on osittain läpinäkyvä (esimerkiksi rgb(0 0 0 / 60%)), se sekoitetaan ensin taustaan, kuten selain sen piirtäisi. Taustavärin läpinäkyvyys jätetään huomiotta, koska sivun takana olevaa ei tiedetä.

WCAG-tasot lyhyesti

”Suuri teksti” tarkoittaa vähintään 18 pisteen (24 CSS-pikselin) tekstiä tai 14 pisteen lihavoitua tekstiä (noin 18,66 px). Logoille ja pelkästään koristeelliselle tekstille ei ole vaatimusta. Käyttöliittymän osien 3:1-sääntö (onnistumiskriteeri 1.4.11) koskee syöttökenttien ja painikkeiden reunoja, kohdistusosoittimia, kuvakkeita ja kaaviolinjoja, jotka käyttäjien täytyy nähdä.

Näin ehdotukset toimivat

Ehdotetut värit säilyttävät värisi sävyn ja kroman OKLCH-avaruudessa ja muuttavat vain sen vaaleutta, tummemmaksi tai vaaleammaksi, kunnes tavoitesuhde saavutetaan. Työkalu valitsee sitten kahdesta suunnasta sen, joka on visuaalisesti lähimpänä alkuperäistä väriäsi OKLabilla mitattuna. Tulos tarkistetaan uudelleen HEX-koodiksi pyöristämisen jälkeen, joten se todella läpäisee tarkistuksen. Jos mikään vaaleus ei yllä tavoitteeseen (esimerkiksi 7:1 keskiharmaata vasten), työkalu kertoo sen.

APCA:sta

APCA (Accessible Perceptual Contrast Algorithm) on uudempi kontrastimalli, jota harkitaan tulevaan WCAG 3:een. Se ottaa huomioon kirjasinpaksuuden, koon ja polariteetin (tumma vaalealla vs. vaalea tummalla). Se on vielä luonnos eikä laillinen tai normatiivinen vaatimus, joten tämä työkalu raportoi WCAG 2.x -tulokset, jotka ovat edelleen eurooppalaisen saavutettavuusstandardin EN 301 549:n, Section 508:n ja useimpien lakien viitekehys.