Verificarea contrastului
Alege o culoare pentru text și una pentru fundal, iar raportul de contrast este măsurat față de cerințele WCAG.
Raport de contrast
16,69:1
Scala merge de la 1:1 pentru două culori identice la 21:1 pentru negru pe alb.
Cum arată
Titlu cu text mare
Textul obișnuit la această mărime este cel care pune cele mai mari cerințe contrastului, pentru că literele sunt subțiri.
Cerințele WCAG
- Text obișnuit, AASub 18 puncte sau sub 14 puncte aldin · 4,5:1Trece
- Text obișnuit, AAASub 18 puncte sau sub 14 puncte aldin · 7:1Trece
- Text mare, AADe la 18 puncte sau 14 puncte aldin · 3:1Trece
- Text mare, AAADe la 18 puncte sau 14 puncte aldin · 4,5:1Trece
- Interfață și grafică, AAMargini, pictograme și tot ce poartă un sens · 3:1Trece
Cum funcționează
Raportul de contrast măsoară diferența de luminanță relativă dintre două culori. Merge de la 1:1, două culori identice, la 21:1, negru pe alb.
WCAG cere cel puțin 4,5:1 pentru textul obișnuit la nivelul AA și 7:1 la nivelul AAA. Pentru textul mare – 18 puncte sau 14 puncte aldin – ajung 3:1 și 4,5:1.
Componentele de interfață și graficele cu sens au nevoie de 3:1 față de ce le înconjoară. Asta include marginea unui câmp de introducere și pictogramele fără text alături.
Raportul se calculează din luminanță, nu din cât de diferite par culorile. Două culori cu aceeași luminozitate, dar cu nuanțe complet diferite, ca roșul (#ff0000) și verdele (#009400), dau un raport de 1,00 și sunt ilizibile, deși arată diferit.
Cerințele sunt un minim, nu o țintă. Textul aflat exact la 4,5:1 este tot greu de citit în soare sau pe un ecran ieftin.
Cum calculează instrumentul
Fiecare canal este împărțit la 255 și făcut liniar: valorile de până la 0,04045 sunt împărțite la 12,92, iar valorile mai mari v devin ((v + 0,055) / 1,055) la puterea 2,4. Luminanța relativă este 0,2126 R + 0,7152 G + 0,0722 B, iar raportul este (L1 + 0,05) / (L2 + 0,05), cu culoarea mai deschisă ca L1. Pragul 0,04045 este în WCAG din mai 2021; înainte era 0,03928, iar W3C spune că schimbarea nu are niciun efect practic. La culorile hex nu contează deloc, pentru că nicio valoare de canal nu cade între cele două: 10/255 este 0,0392, iar 11/255 este 0,0431.
Exemplu de calcul
#767676 pe alb: canalul 118/255 = 0,463 devine 0,181 după liniarizare, iar pentru că toate trei canalele sunt egale, luminanța este tot 0,181. Raportul este (1 + 0,05) / (0,181 + 0,05) = 4,54, ceea ce trece nivelul AA pentru textul obișnuit. Cu o treaptă mai deschis, #777777 dă 4,478 și nu trece. Cel mai deschis gri care trece AAA, 7:1, pe alb este #595959, cu 7,0047; următoarea treaptă, #5a5a5a, dă 6,897.
Fără rotunjire
Explicația W3C pentru criteriul de succes 1.4.3 spune că raportul nu trebuie rotunjit: 4,499:1 nu îndeplinește 4,5:1. Instrumentul judecă după valoarea nerotunjită și taie cifrele în loc să le rotunjească. #0080aa pe alb dă 4,4986 și nu trece pentru textul obișnuit. Rotunjit, ar apărea ca 4,50 lângă un rezultat negativ, așa că instrumentul arată 4,49:1, iar #777777 apare ca 4,47:1.
Text mare și fonturi subțiri
Pragul pentru textul mare este stabilit în puncte. Cu 1 pt = 1,333 pixeli CSS, 18 puncte înseamnă aproximativ 24 de pixeli, iar 14 puncte aproximativ 18,5 pixeli, potrivit aceleiași explicații. Ea avertizează și că fonturile subțiri pot fi redate mai palid decât culoarea lor din cauza netezirii marginilor (anti-aliasing), așa că un text care îndeplinește raportul poate avea totuși un contrast slab în practică. Instrumentul lucrează doar cu culori hex pline, fără transparență și fără o imagine în spate.