Preverjevalnik barvnega kontrasta
Preverite kontrast med barvo besedila in barvo ozadja glede na WCAG 2 in APCA. Preverjevalnik izračuna razmerje kontrasta WCAG 2 iz relativne svetilnosti, poroča, ali običajno in veliko besedilo ter UI izpolnjujejo ravni AA in AAA, ter doda vrednost kontrasta svetlosti APCA z razlago, za kaj je ta vrednost uporabna. Namenjen je oblikovalcem in razvijalcem, ki ustvarjajo dostopne vmesnike.
Pogosta vprašanja
Kaj pomenijo ravni WCAG?
Raven AA zahteva 4.5:1 za običajno besedilo in 3:1 za veliko besedilo (kriterij uspešnosti 1.4.3); raven AAA zahteva 7:1 in 4.5:1 (1.4.6). Komponente uporabniškega vmesnika in pomembne grafike morajo imeti kontrast 3:1 glede na sosednje barve (1.4.11). Preverjevalnik za vsakega od teh petih pragov sporoči, ali je izpolnjen.
Kaj šteje za veliko besedilo?
WCAG opredeljuje veliko besedilo kot najmanj 18 pik običajne debeline, kar je približno 24 CSS slikovnih pik, ali najmanj 14 pik krepke debeline, kar je približno 18,66 CSS slikovnih pik. Vse manjše besedilo je običajno besedilo in potrebuje višje razmerje.
Zakaj razmerje 4.499:1 ne dosega ravni AA?
Pragovi WCAG so natančni, zato razmerje, ki bi se zaokrožilo na 4,5, vendar je manjše od te vrednosti, ne zadostuje. Preverjevalnik primerja nezaokroženo razmerje in ga prikaže, odrezanega na dve decimalni mesti, zato prikazana številka nikoli ni videti boljša od dejanske.
Kaj je APCA?
Algoritem za dostopni zaznavni kontrast (Accessible Perceptual Contrast Algorithm) je metoda za izračun kontrasta, razvita za osnutke WCAG 3. Modelira zaznavni kontrast svetlosti, besedilo in ozadje obravnava različno ter vrne vrednost kontrasta svetlosti Lc od približno -108 do 106. Za zdaj še ni del nobenega objavljenega standarda WCAG, zato za skladnost uporabite rezultate WCAG 2, APCA pa kot dodatno preverjanje.
Zakaj je vrednost APCA včasih negativna?
APCA upošteva polarnost: pozitivne vrednosti pomenijo temno besedilo na svetlem ozadju, negativne pa svetlo besedilo na temnem ozadju. Priporočila uporabljajo absolutno vrednost, zato Lc -75 in Lc 75 spadata v isto kategorijo.
Kako so določene kategorije priporočil APCA?
Temeljijo na preprostem načinu APCA bronze: Lc 90 je priporočena vrednost za glavno besedilo, Lc 75 je najnižja vrednost za glavno besedilo, Lc 60 za drugo vsebinsko besedilo, Lc 45 za naslove in veliko besedilo, Lc 30 za besedilo, ki je berljivo le ob neposrednem pogledu, na primer nadomestno besedilo, in Lc 15 za elemente, ki niso besedilo. Velikost in debelina pisave sta še vedno pomembni, zato priporočila razumite kot izhodišča, ne kot dokončno oceno.
Katera različica APCA je uporabljena?
Uporabljene so konstante APCA-W3 različice 0.0.98 G, revizija 4g, s preprostim eksponentom 2,4 za kanale sRGB, mehko omejitvijo črne in obrezovanjem nizkega kontrasta. Črno besedilo na beli podlagi da približno Lc 106.0, belo besedilo na črni pa približno Lc -107.9, kar se ujema z referenčno implementacijo.
Katere barvne zapise lahko vnesem?
Šestnajstiške kode z znakom # ali brez njega, CSS barvna imena, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), barvni prostori color(), kot je display-p3, in cmyk(). Barve zunaj sRGB se najprej preslikajo v sRGB, saj sta obe formuli določeni za barve na zaslonu v sRGB.
Kako se obravnavajo prosojne barve?
Polprosojna barva besedila se pred merjenjem zlije z ozadjem, tako kot jo prikaže brskalnik. Polprosojno ozadje se najprej zlije z belo. Rezultat prikaže neprosojni barvi besedila in ozadja, ki sta bili dejansko primerjani.
Ali je vrstni red obeh barv pomemben?
Pri WCAG 2 ni, saj je razmerje med svetlejšo in temnejšo svetilnostjo enako v obeh primerih. Pri APCA pa je pomemben, ker sta besedilo in ozadje različno ovrednotena, zato v prvo polje vnesite barvo besedila, v drugo pa barvo ozadja.