Contraste de texte insuffisant : critère RGAA 3.2, impact et correction

C'est quoi

Le contraste se mesure par un ratio entre la luminosité du texte et celle de son fond. Il va de 1:1 (invisible) à 21:1 (noir sur blanc).

Les seuils RGAA / WCAG niveau AA :

Texte normal : ratio minimum de 4,5:1.
Texte large (au moins 24px, ou 18,7px en gras) : ratio minimum de 3:1.

Un contraste trop faible n'est pas un détail esthétique. Pour une partie des utilisateurs, le texte devient simplement impossible à lire.

Qui est touché

Les personnes malvoyantes et les personnes âgées, dont la sensibilité au contraste baisse avec l'âge.
Les personnes daltoniennes, selon les combinaisons de couleurs.
Tout le monde en conditions difficiles : écran en plein soleil, luminosité basse, écran de mauvaise qualité.

Impact business

Le contraste de texte insuffisant est, d'année en année, l'erreur la plus fréquente relevée par l'enquête WebAIM Million : elle touche la grande majorité des pages d'accueil analysées.

L'impact est large parce qu'il ne se limite pas au handicap déclaré. Un visiteur valide qui consulte ton site dehors, sur mobile, n'arrive pas à lire un prix ou un bouton en gris clair. Un texte illisible sur un appel à l'action, c'est une conversion perdue.

Formule à appliquer à tes chiffres : repère tes éléments décisionnels (prix, boutons, mentions) sous le seuil 4,5:1, puis croise avec leur trafic pour estimer l'audience qui peine à les lire.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan calcule le ratio de contraste des textes et signale ceux sous le seuil RGAA.
Manuel : utilise un vérificateur de contraste (WebAIM Contrast Checker) en saisissant les codes couleur du texte et du fond.
Navigateur : l'outil d'inspection de Chrome ou Firefox affiche le ratio de contraste au survol d'un texte.

Comment corriger

Avant - CSS

.prix {
  color: #b0b0b0;        /* gris clair */
  background: #ffffff;   /* ratio ~2,5:1 - échec */
}

Après - CSS

.prix {
  color: #595959;        /* gris foncé */
  background: #ffffff;   /* ratio ~7:1 - conforme AA */
}

Il suffit souvent d'assombrir le texte ou d'éclaircir le fond pour passer le seuil. Vérifie le ratio obtenu avec un outil avant de valider : viser 4,5:1 pour le texte courant, 3:1 pour le texte large.

Attention aux états : un texte de placeholder, un libellé désactivé ou un texte au survol doivent eux aussi rester lisibles. Le contraste se corrige dans le CSS du thème, pas page par page.

Questions fréquentes

Le seuil de contraste s'applique-t-il aussi aux textes désactivés ?

WCAG exempte les composants réellement inactifs. Mais un libellé grisé reste souvent une information utile : dans le doute, garde-le lisible.

Mon texte est large, dois-je quand même respecter 4,5:1 ?

Non. Pour un texte large (au moins 24px, ou 18,7px en gras), le seuil AA descend à 3:1. En dessous de cette taille, c'est 4,5:1.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Contraste de texte insuffisant