Fără încărcare, 100% local, fără cont

Verificator de contrast WCAG

Introduceți sau alegeți două culori și vedeți instant raportul de contrast WCAG, cu insigne de reușită AA/AAA pentru text normal și mare.

Cum funcționează Verificator de contrast

Acest instrument calculează raportul de contrast WCAG dintre două culori și arată dacă perechea atinge nivelul AA sau AAA pentru text normal, text mare și componente de interfață non-text. Totul se calculează local, în browser; culorile introduse nu sunt niciodată încărcate.

Scris de Bastien Sulyan

Cum se folosește Verificator de contrast, pas cu pas

  1. Introduceți sau alegeți culoarea de prim-plan (text).
  2. Introduceți sau alegeți culoarea de fundal.
  3. Citiți raportul de contrast și insignele AA/AAA pentru text normal, text mare și componente de interfață care nu sunt text.
  4. Folosiți Inversează culorile pentru a verifica perechea în sens invers.

Cazuri de utilizare frecvente

  • Verificarea culorii principale a unui brand față de alb sau negru, înainte de a lansa o componentă de buton.
  • Verificarea dacă un text de corp în gri estompat trece încă de pragul AA pe un fundal deschis de card.
  • Confirmarea faptului că o culoare de link dintr-un paragraf atinge pragul de 4,5:1 pentru text normal.
  • Testarea dacă un titlu mare, cu grosime mai mică, trece încă de pragul mai permisiv de 3:1 pentru text mare.

Întrebări frecvente

Trimite acest instrument culorile mele către un server?

Nu, calculul are loc integral în browser, prin JavaScript; nimic din ce introduci nu este încărcat.

Ce raport de contrast am nevoie pentru AA sau AAA?

WCAG 2.x impune 4,5:1 pentru AA la text normal, 7:1 pentru AAA la text normal, 3:1 pentru AA la text mare și 4,5:1 pentru AAA la text mare.

Ce se consideră text mare?

Cel puțin 24px (18pt) cu grosime normală, sau aproximativ 18,7px (14pt) îngroșat; orice text mai mic folosește pragurile pentru text normal.

De ce inversarea culorii de prim-plan cu cea de fundal nu schimbă raportul?

Formula raportului este simetrică: compară doar luminanța mai deschisă și pe cea mai închisă, nu care culoare este folosită pentru text. Inversarea rămâne totuși utilă, pentru că vă arată dacă perechea funcționează și cu rolurile inversate, de exemplu text închis pe un chip deschis, față de text deschis pe un chip închis.

Trecerea pragului AA garantează că designul meu este accesibil?

Nu. Contrastul este doar unul dintre multele criterii de succes WCAG. Alegerea culorilor pentru persoanele cu deficiențe de vedere a culorilor, vizibilitatea focusului, redimensionarea textului și navigarea cu tastatura sunt verificări separate; simulatorul de daltonism de pe acest site acoperă una dintre ele.

Este acesta un instrument oficial W3C sau WebAIM?

Nu. Implementează independent formula publică de contrast WCAG 2.x și nu este afiliat cu W3C sau cu orice altă organizație de accesibilitate.

Instrumente conexe

Păstrează totul local, explorează instrumente complementare.

Toate instrumentele pentru dezvoltatori