Contrastes de couleur insuffisants

Quand le texte ne tranche pas assez sur son fond, il devient pénible voire impossible à lire pour une partie des visiteurs.

Qui est concerné

• Personnes malvoyantes ou âgées, dont la sensibilité au contraste baisse
• Personnes daltoniennes
• Tout le monde en plein soleil ou sur un écran de mauvaise qualité

Pourquoi c'est important

Les WCAG exigent un rapport de contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes (à partir de 24 px, ou 18,7 px en gras). C'est le critère 1.4.3, de niveau AA, et l'un des défauts les plus fréquents sur le web français. Un texte gris clair sur fond blanc échoue presque toujours.

Comment le tester vous-même

1. Relevez la couleur du texte et celle de son fond, puis calculez le rapport (notre vérificateur de contraste le fait pour vous).
2. Visez au moins 4,5:1 pour le texte normal, 3:1 pour les grands titres.
3. Méfiez-vous des textes posés sur une image ou un dégradé : le contraste varie d'un endroit à l'autre.

Comment corriger

Augmentez le contraste entre le texte et son fond : visez un ratio d'au moins 4,5:1 (3:1 pour les grands textes). Assombrissez le texte ou éclaircissez le fond.

/* Gris clair sur blanc : rapport 2,3:1, échec */
.note { color: #b0b0b0; background: #ffffff; }

/* Gris foncé sur blanc : rapport 7:1, conforme AAA */
.note { color: #595959; background: #ffffff; }

Ouvrir le vérificateur de contraste gratuit →

Critères de référence

Plainpied détecte ce défaut automatiquement et le localise page par page. La conformité totale combine détection automatique et vérifications humaines : voir notre méthode.