Provjera kontrasta – WCAG AA i AAA omjer kontrasta boja

Q: Radi li provjera kontrasta za tekst rezerviranog mjesta ili onemogućeni tekst?

Tekst rezerviranog mjesta placeholder mora zadovoljiti isti minimum od 4,5:1 kad prenosi informaciju. Onemogućene kontrole izuzete su od zahtjeva za kontrast, ali čitljiva onemogućena stanja ipak pomažu korisnicima.

Provjera kontrasta boja

Besplatna WCAG provjera kontrasta. Upiši boju teksta i pozadine i dobit ćeš omjer kontrasta, rezultate AA/AAA i najbližu boju koja prolazi.

Boja teksta

Boja pozadine

Omjer kontrasta

–

Rezultati prema WCAG-u 2.2

	AA	AAA
Običan tekst
Veliki tekst
Komponente sučelja i grafike		–

Pregled

Običan tekst (16 px). Gojazni dječak ždere šaku čvrstih jabuka.

Veliki tekst (24 px)

Veliki podebljani tekst (18,66 px podebljano)

Gumb

Prijedlozi

Cilj

Najbliža boja teksta koja prolazi

–

Najbliža boja pozadine koja prolazi

–

Kako koristiti provjeru kontrasta

Unesi Boju teksta i Boju pozadine. Koristi uzorke boja ili upiši bilo koju CSS vrijednost u polja: HEX kod poput #595959, rgb(89 89 89), hsl(0 0% 35%) ili naziv poput navy.
Omjer kontrasta ažurira se dok tipkaš, od 1:1 (bez kontrasta) do 21:1 (crno na bijelom).
Tablica Rezultati prema WCAG-u 2.2 prikazuje Prolazi ili Ne prolazi za Običan tekst, Veliki tekst i Komponente sučelja i grafike, na razinama AA i AAA.
Pogledaj Pregled: prikazuje običan tekst, veliki tekst, veliki podebljani tekst, obrub gumba i ikonu u tvoje dvije boje.
Ako neka razina ne prolazi, odaberi Cilj pod Prijedlozi. Alat predlaže Najbližu boju teksta koja prolazi i Najbližu boju pozadine koja prolazi. Klikni Primijeni da primijeniš jednu od njih. Zamijeni boje mijenja mjesta tekstu i pozadini.

Sve se izračunava u tvom pregledniku; ništa se ne šalje na poslužitelj.

Kako se računa omjer kontrasta

WCAG 2.x definira omjer kao (L1 + 0,05) / (L2 + 0,05), gdje je L1 relativna luminancija svjetlije boje, a L2 tamnije. Relativna luminancija računa se iz linearnih sRGB kanala: svaki se kanal dekodira sRGB prijenosnom krivuljom, zatim L = 0,2126 R + 0,7152 G + 0,0722 B. Zelena najviše pridonosi jer su naše oči na nju najosjetljivije, zbog čega čista zelena izgleda znatno 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š ono što WCAG provjerava.

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

Razine WCAG-a ukratko

Sadržaj	AA	AAA
Običan tekst	4,5:1	7:1
Veliki tekst (24 px ili 18,66 px podebljano)	3:1	4,5:1
Komponente sučelja i značajne grafike	3:1	–

„Veliki tekst“ znači najmanje 18 pt (24 CSS piksela) ili 14 pt podebljano (oko 18,66 px). Logotipovi i čisto dekorativni tekst nemaju zahtjeva. Pravilo 3:1 za komponente sučelja (kriterij uspjeha 1.4.11) odnosi se na obrube polja za unos i gumba, pokazatelje fokusa, ikone i linije grafikona koje korisnici moraju vidjeti.

Kako rade prijedlozi

Predložene boje zadržavaju ton i kromu tvoje boje u prostoru OKLCH i mijenjaju samo svjetlinu, tamnije ili svjetlije, dok se ne postigne ciljni omjer. Alat zatim bira onaj od dva smjera koji je vizualno najbliži tvojoj izvornoj boji, mjereno u OKLabu. Rezultat se ponovno provjerava nakon zaokruživanja na HEX kod, pa doista prolazi. Ako nijedna svjetlina ne može postići cilj (na primjer 7:1 prema srednje sivoj), alat to kaže.

O APCA-i

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

Česta pitanja

Koliki omjer kontrasta trebam za osnovni tekst?

Najmanje 4,5:1 za razinu AA, što je razina koju zahtijeva većina zakona i pravilnika. Za dulje čitanje ili publiku slabijeg vida ciljaj na 7:1 (AAA).

Prolazi li bijeli tekst na boji mog brenda?

Upiši bijelu kao boju teksta, a boju svog brenda kao boju pozadine. Mnoge srednje tamne plave, narančaste i zelene dosežu samo 3:1: u redu za velike naslove i gumbe s velikim oznakama, ali ne za sitan tekst. Ako ti treba AA za običan tekst, upotrijebi predloženu boju pozadine.

Zašto redoslijed boja ne mijenja omjer?

Formula uvijek dijeli svjetliju luminanciju tamnijom, pa tamno na svijetlom i svijetlo na tamnom daju isti omjer. Opaženi kontrast ipak se može malo razlikovati, što je jedan od problema koje APCA pokušava riješiti.

Je li 4,49:1 dovoljno blizu da prođe?

Nije. WCAG pragovi su stroge najniže vrijednosti: 4,49:1 ne prolazi AA za običan tekst. Upotrijebi prijedlog da dobiješ boju koja stvarno prolazi.

Radi li provjera kontrasta za tekst rezerviranog mjesta ili onemogućeni tekst?

Tekst rezerviranog mjesta (placeholder) mora zadovoljiti isti minimum od 4,5:1 kad prenosi informaciju. Onemogućene kontrole izuzete su od zahtjeva za kontrast, ali čitljiva onemogućena stanja ipak pomažu korisnicima.