Ce înseamnă acest criteriu?
WCAG 1.4.11 cere ca toate elementele vizuale non-text (cum ar fi pictogramele, graficele, chenarele, butoanele, stările hover/focus etc.) care sunt necesare pentru înțelegerea conținutului sau interacțiune să aibă un contrast suficient față de fundal.
Este o extensie a criteriului privind contrastul textului (1.4.3), dar se referă strict la conținut vizual non-textual.
De ce este important?
Elementele vizuale precum:
- pictograme de stare
- contururi de butoane,
- grafice și infografice,
- secțiuni evidențiate doar prin culoare
… pot deveni invizibile sau greu de înțeles pentru persoanele cu deficiențe de vedere (daltonism, vedere slabă etc.) dacă nu au un contrast adecvat față de fundal.
Exemple de aplicare corectă:
- O pictogramă de avertizareare un contrast de minim 3:1 față de fundal.
- Butoanele inactive au contur vizibil, chiar și la hover sau focus.
- Un grafic în care barele sunt ușor de distins unele de altele.
- Câmpuri de formular cu bordură clară sau fundal diferențiat vizibil.
Ce greșeli apar frecvent?
- Pictograme care devin greu de identificat din cauza unui contrast slab (ex: gri pe alb).
- Borduri sau contururi subtile care nu sunt vizibile pentru utilizatori.
- Folosirea doar a culorii pentru a evidenția o stare (ex: verde/roșu fără altă indicație).
- Grafice cu bare sau linii greu de diferențiat fără legende suplimentare sau contrast.
Designul vizual e ca o hartă: dacă nu poți vedea marcajele, nu poți naviga. Asigurând contrastul pentru elementele non-text, transformi interfața ta dintr-un puzzle vizual într-un spațiu clar, prietenos și incluziv.
