Sur un projet récent pour une agence de communication, la charte graphique imposait un gris clair (#9CA3AF) pour tous les textes secondaires, sur fond blanc. Un choix esthétiquement défendable, mais qui donnait un ratio de contraste de 2,3:1, très loin des 4,5:1 exigés par le niveau AA des WCAG. Ce type de désaccord entre direction artistique et accessibilité revient sur presque tous les projets, et il vaut mieux savoir l’anticiper que le découvrir lors d’un audit.
Le contraste de couleurs est l’un des rares critères d’accessibilité entièrement objectif : un calcul, un chiffre, un seuil. Contrairement à d’autres règles qui demandent une appréciation (la pertinence d’un texte alternatif, par exemple), le contraste ne laisse pas de place à l’interprétation, ce qui en fait un bon point d’entrée pour sensibiliser une équipe entière à l’accessibilité.
Comprendre le calcul du ratio
Le ratio de contraste, défini par les WCAG, compare la luminosité relative de deux couleurs et produit un chiffre compris entre 1:1 (aucun contraste, deux couleurs identiques) et 21:1 (le contraste maximal, noir pur sur blanc pur). La formule tient compte de la perception humaine de la luminosité, pas d’une simple différence numérique entre les codes hexadécimaux : deux couleurs visuellement proches en apparence peuvent produire des ratios très différents selon leur composante de luminosité.
Les seuils à retenir pour le niveau AA, le niveau visé par la grande majorité des projets :
- 4,5:1 minimum pour le texte courant, quelle que soit sa taille
- 3:1 minimum pour le « grand texte », soit au moins 18,66 px en gras ou 24 px en graisse normale
- 3:1 minimum pour les éléments d’interface non textuels porteurs de sens (bordure de champ de formulaire, icône, contour de bouton)
- Aucun seuil imposé pour le texte purement décoratif ou masqué visuellement
Où le contraste échoue le plus souvent sur un site WordPress
Certaines zones concentrent la majorité des échecs constatés en audit. Le texte de placeholder des champs de formulaire arrive en tête : nombreux sont les navigateurs qui l’affichent par défaut en gris clair, un ratio souvent inférieur à 3:1. Les liens du corps de texte suivent de près, notamment quand ils ne se distinguent du texte courant que par une teinte légèrement différente, sans soulignement ni changement de graisse. Le texte sur image, utilisé en superposition dans les bannières d’accueil, pose aussi problème dès que l’image varie de luminosité selon la zone.
Vérifier et corriger dans theme.json
Depuis WordPress 5.8 et la généralisation de theme.json, la palette de couleurs d’un thème bloc se définit de façon centralisée, ce qui facilite grandement la vérification des contrastes puisque toutes les combinaisons possibles sont listées à un seul endroit.
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "texte", "color": "#1a1a1a", "name": "Texte" },
{ "slug": "fond", "color": "#ffffff", "name": "Fond" },
{ "slug": "accent", "color": "#0a5c8a", "name": "Accent" },
{ "slug": "secondaire", "color": "#5c6470", "name": "Secondaire" }
]
}
}
}
Chaque paire susceptible d’être combinée (texte sur fond, accent sur fond, secondaire sur fond) doit être vérifiée individuellement. Un outil en ligne de commande ou une extension de navigateur donne le ratio en quelques secondes ; l’important est de le faire systématiquement, avant l’intégration, plutôt que de se fier à l’apparence sur un écran calibré.
Quand la charte graphique impose une couleur trop claire
Le cas le plus délicat reste celui d’une couleur de marque imposée par un client, qui échoue au test de contraste dans son usage prévu. Plusieurs solutions existent sans trahir l’identité visuelle : assombrir légèrement la teinte pour le texte tout en gardant la couleur d’origine pour les à-plats larges, réserver la couleur claire aux éléments décoratifs non porteurs d’information, ou épaissir le texte pour basculer dans la catégorie « grand texte » au seuil plus tolérant de 3:1.
Une couleur de marque n’est pas un absolu intouchable. Elle a une valeur d’usage pour les grands aplats et les éléments décoratifs, une autre pour le texte. Confondre les deux est la source de la plupart des conflits entre direction artistique et accessibilité.
Outils recommandés pour un contrôle systématique
Un contrôle de contraste ne devrait jamais se faire à l’œil, même pour un designer expérimenté : la perception varie selon l’écran, sa calibration, et la fatigue visuelle du moment. Les outils dédiés donnent un résultat reproductible et objectif, ce qui en fait un excellent réflexe à intégrer dans la recette d’un projet, au même titre qu’un test sur mobile.
En résumé
Le contraste de couleurs reste l’un des défauts d’accessibilité les moins coûteux à corriger, à condition de le vérifier tôt. Intégrer ce contrôle dès la validation de la maquette, plutôt qu’après l’intégration complète du thème, évite d’avoir à renégocier une palette de marque une fois que le client s’y est habitué visuellement.
