Preverjanje kontrasta barv

Q: Ali preverjanje kontrasta velja tudi za besedilo kazala mesta ali onemogočeno besedilo?

Besedilo kazala mesta placeholder mora izpolnjevati isto spodnjo mejo 4,5:1, kadar prenaša informacijo. Onemogočeni kontrolniki so izvzeti iz zahtev glede kontrasta, vendar berljiva onemogočena stanja uporabnikom vseeno pomagajo.

Preverjanje kontrasta barv (WCAG)

Brezplačno preverjanje kontrasta WCAG. Vnesi barvo besedila in ozadja ter dobi kontrastno razmerje, rezultate AA/AAA in najbližjo ustrezno barvo.

Barva besedila

Barva ozadja

Kontrastno razmerje

–

Rezultati WCAG 2.2

	AA	AAA
Običajno besedilo
Veliko besedilo
Elementi vmesnika in grafika		–

Predogled

Običajno besedilo (16 px). Hiter rjav maček skoči čez lenega psa.

Veliko besedilo (24 px)

Veliko krepko besedilo (18,66 px krepko)

Gumb

Predlogi

Cilj

Najbližja ustrezna barva besedila

–

Najbližja ustrezna barva ozadja

–

Kako uporabljati preverjanje kontrasta barv

Vnesi Barva besedila in Barva ozadja. Uporabi barvne vzorce ali v polja vpiši poljubno vrednost CSS: kodo HEX, na primer #595959, rgb(89 89 89), hsl(0 0% 35%) ali ime, kot je navy.
Kontrastno razmerje se posodablja med tipkanjem, od 1:1 (brez kontrasta) do 21:1 (črno na belem).
Tabela Rezultati WCAG 2.2 prikaže Uspešno ali Neuspešno za Običajno besedilo, Veliko besedilo in Elementi vmesnika in grafika na ravneh AA in AAA.
Oglej si Predogled: prikazuje običajno besedilo, veliko besedilo, veliko krepko besedilo, obris gumba in ikono v tvojih dveh barvah.
Če raven ni dosežena, pod Predlogi izberi Cilj. Orodje predlaga Najbližja ustrezna barva besedila in Najbližja ustrezna barva ozadja. Z Uporabi uveljaviš predlog. Zamenjaj barvi zamenja besedilo in ozadje.

Vse se izračuna v tvojem brskalniku; nič se nikamor ne pošlje.

Kako se izračuna kontrastno razmerje

WCAG 2.x definira razmerje kot (L1 + 0,05) / (L2 + 0,05), kjer je L1 relativna svetlost svetlejše barve in L2 temnejše. Relativna svetlost se izračuna iz linearniziranih kanalov sRGB: vsak kanal se dekodira s prenosno krivuljo sRGB, nato je L = 0,2126 R + 0,7152 G + 0,0722 B. Zelena ima največjo težo, ker so naše oči nanjo najbolj občutljive, zato je čista zelena videti precej svetlejša od čiste modre iste »moči«.

Razmerje se nikoli ne zaokroži navzgor. #777777 na belem da približno 4,48:1 in ne izpolnjuje AA za običajno besedilo, čeprav je videti kot »4,5«. To orodje prikazano vrednost odreže na dve decimalki, tako da je tisto, kar vidiš, tisto, kar preverja WCAG.

Če je barva besedila napol prosojna (na primer rgb(0 0 0 / 60%)), se najprej zmeša z ozadjem, kot bi jo narisal brskalnik. Prosojnost barve ozadja se prezre, ker ni znano, kaj je za stranjo.

Ravni WCAG na kratko

Vsebina	AA	AAA
Običajno besedilo	4,5:1	7:1
Veliko besedilo (24 px ali 18,66 px krepko)	3:1	4,5:1
Elementi vmesnika in pomembna grafika	3:1	–

»Veliko besedilo« pomeni vsaj 18 pt (24 slikovnih pik CSS) ali 14 pt krepko (približno 18,66 px). Logotipi in zgolj okrasno besedilo nimajo zahtev. Pravilo 3:1 za elemente vmesnika (merilo uspešnosti 1.4.11) velja za obrobe vnosnih polj in gumbov, označevalnike fokusa, ikone in črte grafikonov, ki jih uporabniki potrebujejo.

Kako delujejo predlogi

Predlagane barve v prostoru OKLCH ohranijo odtenek in kromo tvoje barve ter spremenijo samo svetlost, temneje ali svetleje, dokler ni doseženo ciljno razmerje. Orodje nato izbere tisto od obeh smeri, ki je vizualno najbližja tvoji izvirni barvi, merjeno v OKLab. Rezultat se po zaokrožitvi v kodo HEX znova preveri, zato res ustreza. Če nobena svetlost ne more doseči cilja (na primer 7:1 proti srednje sivi), orodje to sporoči.

O APCA

APCA (Accessible Perceptual Contrast Algorithm) je novejši model kontrasta, obravnavan za prihodnji WCAG 3. Upošteva debelino pisave, velikost in polariteto (temno na svetlem proti svetlo na temnem). Je še osnutek in ni pravna ali normativna zahteva, zato to orodje poroča rezultate WCAG 2.x, ki ostajajo referenca za evropski standard dostopnosti EN 301 549, Section 508 in večino zakonov.

Pogosta vprašanja

Kakšno kontrastno razmerje potrebujem za besedilo?

Vsaj 4,5:1 za raven AA, ki jo zahteva večina zakonov in politik. Za dolga branja ali za slabovidno občinstvo ciljaj na 7:1 (AAA).

Ali belo besedilo na barvi moje blagovne znamke izpolnjuje zahteve?

Kot barvo besedila vnesi belo, kot barvo ozadja pa barvo blagovne znamke. Veliko srednje svetlih modrih, oranžnih in zelenih odtenkov doseže le 3:1: primerno za velike naslove in gumbe z velikimi oznakami, ne pa za majhno besedilo. Če potrebuješ AA za običajno besedilo, uporabi predlagano barvo ozadja.

Zakaj vrstni red barv ne spremeni razmerja?

Formula vedno deli svetlost svetlejše barve s svetlostjo temnejše, zato temno na svetlem in svetlo na temnem dasta enako razmerje. Zaznani kontrast se lahko vseeno nekoliko razlikuje, kar je ena od težav, ki jih skuša rešiti APCA.

Ali je 4,49:1 dovolj blizu, da je uspešno?

Ne. Pragovi WCAG so stroge spodnje meje: 4,49:1 ne izpolnjuje AA za običajno besedilo. Uporabi predlog, da dobiš barvo, ki res ustreza.

Ali preverjanje kontrasta velja tudi za besedilo kazala mesta ali onemogočeno besedilo?

Besedilo kazala mesta (placeholder) mora izpolnjevati isto spodnjo mejo 4,5:1, kadar prenaša informacijo. Onemogočeni kontrolniki so izvzeti iz zahtev glede kontrasta, vendar berljiva onemogočena stanja uporabnikom vseeno pomagajo.