Vérificateur de contraste des couleurs — ratio WCAG AA/AAA et APCA
Vérifiez les couleurs du texte et du fond selon WCAG 2.x AA et AAA, consultez la valeur APCA Lc et obtenez la couleur la plus proche qui passe.
Grand texte, 24px (18pt) normal
Grand texte gras, 18,67px (14pt) gras
Texte courant normal en 16px. Portez ce vieux whisky au juge blond qui fume. Les longs paragraphes demandent plus de contraste que les titres, car les traits fins se brouillent aux petites tailles.
Petits caractères en 13px, la taille des légendes et des pieds de page.
Couleurs conformes les plus proches
Seule la luminosité change (en OKLCH) : la teinte reste la même. Appliquez-en une, ou copiez-la.
#7676764.54:1#0606064.52:1#5959597.00:1Calculé dans votre navigateur. Rien de ce que vous saisissez ne nous est envoyé ni n’est conservé. Parcourir tous les outils gratuits.
Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.
Ce vérificateur de contraste des couleurs gratuit vous indique si un texte est lisible sur son fond selon WCAG 2.x, la norme sur laquelle reposent l’ADA, l’Acte européen sur l’accessibilité et la plupart des audits d’accessibilité. Saisissez une couleur de texte et une couleur de fond, avec le sélecteur, un code HEX ou la pipette d’écran, et il affiche le ratio de contraste avec un verdict conforme ou non conforme pour AA et AAA en texte normal et grand texte, ainsi que pour les composants d’interface comme les bordures de boutons et les icônes.
Quand une paire échoue, le vérificateur propose la couleur de texte ou de fond conforme la plus proche, en ajustant seulement la luminosité dans OKLCH pour que la teinte de votre marque reste la même. Il affiche aussi la valeur APCA Lc, la méthode plus récente du projet de travail WCAG 3, qui modélise la façon dont le contraste est réellement perçu et évalue mieux le mode sombre et les polices fines. WCAG 3 n’est pas encore une norme : pour la conformité, c’est le ratio WCAG 2.x qui compte, et la page explique où les deux divergent.
Mode d’emploi
- Saisissez la couleur du texte et celle du fond : utilisez les sélecteurs, tapez des codes HEX (#777 ou #777777) ou cliquez sur l’icône d’œil pour prélever n’importe quel pixel de l’écran (Chrome et Edge).
- Lisez le ratio de contraste et les cinq verdicts. Le texte courant doit passer AA normal (4,5:1) ; les titres de 24 px, ou 18,66 px en gras, doivent passer AA grand texte (3:1).
- Regardez l’aperçu pour voir le rendu réel de la paire en taille courante, en grand texte et en légende.
- Si un test échoue, appliquez une couleur proposée dans Couleurs conformes les plus proches, qui ne modifie que la luminosité.
- Utilisez Inverser pour tester la combinaison inverse (par exemple une version mode sombre), puis copiez le résultat ou le CSS.
Questions fréquentes
Quel ratio de contraste WCAG exige-t-il ?
WCAG 2.1 et 2.2 niveau AA exigent au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (critère de succès 1.4.3), et 3:1 pour les composants d’interface et les éléments graphiques porteurs de sens comme les bordures de champs, les indicateurs de focus et les icônes (1.4.11). Le niveau AAA relève le texte à 7:1 pour le texte normal et 4,5:1 pour le grand texte (1.4.6). Les logos et les éléments purement décoratifs ou désactivés en sont exemptés.
Qu’est-ce qu’un grand texte selon WCAG ?
Au moins 18 points en normal ou 14 points en gras. En pixels CSS, cela fait 24 px en normal ou environ 18,66 px en gras, car un point vaut 1,333 pixel. Un titre de 16 px en gras n’est pas un grand texte, pas plus qu’un texte de 20 px en normal. Les polices fines ou décoratives peuvent s’avérer insuffisantes en pratique même à ces tailles, l’un des problèmes qu’APCA cherche à résoudre.
Le #777777 sur blanc est-il accessible ?
Pas pour le texte courant. #777777 sur #ffffff a un ratio de contraste de 4,48:1, juste sous le seuil AA de 4,5:1 : il échoue donc en AA pour le texte normal et ne passe que pour le grand texte et les composants d’interface. WCAG n’autorise pas l’arrondi vers le haut : 4,48 est un échec. Le gris le plus clair qui passe AA sur blanc est #767676 (4,54:1) ; pour AAA, #595959 (7,00:1).
Qu’est-ce qu’APCA et faut-il l’utiliser à la place de WCAG 2 ?
APCA (Accessible Perceptual Contrast Algorithm) est la méthode de contraste proposée pour WCAG 3. Au lieu d’un ratio, elle donne une valeur de contraste de luminosité, Lc, d’environ -108 à 106, dont le signe indique la polarité (négatif signifie texte clair sur fond sombre). Elle tient compte du fait qu’un même ratio se lit différemment selon la polarité et la noirceur des couleurs, ce qui explique que WCAG 2 surestime les paires sombre sur sombre et sous-estime certaines paires blanc sur couleur. Utilisez-la pour prendre de meilleures décisions de design, mais déclarez WCAG 2.x pour la conformité : WCAG 3 est un projet de travail et sa méthode de contraste peut encore changer.
Comment le ratio de contraste est-il calculé ?
La luminance relative de chaque couleur est calculée en convertissant ses canaux sRGB en lumière linéaire et en les pondérant à 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu, selon la sensibilité de l’œil à chacun. Le ratio vaut (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur la plus claire. Il va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Le terme 0,05 modélise la lumière ambiante réfléchie par l’écran.
Comment corriger une couleur dont le contraste est insuffisant ?
Modifiez la luminosité, pas la teinte. Foncez le texte ou éclaircissez le fond (ou l’inverse en mode sombre) jusqu’à ce que le ratio passe. Les suggestions de cette page font exactement cela dans l’espace colorimétrique OKLCH : un bleu de marque non conforme devient un bleu plus foncé plutôt qu’une autre couleur. Si aucune direction ne permet d’atteindre la cible, ce qui arrive quand l’autre couleur est un ton moyen, modifiez plutôt l’autre couleur : un fond gris moyen ne peut atteindre 7:1 avec aucune couleur de texte.
Les exigences de contraste WCAG 2.x en un coup d’œil
• Texte normal, AA (1.4.3) : 4,5:1. S’applique au texte courant, aux libellés, aux liens, aux textes indicatifs qui transmettent une information et au texte dans les images.
• Grand texte, AA (1.4.3) : 3:1. Texte d’au moins 24 px en normal ou 18,66 px en gras.
• Composants d’interface et graphiques, AA (1.4.11) : 3:1 par rapport aux couleurs adjacentes. Bordures de champs, contours de cases à cocher, indicateurs de focus, icônes porteuses de sens, lignes de graphiques.
• Texte normal, AAA (1.4.6) : 7:1. Grand texte, AAA : 4,5:1. Peu de sites atteignent l’AAA partout ; cela vaut la peine de le viser pour les textes longs et pour les publics âgés.
• Exemptés : logos et noms de marque, contrôles désactivés, éléments purement décoratifs et texte accessoire (faisant partie d’une photo, par exemple).
Deux erreurs reviennent dans presque tous les audits. Le texte indicatif (placeholder) des champs de formulaire est généralement gris clair et échoue au 4,5:1, et comme c’est souvent le seul libellé, il compte. Et les boutons aux couleurs de la marque avec du texte blanc se situent souvent entre 3 et 4,5, ce qui ne passe que pour le grand texte, alors que le libellé du bouton fait 14 ou 16 px.
Là où WCAG 2 et APCA divergent
La formule de WCAG 2 traite le contraste comme symétrique et linéaire en luminance, ce qui ne correspond pas au fonctionnement de la vision. Deux conséquences apparaissent constamment en pratique.
Le mode sombre : un texte gris clair sur fond presque noir passe souvent WCAG 2 largement, mais paraît dur ou flou, tandis que certaines paires moyennement sombres passent et sont difficiles à lire. APCA traite le clair sur sombre à part (un Lc négatif) et se montre plus strict dans les tons sombres.
Les couleurs saturées : un texte blanc sur orange (#ff7a00) obtient environ 2,6:1 selon WCAG 2 et échoue, alors qu’un texte noir sur le même orange passe ; pourtant, beaucoup de lecteurs trouvent la version blanche tout aussi lisible. APCA note ces cas plus près de la perception.
Les niveaux APCA en règle générale : Lc 90 est conseillé pour le texte courant, Lc 75 est le minimum pour le texte courant, Lc 60 pour les autres textes de contenu, Lc 45 pour les grands titres, Lc 30 pour les textes indicatifs et désactivés, et Lc 15 pour les éléments non textuels comme les séparateurs. Les recommandations complètes dépendent aussi de la graisse et de la taille de la police. Considérez-le comme une aide au design en complément de WCAG 2, pas comme un remplacement d’un contrôle de conformité.
Outils gratuits similaires
- Générateur de palette de couleurs — Appuyez sur la barre d’espace pour une nouvelle palette, verrouillez les couleurs qui vous plaisent, choisissez une harmonie ou tirez la palette d’une photo. Export en CSS, Tailwind, SCSS, JSON ou PNG.
- Sélecteur et convertisseur de couleurs — Prélevez n’importe quelle couleur sur votre écran, ou convertissez instantanément entre HEX, RGB et HSL.
- Générateur de dégradés CSS — Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur déplaçables, un cadran d’angle et des préréglages. Copiez le CSS ou une classe Tailwind.
- Générateur de box-shadow — Créez des effets box-shadow et text-shadow en plusieurs couches avec aperçu en direct et préréglages élévation, néomorphisme et lueur, puis copiez le CSS.