AcasăInstrumente de DesignVerificator de Contrast

Verificator de Contrast

Verificatorul de contrast calculează raportul de contrast WCAG 2.1 dintre culoarea textului și culoarea fundalului și îți arată dacă perechea trece nivelurile AA și AAA pentru text normal și mare.

The quick brown fox
Small text sample — 14px regular weight

Despre acest instrument

Verificatorul de contrast calculează raportul de contrast WCAG 2.1 dintre culoarea textului și culoarea fundalului și îți arată dacă perechea trece nivelurile AA și AAA pentru text normal și mare.

Cum se folosește

  1. Introdu sau alege culoarea textului.
  2. Introdu sau alege culoarea fundalului (funcționează valorile hex, inclusiv forma scurtă de 3 cifre).
  3. Citește raportul de contrast și rezultatele AA/AAA pentru text normal și mare.
  4. Ajustează oricare dintre culori până când nivelul de care ai nevoie trece.

Bine de știut

  • WCAG 2.1 AA cere un raport de contrast de cel puțin 4.5:1 pentru text normal și 3:1 pentru text mare.
  • WCAG 2.1 AAA cere cel puțin 7:1 pentru text normal și 4.5:1 pentru text mare.
  • Text mare înseamnă cel puțin 18 pt (24 px) normal sau 14 pt (aproximativ 18.66 px) bold.
  • Rapoartele de contrast variază de la 1:1 (culori identice) la 21:1 (negru pe alb).
  • Raportul este calculat din luminanța relativă a fiecărei culori, conform formulei WCAG.

Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.

Întrebări frecvente

Ce raport de contrast este necesar pentru accesibilitate?

Pentru WCAG 2.1 nivel AA, textul normal are nevoie de cel puțin 4.5:1, iar textul mare de cel puțin 3:1. Nivelul AAA ridică pragurile la 7:1 și 4.5:1.

Textul alb pe verde este accesibil?

Depinde de nuanță. Multe verdețuri aprinse nu trec AA cu text alb; verdele mai închis trece de obicei. Introdu valorile hex exacte pentru a verifica.

Ce se consideră text mare în WCAG?

Textul de cel puțin 18 puncte (24 px) la grosime normală sau de cel puțin 14 puncte (aproximativ 18.66 px) bold.

Contrastul WCAG se aplică și butoanelor și pictogramelor?

Criteriul de succes WCAG 2.1 1.4.11 cere un contrast de cel puțin 3:1 pentru componentele de interfață și elementele grafice cu semnificație, față de ce le înconjoară.