Contraste des textes : la règle du 4,5:1 expliquée (critère 3.2)

Un texte gris clair sur fond blanc, c’est élégant sur une maquette. Pour une personne malvoyante, ou pour n’importe qui sur un téléphone en plein soleil, c’est souvent illisible. Le contraste insuffisant est l’erreur d’accessibilité la plus fréquente du web : selon l’étude WebAIM Million 2026, elle touche la grande majorité des pages d’accueil.

Ce que dit le critère 3.2 du RGAA

Le critère 3.2 demande que le contraste entre la couleur du texte et celle de son arrière-plan soit suffisant. Le seuil dépend de la taille du texte :

Texte	Contraste minimum
Texte normal, moins de 24 px	4,5:1
Texte en gras, moins de 18,5 px	4,5:1
Texte normal, 24 px ou plus	3:1
Texte en gras, 18,5 px ou plus	3:1

Le ratio va de 1:1 (aucune différence, blanc sur blanc) à 21:1 (noir sur blanc).

Comment se calcule le contraste ?

Le ratio compare la luminance relative des deux couleurs, c’est-à-dire leur luminosité perçue :

contraste = (L1 + 0,05) / (L2 + 0,05)

où L1 est la luminance de la couleur la plus claire et L2 celle de la plus foncée. Inutile de le calculer à la main : les outils de mesure le font pour vous. Retenez seulement deux repères :

• le gris #767676 sur blanc atteint tout juste 4,5:1 ;
• le gris #9EA3AC, très répandu dans les maquettes, plafonne à 2,5:1 sur blanc : il échoue.

Les pièges les plus fréquents

• Les textes d’aide et les mentions légales, souvent en petit et en gris clair : ce sont les premiers à échouer.
• Le texte d’exemple des champs (le placeholder) : il est souvent trop pâle, et ne remplace de toute façon pas une étiquette.
• Le texte posé sur une image ou un dégradé : le contraste doit être suffisant à chaque endroit où le texte passe.
• Les états au survol et au focus : un bouton contrasté au repos peut ne plus l’être une fois survolé.

Certains cas sont exclus du critère, comme le texte d’un logo ou celui d’un élément désactivé.

Comment corriger

La correction est presque toujours une ligne de CSS : foncer la couleur du texte, ou éclaircir son fond.

/* Avant : 2,5:1 sur blanc, non conforme */
.form-help {
  color: #9ea3ac;
}

/* Après : 9,1:1 sur blanc, conforme */
.form-help {
  color: #45494f;
}

Le plus efficace est de corriger à la source : dans vos variables de couleurs ou votre thème, plutôt que composant par composant. Un gris trop clair corrigé une fois l’est partout.

Vérifier toute une page en une fois

Mesurer chaque texte à la pipette est fastidieux (les outils sont comparés dans notre comparatif). Araspeed calcule le contraste de tous les textes de la page tels qu’ils s’affichent réellement, signale ceux qui n’atteignent pas le seuil du critère 3.2, montre l’élément concerné et propose la couleur corrigée.

Le contraste n’est qu’un des 106 critères du RGAA : notre guide complet du RGAA présente les autres.