Provera kontrasta boja

Kako se koristi provera kontrasta

1. Unesi Boja teksta i Boja pozadine. Koristi uzorke boja ili upiši bilo koju CSS vrednost u polja: HEX kod poput #595959, rgb(89 89 89), hsl(0 0% 35%) ili naziv poput navy.
2. Odnos kontrasta se ažurira dok kucaš, od 1:1 (nema kontrasta) do 21:1 (crno na belom).
3. Tabela WCAG 2.2 rezultati prikazuje Prolazi ili Ne prolazi za Običan tekst, Veliki tekst i Elementi interfejsa i grafika, na nivoima AA i AAA.
4. Pogledaj Pregled: prikazuje običan tekst, veliki tekst, veliki podebljani tekst, obris dugmeta i ikonu u tvoje dve boje.
5. Ako neki nivo ne prolazi, izaberi Cilj u odeljku Predlozi. Alat predlaže Najbliža boja teksta koja prolazi i Najbliža boja pozadine koja prolazi. Klikni Upotrebi da primeniš jednu od njih. Zameni boje menja mesta tekstu i pozadini.

Sve se računa u tvom pregledaču. Ništa što upišeš ne šalje se na server.

Kako se računa odnos kontrasta

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

Odnos se nikada ne zaokružuje naviše. #777777 na belom daje oko 4,48:1 i ne prolazi AA za običan tekst, iako izgleda kao „4,5“. Ovaj alat prikazanu vrednost skraćuje na dve decimale, pa je ono što vidiš upravo ono što WCAG proverava.

Ako je boja teksta delimično providna (na primer rgb(0 0 0 / 60%)), prvo se meša sa pozadinom, kao što bi je iscrtao pregledač. Providnost boje pozadine se ignoriše, jer se ne zna š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 dekorativni tekst nemaju zahtev. Pravilo 3:1 za elemente interfejsa (kriterijum uspeha 1.4.11) odnosi se na ivice polja za unos i dugmadi, indikatore fokusa, ikone i linije grafikona koje korisnici moraju da vide.

Kako rade predlozi

Predložene boje zadržavaju ton i hromu tvoje boje u prostoru OKLCH i menjaju samo svetlinu, tamnije ili svetlije, dok se ne dostigne ciljni odnos. Alat zatim bira onaj od dva smera koji je vizuelno bliži tvojoj originalnoj boji, mereno u OKLab-u. Rezultat se proverava ponovo posle zaokruživanja na HEX kod, pa zaista prolazi. Ako nijedna svetlina ne može da dostigne cilj (na primer 7:1 naspram srednje sive), 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 fonta, veličinu i polaritet (tamno na svetlom naspram svetlo na tamnom). Još je nacrt i nije pravni ni normativni zahtev, 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.