Contraste du texte sur l'arrière-plan
Le texte doit avoir un contraste suffisant (WCAG AA 4.5:1).
Ce que c’est
Le contraste est la différence de luminosité entre le texte et l'arrière-plan. Le texte gris clair sur fond blanc présente un faible contraste et est difficile à lire. Les WCAG AA exigent un ratio d'au moins 4,5 : 1 pour le corps du texte.
Pourquoi c’est important
Un faible contraste exclut les utilisateurs ayant une vision plus faible et nuit à la lisibilité pour tous, en particulier sur mobile en plein soleil. Il s'agit d'une faille d'accessibilité courante et Google la signale lors d'audits.
Comment faire
- 1Vérifiez le rapport de contraste (un outil de navigation ou un vérificateur de contraste en ligne).
- 2Pour le corps du texte, visez ≥ 4,5:1, pour les gros textes ≥ 3:1.
- 3Évitez le texte gris clair (#ccc, #ddd) sur fond blanc.
- 4N'assombrissez pas le texte avec une opacité trop faible.
Exemple
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — illisible */.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */Conclusion
Un contraste suffisant est fondamental pour la lisibilité et l’accessibilité. Nos drapeaux heuristiques statiques signalent évidemment des couleurs claires, mais vérifiez le rapport exact dans le navigateur. Un texte plus sombre sur un fond clair (et vice versa) est un choix sûr.
Sujets liés