Vérificateur de contraste WCAG 2.2 : niveaux AA et AAA

Mode d'emploi

Saisissez la couleur du texte dans Couleur du texte et la couleur qui se trouve derrière dans Couleur de fond.
Lisez Rapport de contraste. Les quatre contrôles du texte et le contrôle des composants indiquent les niveaux atteints par la paire.
Pour un texte courant, visez AA, texte normal. Un grand texte demande moins de contraste ; les tailles figurent dans les sections ci-dessous.
Si un contrôle échoue, partez de la Couleur de texte suggérée et testez le résultat dans votre création réelle.

Comment le rapport est calculé

Le WCAG 2.2 attribue à chaque couleur une luminance relative. Chaque valeur de rouge, de vert et de bleu est d'abord rendue linéaire : une valeur d'au plus 0,04045 (sur une échelle de 0 à 1) est divisée par 12,92, et une valeur plus grande est élevée à la puissance 2,4 après addition de 0,055 et division par 1,055. Les trois résultats sont ensuite pondérés : 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Le rapport de contraste est la luminance de la couleur la plus claire, plus 0,05, divisée par la luminance de la couleur la plus foncée, plus 0,05.

Le résultat va de 1, pour deux couleurs identiques, à 21, pour le noir sur blanc.

L = 0,2126 × R + 0,7152 × G + 0,0722 × B
rapport = (L1 + 0,05) ÷ (L2 + 0,05)

L1  luminance de la couleur la plus claire
L2  luminance de la couleur la plus foncée

Les niveaux

Le WCAG 2.2 fixe ces rapports minimaux. Le niveau et le critère de réussite sont indiqués pour que vous puissiez consulter le texte exact.

AA, texte normal : 4,5:1 (critère 1.4.3).
AA, grand texte : 3:1, pour un texte de 18 points, ou de 14 points en gras (1.4.3).
AAA, texte normal : 7:1 (critère 1.4.6).
AAA, grand texte : 4,5:1 (1.4.6).
Boutons, bordures et icônes dont un lecteur a besoin pour utiliser la page : 3:1 (1.4.11).

Ce que ce vérificateur ne couvre pas

Le texte posé sur des photos, des images ou des dégradés : le fond change d'un bout à l'autre du texte, il faut donc vérifier les pixels réels.
Les couleurs transparentes : saisissez la couleur que le lecteur voit réellement sur la page.
Les états de survol, de focus et les autres états : vérifiez aussi leurs couleurs.
Si le texte est grand pour le lecteur : la taille et l'épaisseur de la police en décident, et la page ne peut pas les connaître.

Exemple détaillé : gris #777 sur blanc

Le gris #777 a chaque canal à 119 sur 255, ce qui donne une luminance relative d'environ 0,184. Le blanc a une luminance de 1, donc le rapport est (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.

Donc #777 sur blanc échoue au niveau AA pour le texte normal, de peu, réussit AA pour le grand texte et le contrôle de 3:1 pour les composants, et échoue au niveau AAA. Le gris plus foncé le plus proche qui réussit AA est #767676, avec un rapport de 4,54.

Contrôle	Il faut	#777 sur blanc
AA, texte normal	4,5:1	4,48 : échec
AA, grand texte	3:1	Réussi
AAA, texte normal	7:1	Échec
AAA, grand texte	4,5:1	Échec
Boutons, bordures et icônes	3:1	Réussi

Questions fréquentes

Quel rapport de contraste faut-il pour un texte courant ?

Pour le niveau AA du WCAG 2.2, le texte normal demande au moins 4,5:1 et le grand texte 3:1. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Pourquoi un rapport de 4,4999 s'affiche-t-il en 4,50 et échoue-t-il quand même ?

Le contrôle utilise le rapport exact, et non les deux décimales affichées à l'écran. Un rapport juste en dessous de 4,5 s'arrondit à 4,50 à l'affichage, mais il n'atteint pas 4,5:1 : le contrôle échoue donc.

L'ordre des deux couleurs modifie-t-il le rapport ?

Non. Le rapport est le même quelle que soit la couleur du texte et celle du fond, car la couleur la plus claire est toujours au numérateur.

Qu'est-ce que la couleur suggérée ?

C'est la couleur de texte la plus proche de la vôtre en clarté qui atteint 4,5:1 sur votre fond. Elle garde la même teinte et la même saturation, et elle est plus foncée ou plus claire, selon le changement le plus petit.

Puis-je saisir une couleur avec transparence ?

Pas ici. Saisissez la couleur que le visiteur voit réellement, c'est-à-dire la couleur transparente déjà mélangée au fond qui se trouve derrière elle.

Mes couleurs sont-elles envoyées à un serveur ?

Non. Le calcul se fait dans votre navigateur, et rien de ce que vous saisissez n'est enregistré ni envoyé.

Un rapport suffisant signifie-t-il que le texte est facile à lire ?

Pas toujours. Le rapport est le minimum fixé par le WCAG. La taille, l'épaisseur et l'espacement des caractères, ainsi que la vue du lecteur, comptent aussi : testez la création réelle avec de vraies personnes lorsque c'est possible.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.

Résultat