Contrastul culorilor și accesibilitatea: rapoarte WCAG și soluții

Textul gri deschis pe fundal alb arată curat într-un fișier de design. Pe un telefon, în plin soare, sau pentru cineva cu vedere slabă, e greu de citit. Este și cea mai frecventă eroare de accesibilitate care există: WebAIM Million 2026 (se deschide într-o filă nouă) a găsit text cu contrast scăzut pe 83,9% din primele un milion de pagini principale, cu o medie de 34 de cazuri distincte pe pagină.

Vestea bună este că se poate măsura contrastul, pragurile sunt clare, iar corecturile sunt în general ieftine. Acest ghid vă dă cifrele, instrumentele gratuite și o metodă de a corecta culorile de brand fără să o luați de la capăt.

Ce este raportul de contrast al culorilor?

Raportul de contrast este un număr care compară luminozitatea relativă, sau luminanța, a două culori, de obicei textul și fundalul lui. WCAG îl calculează cu o formulă fixă, iar rezultatul merge de la 1:1 (nicio diferență, alb pe alb) la 21:1 (negru pe alb). Cu cât numărul e mai mare, cu atât cele două culori se deosebesc mai ușor.

Formula este (L1 + 0,05) / (L2 + 0,05), unde L1 este luminanța relativă a culorii mai deschise, iar L2 a celei mai închise. Nu va trebui niciodată să o calculați de mână, dar un detaliu contează: se ia în calcul doar luminanța, nu nuanța. De aceea un text roșu pe fundal verde poate arăta viu și totuși să aibă un scor slab.

Celălalt detaliu care scapă multora este rotunjirea. Documentul W3C de explicare a criteriului 1.4.3 (se deschide într-o filă nouă) spune că valorile calculate „nu ar trebui rotunjite (de exemplu, 4,499:1 nu ar atinge pragul de 4,5:1)”. Așadar, griul #767676 pe alb (4,54:1) trece, în timp ce #777777 pe alb (4,48:1) pică, deși nimeni nu le-ar putea deosebi cu ochiul liber.

Ce raport de contrast cere WCAG?

Pentru nivelul AA, la care trimit majoritatea legilor și contractelor, textul normal are nevoie de cel puțin 4,5:1 față de fundal, iar textul mare de 3:1 (criteriul de succes 1.4.3). Componentele de interfață și elementele grafice cu semnificație au nevoie de 3:1 față de culorile alăturate (1.4.11). Nivelul AAA, mai strict, cere 7:1 pentru textul normal și 4,5:1 pentru textul mare (1.4.6).

De ce 4,5:1? W3C explică faptul că pragul „compensează pierderea sensibilității la contrast pe care o resimt de obicei utilizatorii cu o pierdere de vedere echivalentă cu o acuitate vizuală de aproximativ 20/40” (circa 0,5 în notația zecimală). Altfel spus, este gândit pentru persoane cu vederea moderat scăzută, printre care mulți clienți mai în vârstă care nu s-ar considera niciodată persoane cu dizabilități.

Unele texte sunt exceptate: logourile și numele de marcă, textul pur decorativ, textul pe care nu îl vede nimeni, textul dintr-o imagine care are alt conținut vizual important și textul din controalele inactive (dezactivate). Logoul poate rămâne cum este. Un paragraf scris în culoarea palidă a logoului, nu.

Ce înseamnă text mare?

În WCAG, text mare înseamnă cel puțin 18 puncte sau cel puțin 14 puncte dacă este îngroșat. W3C le echivalează cu aproximativ 24 de pixeli CSS și, respectiv, 18,5 pixeli îngroșat. Tot ce e mai mic are nevoie de 4,5:1. Textul de bază, legendele, etichetele formularelor, prețurile și linkurile din subsol aproape niciodată nu sunt text mare, așa că au nevoie de raportul mai ridicat.

Iată cum arată asta în practică. Griul #949494 pe alb obține 3,03:1. E în regulă pentru un titlu de 28 de pixeli și e o eroare pentru un paragraf de 16 pixeli în aceeași culoare. Multe site-uri trec testul la titluri și îl pică la tot ce se află sub ele.

Fonturile subțiri și cele decorative cer atenție în plus. W3C observă că, din cauza anti-aliasingului, „fonturile deosebit de subțiri sau neobișnuite pot fi redate de agenții utilizator într-o culoare mult mai ștearsă” decât cea aleasă de dumneavoastră. Dacă fontul de brand are o grosime mică, lăsați-vă o marjă peste 4,5:1, în loc să țintiți 4,51.

Se aplică cerințele de contrast și butoanelor, pictogramelor, indicatorilor de focalizare și graficelor?

Da. Potrivit criteriului de succes 1.4.11 (nivelul AA), tot ce trebuie să vadă oamenii ca să identifice un control, starea lui sau un element grafic are nevoie de 3:1 față de culorile alăturate. Asta include chenarele câmpurilor de formular, pictogramele fără etichetă text, contururile de focalizare, stările casetelor de bifare și ale comutatoarelor, precum și liniile și segmentele graficelor. Textul din interiorul unui buton are nevoie în continuare de 4,5:1.

• Câmpuri de formular: un chenar gri deschis #CCCCCC pe alb obține 1,61:1. Dacă această linie ștearsă este singurul lucru care arată unde se scrie, pică testul.
• Butoane: WCAG nu cere un chenar vizibil în jurul fiecărui buton. Documentul W3C de explicare a criteriului 1.4.11 (se deschide într-o filă nouă) spune că o margine e necesară doar atunci când nu există altă cale vizuală de a identifica controlul. Dacă un buton se recunoaște doar după forma lui colorată, acea formă are nevoie de 3:1 față de pagină.
• Pictograme: o lupă de căutare, o inimioară pentru lista de dorințe sau o pictogramă de coș fără text alături au nevoie de 3:1.
• Indicatori de focalizare: conturul care arată focalizarea de la tastatură trebuie să contrasteze cu fundalul din jur. Ghidul nostru despre WCAG 2.2 prezintă criteriile mai noi despre focalizare.
• Grafice: liniile dintr-un grafic liniar și feliile unei diagrame circulare au nevoie de 3:1, cu excepția cazului în care aceleași valori apar și ca text.
• Controalele dezactivate sunt exceptate, deși oamenii trebuie totuși să-și dea seama dacă un buton poate fi apăsat.

Linkurile din textul curent sunt un caz aparte. Dacă se disting doar prin culoare, fără subliniere, tehnica W3C G183 (se deschide într-o filă nouă) cere un raport de 3:1 între culoarea linkului și textul din jur, în timp ce amândouă au nevoie în continuare de 4,5:1 față de fundal. E greu să găsiți trei culori care să îndeplinească toate aceste condiții. O subliniere e mult mai simplă.

Cum verific contrastul culorilor?

Folosiți un verificator de contrast gratuit pentru perechi de culori anume, instrumentele pentru dezvoltatori din browser pentru paginile live și o scanare automată ca să găsiți zonele cu probleme de pe tot site-ul. Apoi verificați cu ochiul ce scapă instrumentelor: textul peste fotografii și degradeuri, stările la trecerea cursorului și la focalizare, textul substituent și mesajele de eroare. Majoritatea acestor verificări durează câteva minute pentru fiecare șablon de pagină.

• WebAIM Contrast Checker (se deschide într-o filă nouă): introduceți două coduri hex și primiți raportul, cu rezultatul „trece” sau „pică” pentru text normal, text mare și obiecte grafice. Glisorul de luminozitate e util ca să găsiți cea mai apropiată nuanță care trece.
• Colour Contrast Analyser (se deschide într-o filă nouă): o aplicație desktop gratuită de la Vispero, pentru Windows și macOS. Pipeta ei preia culoarea oricărui pixel de pe ecran, ceea ce ajută la textul peste imagini, în PDF-uri și în aplicații, și include un simulator de daltonism.
• Chrome DevTools: inspectați o bucată de text și deschideți selectorul de culoare. Secțiunea pentru raportul de contrast (se deschide într-o filă nouă) afișează linii pentru AA și AAA și poate sugera o culoare care trece. Panoul CSS Overview enumeră toate problemele de contrast de pe pagină.
• Verificatoare automate: extensiile de browser și Lighthouse semnalează textul cu contrast scăzut de pe o pagină întreagă, dar adesea marchează textul peste imagini sau degradeuri ca necesitând verificare manuală, în loc să spună dacă trece sau pică.

Unde instrumentele nu ajung, verificați de mână. Pentru textul de pe o fotografie mare din antet, verificați cea mai deschisă parte a imaginii din spatele celor mai deschise litere; W3C trece imaginile de fundal fără contrast suficient printre erorile cunoscute (F83). Treceți cursorul peste butoane, ajungeți la ele cu Tab, provocați o eroare într-un formular, treceți pe modul întunecat dacă îl oferiți. Și o temă întunecată poate pica testul: griul #757575 pe un fundal #121212 obține 4,07:1. Ghidul nostru despre cum testați accesibilitatea site-ului pune contrastul alături de celelalte verificări manuale rapide.

Cum corectez contrastul scăzut fără să schimb identitatea vizuală?

De obicei, adăugând o nuanță mai închisă a culorii de brand pentru text și elementele mici și păstrând originalul pentru titlurile mari, fundaluri și ilustrații. Multe culori de brand pică testul doar la dimensiuni mici. Pe o culoare de brand deschisă, e adesea suficient să înlocuiți textul alb cu unul închis, iar majoritatea vizitatorilor vor observa doar că pagina se citește mai ușor.

1. Creați pentru fiecare culoare de brand o variantă sigură pentru text, de cel puțin 4,5:1 față de fundalurile principale, și folosiți-o pentru textul de bază, linkuri și pictogramele mici.
2. Folosiți culoarea originală, strălucitoare, pentru titlurile mari (acolo ajunge 3:1), fundaluri, ilustrații și elemente decorative.
3. Pe culorile de brand deschise, schimbați textul butoanelor din alb în închis.
4. Puneți un panou opac sau semitransparent în spatele textului așezat peste fotografii.
5. Verificați fiecare stare: la trecerea cursorului, la focalizare, link vizitat, element selectat, eroare și text substituent.
6. Salvați perechile care trec ca design tokens sau setări ale temei, ca paginile noi să le moștenească în loc să le reinventeze.

Design pentru daltonism: de ce culoarea singură nu ajunge

Contrastul și culoarea sunt probleme separate. Aproximativ 1 din 12 bărbați și 1 din 200 de femei au o deficiență de vedere a culorilor, cel mai des pe axa roșu-verde, potrivit Colour Blind Awareness (se deschide într-o filă nouă). WCAG 1.4.1 (se deschide într-o filă nouă) (nivelul A) spune că culoarea nu trebuie să fie singura modalitate vizuală de a transmite o informație, așa că asociați-o cu text, pictograme, modele sau sublinieri.

• Erori în formulare: un chenar roșu, singur, pică testul. Adăugați lângă câmp un mesaj precum „Introduceți codul poștal”, ideal cu o pictogramă.
• Stoc și stare: un punct verde sau roșu lângă un produs nu le spune nimic multor cumpărători. Scrieți „În stoc” sau „Stoc epuizat”.
• Grafice: o legendă care se bazează pe potrivirea culorilor e greu de citit. Etichetați liniile direct sau folosiți modele și stiluri de linie diferite.
• Linkuri: în textul de bază, subliniați-le, din motivele de mai sus.

Ca să vedeți problema cu ochii dumneavoastră, Chrome DevTools poate simula deficiențe de vedere, iar Colour Contrast Analyser are și el un simulator. Contrastul ajută și aici: raportul măsoară luminozitatea, nu nuanța, așa că două culori cu un raport bun rămân ușor de deosebit chiar și atunci când nuanțele lor par asemănătoare. Pentru mai multe despre cum își configurează dispozitivele persoanele cu vedere slabă și cu alte deficiențe, citiți cum folosesc persoanele cu dizabilități internetul.

Sunt suficiente modurile de contrast ridicat și butoanele de contrast?

Nu. Temele de contrast ale sistemului de operare și butoanele de contrast de pe pagină îi ajută pe cei care știu că au nevoie de mai mult contrast și îl activează. WCAG evaluează însă pagina în starea ei implicită, așa că și culorile pe care le vede orice vizitator de la început trebuie să treacă testul. Un buton de contrast este o opțiune în plus pentru cei care vor mai mult, nu o soluție pentru culorile care pică.

Unele persoane cu dizabilități folosesc temele de contrast din Windows, care vă înlocuiesc culorile cu ale lor. Merită să testați site-ul cu o astfel de temă activată: pictogramele construite din imagini de fundal pot dispărea, la fel și stilurile de focalizare desenate doar cu box-shadow. Media query-ul CSS prefers-contrast vă permite în plus să oferiți o versiune cu contrast mai mare celor care au cerut-o din setările sistemului.

Propriul nostru widget are o ajustare de contrast și un profil pentru daltonism, iar unii vizitatori le găsesc utile. V-am spune totuși același lucru: dacă textul de bază este #999999 pe alb, schimbați CSS-ul. Widgetul îi dă unui vizitator care vrea mai mult contrast o cale să-l obțină. Nu face ca niște culori implicite neconforme să devină conforme, iar referința WCAG din documentația noastră spune același lucru.