Contrastes de couleurs : les ratios WCAG à respecter et comment les vérifier
Le gris clair sur fond blanc est élégant sur un écran de studio bien calibré. Il l'est beaucoup moins sur un téléphone en plein soleil, ou pour une personne dont la vue baisse. Les WCAG fixent des seuils de contraste chiffrés, faciles à mesurer : autant les connaître avant de choisir une palette plutôt que de corriger après la mise en ligne.
Ce que dit le critère 1.4.3
La page explicative du W3C pour le critère « Contraste (minimum) » est précise. Le texte et les images de texte doivent présenter un rapport de contraste d'au moins 4,5:1 avec leur arrière-plan. Le grand texte bénéficie d'un seuil abaissé à 3:1, parce que des caractères plus grands restent lisibles avec moins de contraste.
La définition du grand texte s'exprime en points : 18 points ou plus, ou 14 points en gras ou plus. Le W3C rappelle qu'un point vaut 1,333 pixel CSS, ce qui situe ces seuils autour de 24 pixels et de 18,5 pixels. Un titre de 28 pixels en graisse normale peut donc se contenter de 3:1 ; un texte courant de 16 pixels, non.
Deux exceptions sont prévues. Le texte incident n'est soumis à aucune exigence : texte d'un composant inactif, texte purement décoratif, texte invisible ou intégré dans une photo qui comporte d'autres éléments visuels importants. Les logotypes, ensuite, en sont dispensés : le texte qui fait partie d'un logo ou d'un nom de marque n'a pas d'exigence de contraste.
Comment se calcule le ratio
Le contraste ne se juge pas à l'œil. Il se calcule à partir de la luminance relative des deux couleurs, une valeur entre 0 (noir) et 1 (blanc) qui tient compte de la sensibilité de l'œil à chaque composante. La formule est (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. Le résultat va de 1:1, deux couleurs identiques, à 21:1, noir sur blanc.
Le W3C insiste sur un point : le résultat se compare au seuil sans arrondi. Quelques exemples, calculés avec cette formule, montrent à quel point la limite est fine :
| Texte | Fond | Ratio | Texte courant (4,5:1) |
|---|---|---|---|
#767676 | #ffffff | 4,54:1 | conforme |
#777777 | #ffffff | 4,48:1 | non conforme |
#949494 | #ffffff | 3,03:1 | non conforme (grand texte seulement) |
#000000 | #ffffff | 21:1 | conforme |
Une différence d'une seule unité hexadécimale fait basculer le gris moyen d'un côté ou de l'autre du seuil. Les outils de développement des navigateurs affichent le ratio d'un texte quand on inspecte l'élément, et de nombreux vérificateurs en ligne appliquent la même formule.
Les composants d'interface : critère 1.4.11
Ajouté avec les WCAG 2.1, le critère 1.4.11 « Contraste du contenu non textuel » étend la logique au-delà du texte. Il exige un contraste d'au moins 3:1 avec les couleurs adjacentes pour deux familles d'éléments :
- les composants d'interface : l'information visuelle nécessaire pour identifier un bouton, un champ de formulaire, une case à cocher, et leurs états (coché, sélectionné, focalisé) ;
- les objets graphiques : les parties d'un graphique ou d'une icône nécessaires pour comprendre le contenu.
Un champ de formulaire dont la bordure gris très pâle se distingue à peine du fond ne satisfait pas ce critère. Les composants inactifs en sont exemptés, de même que ceux dont l'apparence est entièrement déterminée par le navigateur. Pour l'indicateur de focus, le W3C précise que, combiné au critère 2.4.7 « Visibilité du focus », un indicateur personnalisé doit contraster avec le fond ; le style par défaut du navigateur, non modifié, échappe à l'exigence de contraste mais doit rester visible. Les WCAG 2.2 ont ajouté un critère de niveau AAA, 2.4.13, sur l'apparence du focus.
Construire une palette conforme dès le départ
Corriger les contrastes après coup oblige souvent à retoucher toute une charte. Il est plus simple de raisonner en paires dès la conception :
- Lister les paires réelles : texte sur fond, lien sur fond, texte de bouton sur couleur de bouton, texte sur encadré coloré, bordure de champ sur fond.
- Mesurer chaque paire et noter le ratio à côté. Une couleur d'accent peut convenir pour un grand titre et échouer pour un lien dans le texte courant.
- Ne pas compter sur la couleur seule. Un lien distingué uniquement par sa teinte pose un autre problème, couvert par le critère 1.4.1. Le soulignement reste la solution la plus sûre.
- Refaire l'exercice pour le mode sombre et pour chaque variation de style : les ratios ne se transposent pas d'un thème à l'autre.
Dans un thème blocs, ce travail se traduit directement dans theme.json : une palette restreinte aux couleurs vérifiées, et le sélecteur de couleur libre désactivé pour que les rédacteurs ne puissent pas créer de paire illisible. Notre guide de theme.json montre comment.
Au-delà du minimum
Les WCAG prévoient aussi un niveau AAA, avec un critère de contraste renforcé (1.4.6), plus exigeant pour le texte courant. Il n'est pas exigé par le RGAA, mais il est un bon objectif pour le texte principal d'un site de lecture. À l'inverse, un contraste maximal n'est pas toujours idéal : certaines personnes trouvent un blanc pur sur noir pur fatigant sur de longs textes. Un gris très foncé sur un fond légèrement teinté offre souvent un bon compromis, tout en restant très au-dessus du seuil.
Enfin, le contraste ne fait pas tout. La taille du texte, l'interlignage, la longueur des lignes et le choix d'une police lisible comptent autant : notre article sur les thèmes accessibles en dresse la liste.
Sources
- W3C, « Understanding Success Criterion 1.4.3: Contrast (Minimum) » (consulté le 27 octobre 2026).
- W3C, « Understanding Success Criterion 1.4.11: Non-text Contrast » (consulté le 27 octobre 2026).
- Ratios du tableau calculés par Gabarit avec la formule de luminance relative des WCAG.
AccessibilitéWCAG 2.2 : les nouveautés
Focus visible même sous un bandeau, cibles de 24 pixels, pas de casse-tête pour se connecter : ce que les WCAG 2.2 ont ajouté.
AccessibilitéVérifier l'accessibilité d'un thème
Lien d'évitement, clavier, focus, titres, formulaires, zoom : ce que vérifie l'étiquette « accessibility-ready », et comment le tester soi-même.
Thèmes & WordPresstheme.json, le guide pratique
Version, settings, styles, préréglages et variables CSS : comment un seul fichier JSON pilote l'apparence d'un thème blocs.