Verificator de contrast WCAG
Testați orice pereche de culori de prim plan și de fundal pentru raportul de contrast WCAG 2.1 (1 la 21).
Cum să verifică contrastul culorilor
1. Introdu sau alege culorile de prim-plan (text) și de fundal.
2. Citiți raportul de contrast (de exemplu, 4,52:1).
3. Verifică rândurile AA și AAA pentru dimensiunile normale și mari ale textului.
4. Reglați luminozitatea HSL până când nivelul necesar trece, apoi copiază valorile hexadecimale.
Exemple de verificare a contrastului
Corpul textului #374151 pe #FFFFFF
Raport ≈ 8,9:1 — trece AAA pentru text normal (necesită 7:1). Lectură confortabilă în formă lungă.
Gri deschis #9CA3AF pe alb
Raport ≈ 2,6:1 — nu reușește AA pentru textul normal (necesită 4,5:1). Greșeală obișnuită de substituent.
Butonul principal alb pe #2563EB
Raport ≈ 4,6:1 — trece textul normal AA; trece la un albastru mai închis pentru AAA sau numai pentru utilizare mare.
Când să folosești acest instrument
• Când auditați jetoanele sistemului de proiectare înainte de lansare.
• Când remediați constatările de accesibilitate de la Lighthouse sau axe.
• Când alege culorile link-urilor care trebuie să difere de textul corpului, nu numai prin nuanță.
Nivelurile WCAG 2.1 explicate
Nivelul A este minim; AA este ținta legală în multe jurisdicții (ADA, sectorul public EAA). AAA este aspirativ pentru copierea corporală - titlurile mari pot trece mai ușor de AAA decât subtitrările de 14 px. Indicatorii vizibili de focalizare (2.4.7) completează contrastul — utilizatorii de tastatură au nevoie de inele de focalizare vizibile, adesea 3:1 față de culorile adiacente. Documentul de trecere/eșec în sistemul tău de proiectare lângă fiecare pereche de jetoane.
Întrebări frecvente
Ce raport de contrast pentru textul normal WCAG AA?
Cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare (18 pt+ sau 14 pt bold).
Ce pentru AAA?
Text normal 7:1, text mare 4.5:1 — mai strict, adesea folosit pentru site-urile guvernamentale.
Componentele UI au nevoie de contrast?
WCAG 2.1 necesită 3:1 pentru obiectele grafice și limitele componentelor UI (1.4.11).
Cum se calculează raportul?
Pe baza luminozității relative a culorilor sRGB: (L1 + 0,05) / (L2 + 0,05) unde L1 este mai deschis.
Sublinierea remediază linkurile cu contrast scăzut?
Nu - este încă necesar contrastul. Sublinierea ajută semnele non-color, dar nu înlocuiesc regulile de raport.