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). Consultă promovarea/eșecul pentru nivelul AA și AAA, pentru text normal, text mare (18 pt+ sau 14 pt aldine) și componentele UI. Esențial înainte de expedierea butoanelor, linkurilor și etichetelor de formulare - multe palete de mărci eșuează până când întuneci textul sau luminezi suprafețele.
Culoarea textului
Culoarea de fundal
Aa Bb Cc — 123
Rezultat
16.12 : 1
AA — Trecut
AA (text mare) — Trecut
AAA — Trecut
AAA (text mare) — Trecut
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ță.
Când să alegi altceva
• Când ai nevoie de audit de pagină completă - folosești scanere automate pe DOM redat.
• Când testați fundaluri nesolide (imagini, gradienți) - eșantionați pixelii din cel mai rău caz.
• Când simulați daltonismul - folosești simulatoare de vedere specializate.
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.
Remedierea defecțiunilor fără rebranding
Dacă violetul mărcii eșuează pe alb, nu schimbi nuanța - întunecați prim-planul în pași de luminozitate de 5-10% sau folosești violet numai pentru titluri mari. Textul substituent trebuie să respecte contrastul (4,5:1), nu doar valorile de intrare. Statele cu dezactivare pot fi scutite de contrastul strict al textului, dar nu ar trebui să transmită informații critice numai prin culoare. Asociază acest verificator cu convertorul de culoare pentru o iterație HSL rapidă.
Î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.
Datele mele sunt trimise către un server?
Nu.
Este gratuit acest instrument?
Da.