Contrastul de Culoare WCAG pentru Designeri
Regula 4.5:1, matematica raportului de contrast și instrumente gratuite pentru a verifica orice pereche de culori.
Dacă textul tău nu respectă contrastul WCAG AA, aproximativ 285 de milioane de persoane cu deficiențe de vedere nu îl pot citi. În plus, te afli pe un teren legal tot mai instabil în UE și SUA. Vestea bună: regula este simplă.
Regula 4.5:1
Textul de corp trebuie să aibă un raport de contrast de cel puțin 4.5:1 față de fundal pentru a îndeplini WCAG AA. Textul mare (24px+ normal sau 18px+ bold) are o limită mai mică de 3:1.
Pentru conformitatea AAA: 7:1 pentru corp, 4.5:1 pentru text mare.
Cum se calculează raportul de contrast
WCAG folosește luminozitatea relativă — convertește fiecare culoare într-o valoare de luminozitate (0 = negru, 1 = alb) folosind o formulă specifică, apoi calculează (L1 + 0.05) / (L2 + 0.05), unde L1 este culoarea mai deschisă.
Nu trebuie să faci matematica — folosește verificatorul nostru de contrast gratuit pentru a introduce oricare două culori și a vedea raportul.
Cazuri frecvente de eșec
- Gri deschis pe alb — #999 pe #fff = 2.85 (eșuează). #767676 pe #fff = 4.54 (trece).
- Alb pe galben — aproape întotdeauna eșuează. Folosește text închis pe galben.
- Linkuri colorate în textul de corp — majoritatea linkurilor albastre trec pe alb, dar eșuează pe gri deschis. Testează fundalul real din jur.
- Culorile de brand care arată grozav — adesea eșuează. Adaugă un fundal aproape alb sau întunecă textul.
Alegerea perechilor de culori accesibile
Trei modele de încredere:
- Închis pe deschis — #1f2937 pe #fff = 14:1 (perfect).
- Alb pe închis — #fff pe #1f2937 = 14:1 (perfect).
- Închis pe accent — #1f2937 pe #fbbf24 = 9:1 (perfect pentru butoane).
Dincolo de text
WCAG 2.1 necesită, de asemenea, 3:1 pentru elemente non-text (butoane, inele de focalizare, margini de formulare). Verificatorul se ocupă de ambele.
Wallpapers care nu se luptă cu widgeturile tale
Dacă ești un designer care setează imagini de fundal în spatele widgeturilor de ceas și notificărilor, alege imagini de fundal cu un contrast sub 5:1 în zonele widgeturilor. Instrumentul nostru Gaussian blur poate înmuia zonele aglomerate ale oricărei imagini de fundal pentru o lizibilitate mai bună a widgeturilor.
Încearcă instrumentele noastre gratuite
Majoritatea acestor ghiduri sunt însoțite de un instrument practic pe care îl poți folosi chiar acum — fără înregistrare pentru prima utilizare:
- Redimensionare imagine — redimensionare și mărire precisă la nivel de pixel.
- Convertire în WebP — fișiere cu 30-50% mai mici decât JPG.
- Eliminare fundal — decupare cu un singur clic, PNG transparent.
- Generator favicon — toate dimensiunile browserelor dintr-o singură sursă.
- Redimensionare social-media — dimensiunile exacte pentru fiecare platformă.
- Procesare în lot — aplică orice instrument la până la 200 de imagini simultan.
Explorează catalogul complet de instrumente.
