Un texte gris clair sur fond blanc peut sembler élégant sur un écran calibré et en pleine lumière, mais devient illisible en plein soleil ou pour une personne ayant une acuité visuelle réduite. Le contraste des couleurs mesure objectivement cet écart de luminosité entre le texte et son fond, sous forme d’un ratio calculable indépendamment du goût esthétique.
Seuils à respecter
Les recommandations WCAG, reprises par le RGAA, exigent un ratio minimal de 4,5:1 pour un texte courant, et de 3:1 pour un texte de grande taille (à partir de 18 points, ou 14 points en gras). Ces seuils s’appliquent aussi bien au texte qu’aux éléments d’interface porteurs d’information, comme le contour d’un champ de formulaire en erreur.
Dans WordPress
L’éditeur de blocs Gutenberg affiche un avertissement directement dans l’interface quand une combinaison de couleurs choisie pour un bloc ne respecte pas ce seuil, en particulier via les réglages de couleur de texte et d’arrière-plan. Un thème doit également veiller à ce que sa palette de couleurs définie dans theme.json propose des combinaisons conformes par défaut.
Exemple
/* Ratio insuffisant : environ 2,3:1 */
color: #999999;
background-color: #ffffff;
/* Ratio conforme : environ 4,6:1 */
color: #595959;
background-color: #ffffff;
Bon à savoir
Le contraste ne se limite pas au texte principal : les liens, les placeholders de formulaire et le texte sur une image d’arrière-plan sont des points souvent oubliés lors d’un audit de contraste, alors qu’ils sont soumis aux mêmes exigences.