Verificator de contrast

Funcționalitatea instrumentului Verificator de contrast

Acest instrument vă permite să introduceți o culoare pentru text și o culoare pentru fundal pentru a determina raportul lor de contrast în conformitate cu standardele WCAG 2.1 / 2.2. După introducerea datelor, aplicația vă arată ce niveluri de accesibilitate (AA și AAA) sunt admise pentru text normal, text mare și componente UI.

La pornire, instrumentul este configurat cu valorile inițiale #4f46e5 pentru text și #ffffff pentru fundal, ceea ce generează un raport de contrast de 6.29.

Datele de intrare acceptate

Pentru a efectua o verificare, instrumentul utilizează două câmpuri de introducere:

• Culoare text: O valoare de culoare.
• Culoare fundal: O valoare de culoare.

Formatele acceptate pentru ambele câmpuri sunt:

• Valori hexazecimale (de exemplu, #1a1a1a).
• Valori rgb() (de exemplu, rgb(26, 26, 26)).
• Valori hsl().

Instrumentul include, de asemenea, un buton de inversare care schimbă rapid culoarea textului cu cea de fundal. În cazul în care introduceți o valoare neconformă, instrumentul va afișa mesaje de eroare specifice:

• Dacă este introdusă o culoare de text nevalidă, se afișează mesajul: „Introduceți o culoare de text validă, cum ar fi #1a1a1a or rgb(26, 26, 26).”.
• Dacă este introdusă o culoare de fundal nevalidă, se afișează mesajul: „Introduceți o culoare de fundal validă, cum ar fi #ffffff sau rgb(255, 255, 255).”.

Rezultatele analizei și interpretarea lor

După procesarea culorilor introduse, instrumentul generează următoarele rezultate:

• Raport de contrast: Raportul calculat între culoarea textului și cea a fundalului, afișat sub forma „X:1”. Acest raport variază de la 1:1 (fără contrast) până la 21:1 (negru pe alb).
• Text normal: Indică „Admis” sau „Respins” pentru nivelurile AA și AAA.
• Text mare: Indică „Admis” sau „Respins” pentru nivelurile AA și AAA.
• Interfață și grafică: Indică „Admis” sau „Respins” în raport cu un singur prag de 3:1. Această linie nu prezintă o distincție între AA și AAA, instrumentul afișând un singur rezultat.
• Verdict: Un mesaj de sinteză care indică cel mai înalt nivel de conformitate atins:
  • „Respectă standardele AA și AAA pentru text normal.”
  • „Respectă standardul AA pentru text normal.”
  • „Respectă standardul AA doar pentru text mare.”
  • „Sub valoarea minimă AA — măriți contrastul.”

Reguli de conformitate și praguri WCAG 2.1 / 2.2

Calculul contrastului se bazează pe formula oficială WCAG 2.1 / 2.2. Pentru a obține calificativul „Admis”, combinațiile de culori trebuie să respecte următoarele praguri matematice:

• Text normal: Nivelul AA necesită un raport de cel puțin 4.5:1, în timp ce nivelul AAA necesită un raport de cel puțin 7:1.
• Text mare: Nivelul AA necesită un raport de cel puțin 3:1, iar nivelul AAA necesită un raport de cel puțin 4.5:1. Textul mare este definit ca fiind textul de la 18pt (aproximativ 24px) în sus, sau de la 14pt (aproximativ 18.5px) în sus dacă este îngroșat (bold).
• Interfață și grafică: Această categorie necesită un raport de cel puțin 3:1 și este singura secțiune care folosește un singur prag, fără a diferenția între nivelurile AA și AAA.

Destinatarii acestui instrument

Verificatorul de contrast este dezvoltat pentru a sprijini diverse categorii de profesioniști în activitatea lor:

• Designeri: Care verifică lizibilitatea textelor și a componentelor grafice create.
• Dezvoltatori: Care se asigură că produsele software și paginile web respectă standardele oficiale de accesibilitate.
• Echipe de conținut: Care validează contrastul culorilor utilizate în materialele lor informative sau promoționale.

Confidențialitate și procesarea datelor

Fiecare verificare rulează direct în browserul dumneavoastră. Nimic din ceea ce introduceți nu este încărcat pe BroBroGo.

Întrebări frecvente (FAQ)

Ce înseamnă rezultatele AA și AAA?

AA este nivelul vizat de majoritatea site-urilor: necesită un raport de cel puțin 4.5:1 pentru textul normal și 3:1 pentru textul mare. Nivelul AAA este mai strict — 7:1 pentru textul normal și 4.5:1 pentru cel mare. Raportul variază de la 1:1 (fără contrast) până la 21:1 (negru pe alb).

Ce se consideră a fi text mare?

Textul de la 18pt (aproximativ 24px) în sus, sau de la 14pt (aproximativ 18.5px) dacă este îngroșat (bold). Textul mai mare rămâne lizibil la un contrast mai scăzut, motiv pentru care trece testul AA la un raport de 3:1 și testul AAA la 4.5:1, spre deosebire de pragurile mai stricte pentru textul normal.

Ce formate de culoare pot introduce?

Introduceți o valoare hexazecimală precum #1a1a1a, o valoare rgb() precum rgb(26, 26, 26) sau o valoare hsl() — ori faceți clic pe oricare dintre mostre pentru a alege o culoare. Folosiți butonul de inversare pentru a schimba rapid culoarea textului cu cea de fundal.

Se folosește WCAG 2 sau noua metodă APCA?

Acest instrument folosește formula WCAG 2.1 / 2.2, cea la care se raportează în prezent regulile și auditurile de accesibilitate. APCA este o metodă mai nouă, bazată pe percepție, aflată încă în stadiu de proiect pentru WCAG 3 — este promițătoare, dar nu reprezintă încă un standard oficial de conformitate, motiv pentru care rezultatele de validare de aici nu o folosesc.