Verificator de contrast WCAG
Alege culoarea textului și pe a fundalului: vezi raportul de contrast, pragurile WCAG pe care le trece și, dacă nu le trece, cea mai apropiată culoare care o face.
Culori
| Text normal, AA (minim 4,5:1) | — |
|---|---|
| Text normal, AAA (minim 7:1) | — |
| Text mare, AA (minim 3:1) | — |
| Text mare, AAA (minim 4,5:1) | — |
| Componente și grafice, AA (minim 3:1) | — |
Previzualizare
Text mare: 24 px, adică 18 puncte
Text mare și aldin: 18,67 px, adică 14 puncte
Text obișnuit de 16 px, cum e de regulă textul unui paragraf. Așa arată culorile alese una lângă alta.
Buton cu contur
O culoare de text care trece
Cum se calculează
Exact cum definește WCAG 2.2: pentru fiecare culoare se calculează luminanța relativă, din canalele sRGB (L = 0,2126 R + 0,7152 G + 0,0722 B, după liniarizarea fiecărui canal), apoi raportul de contrast (L1 + 0,05) / (L2 + 0,05), cu L1 culoarea mai deschisă. Raportul merge de la 1:1 (aceeași culoare) la 21:1 (negru pe alb).
Raportul e afișat tăiat la două zecimale, nu rotunjit: 4,499 apare ca 4,49 și nu trece pragul de 4,5. Culorile se pot scrie în aceleași forme ca în convertorul de culori: #767676, rgb(), hsl(), hwb(), oklch() sau un nume.
Pragurile
AA (criteriul 1.4.3): textul are nevoie de cel puțin 4,5:1, iar textul mare de 3:1. AAA (criteriul 1.4.6): 7:1, respectiv 4,5:1 pentru textul mare. Ambele criterii scutesc textul dintr-un logo și textul pur decorativ. Textul mare înseamnă, în WCAG, cel puțin 18 puncte sau 14 puncte aldin, adică 24 px, respectiv aproximativ 18,67 px în CSS (un punct e 1/72 dintr-un inch, un pixel CSS 1/96).
Componente și grafice (criteriul 1.4.11): conturul unui câmp, al unui buton sau o iconiță necesară pentru înțelegere au nevoie de 3:1 față de culorile de lângă ele.
Culoarea care trece
Când pragul nu e atins, unealta caută culoarea de text cea mai apropiată de cea aleasă care îl atinge: același ton în OKLCH, doar mai deschisă sau mai închisă, cât de puțin e nevoie (croma scade numai cât să încapă culoarea în sRGB). Folosește o pune în locul textului.
O culoare cu transparență e amestecată canal cu canal cu ce e sub ea: fundalul peste alb (WCAG presupune alb când fundalul nu e dat), textul peste fundal.
Întrebări frecvente
De ce #767676 pe alb trece, iar #777777 nu?
#767676 pe alb dă 4,54:1, peste pragul de 4,5:1; #777777 dă 4,47:1, sub prag. O diferență de o treaptă pe fiecare canal ajunge să schimbe rezultatul.
E valabil și pentru tema întunecată?
Da: raportul nu depinde de care culoare e textul și care fundalul. Verifică perechile pentru fiecare temă în parte, fiindcă se schimbă amândouă culorile.