# Verificare contrast culori Comparați aici o culoare de text cu o culoare de fundal după WCAG 2.2 sau introduceți adresa unei pagini pentru a găsi fiecare text sub contrastul minim, cu culorile măsurate și cea mai apropiată culoare care trece. ## Ce verifică acest instrument - Raportul WCAG al oricăror două culori: Calculatorul folosește formula luminanței relative din definițiile WCAG 2.2 și arată rezultatul pentru text normal, text mare și componente de interfață, la nivelurile AA și AAA. Rulează în browserul dumneavoastră. - O culoare care trece, calculată: Când o pereche nu trece, găsește cea mai apropiată culoare de text cu aceeași nuanță care atinge 4.5:1 sau 7:1, astfel încât să modificați cât mai puțin designul. - Fiecare text cu contrast scăzut de pe o pagină: Scanarea paginii rulează regula color-contrast din axe-core într-un browser Chrome real și listează fiecare element cu erori, cu culoarea textului, culoarea fundalului, dimensiunea fontului și raportul. - Grupate pe perechi de culori: Erorile sunt grupate după culoarea textului și a fundalului, pentru că o singură modificare a unei culori a temei remediază de obicei toate elementele care o folosesc. - Pragul corect pentru textul mare: Textul de cel puțin 24 de pixeli sau de 18,66 pixeli îngroșat are nevoie de 3:1 în loc de 4.5:1. Scanarea aplică fiecărui element pragul corect, pe baza dimensiunii și grosimii calculate. - Ce nu a putut măsura și de ce: Textul de peste imagini, gradienți sau elemente suprapuse este listat separat, cu motivul, ca să știți exact ce trebuie verificat vizual. ## Ce nu poate verifica - Să măsoare textul de peste fotografii, gradienți sau video. Un program nu poate ști ce parte a unei imagini se află în spatele fiecărei litere, așa că aceste texte sunt listate pentru a le verifica dumneavoastră. - Să verifice stările hover, focus sau alte stări. Scanarea vede pagina așa cum se încarcă; verificați acele culori cu calculatorul. - Să scaneze pictogramele, bordurile și câmpurile de formular de pe pagină pentru WCAG 1.4.11. Calculatorul arată rezultatul la 3:1 pentru orice pereche introduceți. - Să citească textul care face parte dintr-o imagine, cum ar fi un banner cu textul inclus în imagine. - Să testeze mai mult decât pagina pe care o introduceți. Scanarea gratuită completă testează până la cinci pagini-cheie. ## De ce contează Contrastul scăzut este cea mai frecventă eroare de accesibilitate de pe web. Analiza WebAIM din 2026 a primului milion de pagini principale a găsit text cu contrast scăzut pe 83,9% dintre ele, cu o medie de 34 de apariții pe pagină. Textul șters este greu de citit pentru persoanele cu vedere slabă sau cu deficiențe de vedere a culorilor și pentru oricine folosește telefonul în plin soare. Criteriul de succes 1.4.3 din WCAG 2.2, de nivel AA, stabilește minimul la 4.5:1 pentru textul normal și la 3:1 pentru textul mare. Este și una dintre cele mai ieftine probleme de remediat: pe majoritatea site-urilor, câteva culori ale temei provoacă aproape toate erorile, iar modificarea lor remediază toate paginile deodată. ## Cum să citiți rezultatele - Raport de contrast: De la 1:1 (aceeași culoare de două ori) la 21:1 (negru pe alb). Rapoartele sunt rotunjite în jos, așa că o pereche care arată 4.49:1 nu atinge minimul de 4.5:1. - Text normal, AA (4.5:1): Minimul pentru textul de bază, linkuri, etichete și textul butoanelor conform WCAG 1.4.3. - Text mare, AA (3:1): Pentru textul de cel puțin 24 de pixeli sau de 18,66 pixeli îngroșat. WCAG definește textul mare ca 18 puncte sau 14 puncte îngroșat. - AAA (7:1 și 4.5:1): Nivelul îmbunătățit din WCAG 1.4.6. Nu este necesar pentru conformitatea AA, dar ajută mai mulți cititori. - Pictograme, borduri și câmpuri de formular (3:1): WCAG 1.4.11 cere 3:1 față de culorile alăturate pentru părțile controalelor și ale graficelor pe care oamenii trebuie să le vadă pentru a le folosi. - Text cu erori: Fiecare element pe care scanarea l-a măsurat sub pragul său, cu selectorul, culorile, dimensiunea și raportul. Deschideți unul pentru a vedea markupul și, dacă este disponibilă, o captură de ecran. - De verificat vizual: Textul pe care axe-core nu l-a putut măsura, cu motivul, de exemplu o imagine sau un gradient în spatele lui. ## Cum remediați cele mai frecvente probleme - Text gri pe alb: #767676 este aproximativ cel mai deschis gri care atinge 4.5:1 pe alb (4.54:1). Griurile mai deschise, cum ar fi #999999 (2.84:1), sunt o cauză frecventă a erorilor din subsoluri, legende, textele substituent (placeholder) și prețuri. - Text alb pe un buton în culoarea mărcii: Dacă textul alb pe culoarea mărcii nu trece, închideți cu câteva nuanțe fundalul butonului sau folosiți text închis la culoare. Verificați și culorile pentru hover și focus, care devin adesea mai deschise. - Textul substituent din formulare: Textul substituent (placeholder) este tot text și are nevoie de 4.5:1. Și mai bine, folosiți o etichetă vizibilă deasupra câmpului, astfel încât textul substituent să nu fie singura instrucțiune. - Text peste imagini și slidere: Puneți textul pe un fundal uniform sau semitransparent ori adăugați imaginii un strat întunecat, apoi verificați cea mai deschisă parte a imaginii aflată în spatele textului. - Etichete de reducere și text mărunt: Textul din controalele dezactivate este exceptat de la 1.4.3, dar etichetele de reducere, prețurile și mențiunile legale scrise mărunt nu sunt. Acestea sunt adesea cele mai șterse texte de pe paginile unui magazin. ## Întrebări frecvente ### Ce raport de contrast cere WCAG? Pentru nivelul AA, 4.5:1 pentru textul normal și 3:1 pentru textul mare (criteriul de succes 1.4.3), precum și 3:1 pentru componentele de interfață și graficele cu semnificație (1.4.11). Nivelul AAA cere 7:1 și 4.5:1 (1.4.6). ### Ce înseamnă text mare? WCAG definește textul la scară mare ca text de cel puțin 18 puncte sau 14 puncte îngroșat. În pixeli CSS, asta înseamnă aproximativ 24px sau 18,66px îngroșat. ### Trebuie ca logourile să respecte contrastul minim? Nu. WCAG 1.4.3 exceptează logotipurile și textul care face parte dintr-un logo sau dintr-un nume de marcă, precum și textul pur decorativ și textul din controalele inactive. ### De ce listează scanarea textul de peste o imagine pentru verificare? axe-core măsoară culori uniforme. Când în spatele textului se află o imagine, un gradient sau alt element, nu poate ști ce culori se întâlnesc, așa că raportează elementul pentru a fi verificat de o persoană, în loc să ghicească. ### Am nevoie de contrast AAA? Nivelul AAA nu este necesar pentru conformitatea de nivel AA, iar W3C nu recomandă impunerea nivelului AAA pentru site-uri întregi. Atingerea raportului de 7:1 pentru textul de bază rămâne totuși o bună practică acolo unde designul permite. ### Face APCA parte din WCAG? Nu. APCA este o altă metodă de calcul al contrastului, discutată pentru WCAG 3, care este încă o versiune preliminară. Conformitatea se măsoară astăzi cu raportul WCAG 2 pe care îl calculează acest instrument. ## Surse - [W3C: Explicarea criteriului de succes 1.4.3 Contrast (Minimum) din WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Explicarea criteriului de succes 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Explicarea criteriului de succes 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Definiția luminanței relative în WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: regula color-contrast din axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)