WCAG 1.4.3 Contrast (minim)

Criteriul de succes 1.4.3 asigură că textul poate fi citit de persoanele care percep mai puțin contrastul — vizitatori în vârstă, persoane cu vedere slabă sau cu deficiențe de vedere a culorilor și oricine se uită la telefon în soare. Este de nivelul AA, deci face parte din ceea ce preiau EN 301 549 și Actul european privind accesibilitatea (clauza 9.1.4.3); Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Raportul de contrast dintre text și fundalul său trebuie să fie de cel puțin:

• 4,5:1 pentru textul normal;
• 3:1 pentru textul mare — cel puțin 18 pt (24 px CSS) cu grosime normală sau 14 pt (aproximativ 18,66 px CSS) îngroșat.

Raportul se calculează din luminanța relativă a celor două culori și variază de la 1:1 (aceeași culoare) la 21:1 (negru pe alb). Regula acoperă și imaginile cu text, de exemplu un banner cu un slogan inclus în imagine.

Excepții:

• textul dintr-o siglă sau dintr-un nume de brand;
• textul controalelor inactive, de exemplu al unui buton dezactivat;
• textul decorativ pe care nu trebuie să îl citească nimeni și textul care face parte dintr-o fotografie cu alt conținut vizual semnificativ.

Greșeli tipice într-un magazin online

• text de substituție (placeholder) sau text de ajutor gri deschis în formulare (de exemplu #aaa pe alb are aproximativ 2,3:1);
• prețul vechi, etichetele „stoc epuizat” și textul mic de sub butonul „Adaugă în coș”;
• text alb pe un banner foto, acolo unde o parte a fotografiei este deschisă la culoare;
• o culoare de brand folosită pentru linkuri sau butoane, care arată bine pe un ecran mare, dar este sub 4,5:1;
• text care are contrast scăzut doar la hover sau focus.

Cum se verifică

Automat: verificatorul nostru măsoară contrastul fiecărui element de text vizibil (regula contrastul culorilor) și arată culorile găsite și raportul. Nu poate evalua întotdeauna textul de pe imagini sau gradienți — aceste rezultate sunt marcate pentru o verificare manuală.

Manual: pentru textul de pe fotografii, verificați partea cea mai deschisă a imaginii din spatele textului. Verificați și stările hover, focus și eroare, nu doar starea implicită. Un verificator de contrast vă dă raportul exact pentru două culori.

Cum se remediază

• Închideți la culoare textul sau deschideți fundalul până când raportul este de cel puțin 4,5:1; de obicei este suficientă o mică schimbare de luminozitate.
• Puneți textul de pe imagini pe un panou de fundal opac sau semitransparent.
• Nu folosiți textul de substituție ca singură etichetă; dacă îl păstrați, faceți-l și pe acesta lizibil.
• Corectați culoarea o singură dată, în setările temei sau în variabilele CSS, nu pagină cu pagină.

Criterii conexe

• 1.4.11 Contrast non-text — pictograme, chenarele câmpurilor și indicatori de focus (3:1).
• 1.4.1 Utilizarea culorii — culoarea nu trebuie să fie singurul mod de a arăta informații.
• 1.4.4 Redimensionarea textului — textul trebuie să rămână utilizabil la un zoom de 200 %.

Întrebări frecvente

Ce raport de contrast cere WCAG la nivelul AA?

Cel puțin 4,5:1 între text și fundalul său și cel puțin 3:1 pentru textul mare. Nivelul AAA (1.4.6) cere 7:1 și 4,5:1.

Ce se consideră text mare în WCAG?

Text de cel puțin 18 puncte (24 de pixeli CSS) cu grosime normală sau de cel puțin 14 puncte (aproximativ 18,66 pixeli CSS) îngroșat.

Se aplică 1.4.3 siglelor și butoanelor dezactivate?

Nu. Textul care face parte dintr-o siglă sau dintr-un nume de brand, textul controalelor inactive (dezactivate) și textul pur decorativ sunt exceptate.

Acoperă 1.4.3 pictogramele și chenarele câmpurilor?

Nu, 1.4.3 se referă doar la text și la imagini cu text. Pictogramele, inelele de focus și chenarele câmpurilor de formular intră sub 1.4.11 Contrast non-text, care cere 3:1.