Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
UX / UI Impact élevé Facile 20 à 40 minutes

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

  1. 1Vérifiez le rapport de contraste (un outil de navigation ou un vérificateur de contraste en ligne).
  2. 2Pour le corps du texte, visez ≥ 4,5:1, pour les gros textes ≥ 3:1.
  3. 3Évitez le texte gris clair (#ccc, #ddd) sur fond blanc.
  4. 4N'assombrissez pas le texte avec une opacité trop faible.

Exemple

Incorrect
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — illisible */
Correct
.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