Provjera kontrasta

Kako koristiti provjeru kontrasta

1. Unesi Boja teksta i Boja pozadine. Koristi uzorke boja ili upiši bilo koju CSS vrijednost u polja: HEX kôd poput #595959, rgb(89 89 89), hsl(0 0% 35%) ili naziv poput navy.
2. Omjer kontrasta se ažurira dok upisuješ, od 1:1 (bez kontrasta) do 21:1 (crno na bijelom).
3. Tabela WCAG 2.2 rezultati prikazuje Prolazi ili Ne prolazi za Običan tekst, Veliki tekst i Elementi sučelja i grafika, na nivoima AA i AAA.
4. Pogledaj Pregled: prikazuje običan tekst, veliki tekst, veliki podebljani tekst, okvir dugmeta i ikonu u tvoje dvije boje.
5. Ako neki nivo ne prolazi, odaberi Cilj u dijelu Prijedlozi. Alat predlaže Najbliža boja teksta koja prolazi i Najbliža boja pozadine koja prolazi. Klikni Primijeni da primijeniš jednu. Zamijeni boje razmjenjuje tekst i pozadinu.

Sve se računa u tvom pregledniku; ništa se nigdje ne šalje.

Kako se računa omjer kontrasta

WCAG 2.x definiše omjer kao (L1 + 0,05) / (L2 + 0,05), gdje je L1 relativna luminancija svjetlije boje, a L2 tamnije. Relativna luminancija se računa iz linearizovanih sRGB kanala: svaki kanal se dekodira sRGB prijenosnom krivuljom, a zatim L = 0,2126 R + 0,7152 G + 0,0722 B. Zelena ima najveću težinu jer je naše oko za nju najosjetljivije, zbog čega čista zelena izgleda mnogo svjetlije od čiste plave iste „jačine“.

Omjer se nikad ne zaokružuje naviše. #777777 na bijeloj daje oko 4,48:1 i ne prolazi AA za običan tekst, iako izgleda kao „4,5“. Ovaj alat prikazanu vrijednost skraćuje na dvije decimale, pa je ono što vidiš upravo ono što WCAG provjerava.

Ako je boja teksta poluprozirna (na primjer rgb(0 0 0 / 60%)), prvo se miješa s pozadinom, kako bi je nacrtao preglednik. Prozirnost boje pozadine se zanemaruje jer nije poznato šta se nalazi iza stranice.

WCAG nivoi ukratko

„Veliki tekst“ znači najmanje 18 pt (24 CSS piksela) ili 14 pt podebljano (oko 18,66 px). Logotipi i čisto ukrasni tekst nemaju zahtjeva. Pravilo 3:1 za elemente sučelja (kriterij uspjeha 1.4.11) odnosi se na okvire polja i dugmadi, pokazivače fokusa, ikone i linije grafikona koje korisnici moraju vidjeti.

Kako funkcionišu prijedlozi

Predložene boje zadržavaju ton i hromu tvoje boje u OKLCH prostoru, a mijenjaju samo svjetlinu, tamnije ili svjetlije, dok se ne dostigne ciljni omjer. Alat zatim bira onaj od dva smjera koji je vizuelno bliži tvojoj originalnoj boji, mjereno u OKLabu. Rezultat se ponovo provjerava nakon zaokruživanja na HEX kôd, pa zaista prolazi. Ako nijedna svjetlina ne može dostići cilj (na primjer 7:1 prema srednje sivoj), alat to kaže.

O APCA

APCA (Accessible Perceptual Contrast Algorithm) je noviji model kontrasta koji se razmatra za budući WCAG 3. Uzima u obzir debljinu i veličinu slova te polaritet (tamno na svijetlom naspram svijetlog na tamnom). Još je u nacrtu i nije pravni ni normativni zahtjev, pa ovaj alat prikazuje WCAG 2.x rezultate, koji ostaju referenca za evropski standard pristupačnosti EN 301 549, Section 508 i većinu zakona.