Ce este Color Contrast (Contrast culori)?

Definiție Color Contrast (Contrast culori)

Contrastul de culori masoara diferenta de luminozitate intre textul si fundalul pe care apare. WCAG cere un raport minim de 4.5:1 pentru text normal si 3:1 pentru text mare. Un contrast slab (text gri pe fundal alb) face textul greu de citit, mai ales pentru persoanele cu vederea slaba sau in conditii de lumina puternica.

De ce contează Color Contrast (Contrast culori)

Raportul minim de contrast de 4.5:1 cerut de WCAG AA nu este un prag arbitrar — reprezinta pragul sub care persoanele cu vedere moderata (aproximativ 246 milioane global) nu mai pot distinge textul de fundal. In conditii de lumina puternica pe ecranul unui telefon, chiar si utilizatorii cu vedere perfecta nu pot citi text gri deschis pe fundal alb. Un contrast slab creste rata de abandon cu pana la 25% pe dispozitivele mobile.

Cum verifici Color Contrast (Contrast culori)

Analiza de accesibilitate SoftAudit calculeaza raportul de contrast conform algoritmului WCAG pentru fiecare combinatie text-fundal din pagina. Rezultatele sunt clasificate in nivel AA (4.5:1 pentru text normal, 3:1 pentru text mare) si AAA (7:1 / 4.5:1), cu indicarea exacta a elementelor care nu trec.

Greșeli frecvente

Designerii aleg frecvent tonuri de gri subtile (#999 pe #fff = raport 2.85:1) pentru un aspect "curat", sacrificand citibilitatea. Text suprapus pe imagini de fundal fara un overlay semi-transparent este alta problema frecventa — contrastul variaza dramatic in functie de zona imaginii, iar unele cuvinte devin ilizibile.

Bune practici

Verifica contrastul in faza de design, nu dupa implementare — plugin-uri precum Stark pentru Figma si Color Contrast Analyzer semnaleaza problemele instant. Pentru text pe imagini, adauga intotdeauna un gradient sau overlay cu opacitate suficienta si testeaza pe mai multe ecrane cu luminozitatea la minim.

Întrebări frecvente

Termeni asociați