Contraste des couleurs

Les seuils du RGAA

Le critère 3.2 du RGAA 4.1.2 porte sur le contraste entre un texte et son arrière-plan. Ses tests partent de la taille du texte telle que le navigateur l’affiche :

• texte non gras de moins de 24 px, ou gras de moins de 18,5 px : 4,5:1 au moins ;
• texte non gras de 24 px et plus, ou gras de 18,5 px et plus : 3:1 au moins.

Le critère 3.3 demande 3:1 au moins entre la couleur d’un composant d’interface, dans ses différents états, et la couleur de fond qui le touche : bordure d’un champ, contour d’un bouton, case cochée. La même règle vaut pour les parties d’un graphique nécessaires à sa compréhension, comme une courbe contre son fond, et pour les couleurs qui se touchent dans le graphique, comme deux secteurs voisins d’un diagramme (test 3.3.3).

Dans les deux cas, le critère est aussi respecté si la page propose un mécanisme qui affiche le contenu avec un contraste suffisant, par exemple un bouton de thème contrasté. Ce bouton doit lui-même atteindre les seuils. Le texte d’un logo, le texte décoratif et celui d’un bouton désactivé sont hors du critère 3.2 ; le critère 3.3 exclut de même les composants désactivés et les éléments graphiques d’un logo.

D’où viennent 24 px et 18,5 px

Le glossaire du RGAA ne définit pas de « grand texte » : les tailles sont écrites dans les tests. Elles viennent des WCAG 2.1, qui parlent de texte de grande taille à partir de 18 points, ou de 14 points en gras. Le W3C précise qu’un point vaut 1,333 pixel CSS, soit environ 24 px et 18,5 px (Understanding 1.4.3).

L’outil ne connaît pas la taille de vos textes : il donne les trois verdicts, à vous de lire celui qui correspond. Pour une taille en rem, multipliez par la taille de base de la page, 16 px tant que ni le site ni la personne qui lit ne l’ont changée ; une taille en em se multiplie par celle de l’élément parent.

Comment se calcule le rapport

Le glossaire du RGAA reprend la formule des WCAG. Chaque couleur reçoit une luminance relative, de 0 pour le noir à 1 pour le blanc : les trois canaux sont convertis en valeurs linéaires, puis pondérés. Le vert compte pour 71,52 %, le rouge pour 21,26 % et le bleu pour 7,22 %, ce qui explique qu’un jaune vif contraste si peu avec le blanc.

Le rapport vaut (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire. Il va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur du blanc, et reste le même quand on inverse le texte et le fond.

Le glossaire du RGAA garde la constante 0,03928, que les WCAG 2.1 ont remplacée par 0,04045 en 2021 en précisant que le changement est sans effet pratique. Pour des couleurs codées sur 8 bits, aucune valeur de canal ne tombe entre les deux : le résultat est identique, et nos tests le vérifient sur les 256 valeurs.

Les seuils ne s’arrondissent pas : le W3C indique que 4,499:1 n’atteint pas 4,5:1 ( Understanding 1.4.3). Le rapport affiché est donc tronqué au centième, jamais arrondi vers le haut. Un autre outil peut afficher 4,5:1 là où celui-ci affiche 4,49:1 : c’est le même calcul, mais seul le second affichage dit vrai sur le seuil.

Ce que le calcul ne voit pas

• Le texte posé sur une image, une photo ou un dégradé : le contraste change d’un point à l’autre. Relevez la couleur de la zone la moins contrastée derrière le texte et testez celle-là.
• Les états au survol, au focus, une case cochée, un champ en erreur : chaque état forme une nouvelle paire de couleurs à tester.
• Un fond transparent : l’outil sait composer un texte semi-transparent sur son fond, mais le fond doit être opaque. Relevez la couleur réellement affichée avec la pipette des outils de développement du navigateur.
• Les polices très fines ou inhabituelles, que les WCAG signalent comme plus difficiles à lire à contraste égal.
• Le reste de la page : un verdict vaut pour une paire. Pour les textes d’une page entière, l’analyseur mesure chaque contraste affiché.

Corriger en gardant la teinte de la marque

Quand un seuil n’est pas atteint, l’outil cherche la couleur conforme la plus proche dans la même teinte, pour le texte puis pour le fond. Il avance d’une unité à la fois vers le noir ou vers le blanc et retient la première couleur qui passe : la teinte reste la même, à l’arrondi près. Le bouton « Appliquer » la reporte dans le champ.

Une répartition courante : la couleur d’origine pour les grands titres, les aplats et la décoration, sa version foncée pour le texte courant et les liens.

Vérifier une palette entière

Le mode « Vérifier une palette » calcule toutes les paires d’une charte : 6 couleurs donnent 15 paires, 16 couleurs en donnent 120. Chaque paire est classée selon l’usage qu’elle permet : tous les textes (4,5:1 et plus), grand texte et composants seulement (de 3:1 à 4,49:1), ou ni l’un ni l’autre. Faites-le avant de dessiner les écrans, puis pour le thème sombre s’il existe : les paires changent avec lui. Le bouton « Comparer » ouvre une paire dans le premier mode, avec ses propositions.

Sources

RGAA 4.1.2, critère 3.2 (contraste du texte) ; RGAA 4.1.2, critère 3.3 (contraste des composants et des éléments graphiques) ; RGAA 4.1.2, glossaire : Contraste ; RGAA 4.1.2, introduction de la méthode technique (niveaux A et AA) ; WCAG 2.1, critère de succès 1.4.3 Contrast (Minimum), en anglais ; WCAG 2.1, critère de succès 1.4.11 Non-text Contrast, en anglais ; WCAG 2.1, définitions : relative luminance, contrast ratio, large scale, en anglais ; Understanding Success Criterion 1.4.3 (W3C), en anglais .

Page mise à jour le 11 novembre 2026.