Dintre toate criteriile WCAG, contrastul este cel mai des încălcat și, paradoxal, cel mai ușor de verificat. Criteriul 1.4.3 cere un raport de minimum 4,5:1 între culoarea textului și fundal pentru text normal, și 3:1 pentru text mare (peste 18pt sau 14pt bold). Din 2018, criteriul 1.4.11 extinde cerința de 3:1 și la componentele de interfață: borduri de câmpuri, iconițe funcționale, indicatori de stare.
Ce este, de fapt, raportul de contrast
Este raportul dintre luminanța relativă a celor două culori: o formulă care aproximează cât de diferit le percepe ochiul uman. Alb pur pe negru pur dă 21:1, maximul posibil. Gri mediu (#777777) pe alb dă cam 4,5:1, exact la limită. Popularul gri deschis #999999 pe alb dă doar 2,8:1 și pică testul, deși designerilor li se pare „suficient de citibil" pe monitoarele lor calibrate, în birouri bine luminate. Utilizatorul cu vedere scăzută, pe un telefon în soare, vede altceva.
Combinațiile care pică cel mai des
Din miile de scanări rulate pe site-uri românești, recidiviștii sunt mereu aceiași: gri deschis pe alb la metadate și texte secundare; alb pe culori pastel sau pe galben/portocaliu la butoane; placeholder-ul implicit al browserului folosit pe post de etichetă; text alb peste fotografii fără strat de întunecare; și linkurile diferențiate de text doar prin culoare, fără subliniere, care încalcă separat criteriul 1.4.1.
Cum verifici gratuit
Pentru o pereche de culori, orice instrument de tip contrast checker îți dă raportul instant: introduci cele două coduri hex și primești verdict pe fiecare nivel. Pentru un site întreg, verificarea manuală e nepractică: scannerul Wawsome extrage automat toate combinațiile text-fundal din paginile randate și le listează pe cele neconforme, cu selectorul CSS exact. Iar pentru utilizatorii care au nevoie de mai mult decât minimul legal, widgetul oferă moduri de contrast ridicat la un click.
Un sfat de design
Contrastul conform nu înseamnă site urât. Înseamnă să-ți alegi nuanțele secundare cu un pas mai închis decât instinctul inițial: diferența estetică e minimă, diferența de lizibilitate e enormă. Definește perechile aprobate în design system și problema dispare la sursă.