Greșeli frecvente
Cele mai frecvente probleme de accesibilitate din WebAIM Million 2026: contrast scăzut, imagini fără text alternativ, câmpuri fără etichetă, linkuri și butoane goale, limbă lipsă.
Ghid practic
Contrastul culorilor
Rapoartele minime cerute de WCAG, cazurile dificile și cum verifici rapid paleta site-ului.
Contrastul insuficient este cea mai frecventă problemă de accesibilitate de pe web. Raportul WebAIM Million din 2026 l-a găsit pe 83,9% dintre primele un milion de pagini principale analizate. Vestea bună este că se corectează relativ ușor, de obicei din paleta de culori.
Cerințele WCAG
| Criteriu | Nivel | Cerință |
|---|---|---|
| 1.4.3 Contrast (minim) | AA | 4,5:1 pentru text normal, 3:1 pentru text mare |
| 1.4.11 Contrast non-text | AA | 3:1 pentru componente ale interfeței și elemente grafice |
| 1.4.6 Contrast (îmbunătățit) | AAA | 7:1 pentru text normal, 4,5:1 pentru text mare |
Ce înseamnă text mare
Pentru WCAG, textul mare are cel puțin 18 puncte (aproximativ 24 de pixeli CSS) sau 14 puncte îngroșat (aproximativ 18,66 pixeli CSS). Pentru textul mare, raportul minim scade la 3:1.
Contrastul componentelor și graficelor
Criteriul 1.4.11 cere un contrast de cel puțin 3:1 pentru elementele necesare înțelegerii interfeței: marginile câmpurilor de formular, pictogramele cu funcție, indicatorul de focus, stările butoanelor și părțile importante ale graficelor.
Nu te baza doar pe culoare
Criteriul 1.4.1 cere ca informația să nu fie transmisă doar prin culoare. Un câmp cu eroare marcat doar cu roșu sau un link diferențiat doar prin culoare nu vor fi percepute de persoanele cu daltonism. Adaugă text, pictograme sau subliniere.
Greșit
„Câmpurile marcate cu roșu sunt obligatorii.”
Corect
„Câmpurile marcate cu asterisc (*) sunt obligatorii”, iar eroarea este descrisă în text lângă câmp.
Cazuri dificile
- Text peste imagini sau videoclipuri: folosește un fundal semitransparent sau o suprapunere întunecată
- Text gri deschis pentru informații secundare: alege o nuanță mai închisă
- Butoane fantomă cu margine subțire: verifică atât textul, cât și marginea
- Stările dezactivate: sunt exceptate, dar trebuie să fie clar că sunt dezactivate
- Logourile: sunt exceptate de la cerințele de contrast
Cum verifici
- Instrumentele de dezvoltator din Chrome, Edge și Firefox afișează raportul de contrast la inspectarea textului
- Aplicații dedicate pentru verificarea culorilor, care permit și simularea daltonismului
- Scannerul automat verifică toate textele de pe site
- Pentru textul peste imagini, verificarea trebuie făcută manual
Widgetul nostru oferă vizitatorilor un mod de contrast ridicat, dar designul de bază trebuie să respecte oricum cerințele.
Hai să facem site-ul tău accesibil
Spune-ne ce platformă ai și ce termene urmărești. Revenim cu o propunere clară, adaptată proiectului tău.
Cere o ofertă
sau scrie-ne direct la contact@datapulse.ro