Outil gratuit : Accessibilité

Vérificateur de contraste des couleurs

Comparez ici une couleur de texte et une couleur d’arrière-plan selon les WCAG 2.2, ou saisissez l’adresse d’une page pour trouver chaque texte sous le minimum de contraste, avec ses couleurs mesurées et la couleur conforme la plus proche.

Calculateur de contraste

Saisissez une couleur de texte et une couleur d’arrière-plan. Tout est calculé dans votre navigateur.

Voici à quoi ressemble un texte normal de 16 pixels.

Gros texte de 24 pixels

Un contour de bouton

Rapport de contraste4.54:1

Résultats WCAG 2.2 pour ces couleurs
Texte normal, AAWCAG 1.4.3, exige 4.5:1Réussi
Gros texte, AAWCAG 1.4.3, exige 3:1Réussi
Texte normal, AAAWCAG 1.4.6, exige 7:1Échec
Gros texte, AAAWCAG 1.4.6, exige 4.5:1Réussi
Icônes, bordures et champs de formulaireWCAG 1.4.11, exige 3:1Réussi

Couleurs de texte conformes les plus proches sur cet arrière-plan

Un gros texte mesure au moins 24 pixels, ou 18,66 pixels en gras. Les rapports sont arrondis à l’inférieur : 4.499:1 s’affiche donc 4.49:1 et échoue, comme le veulent les WCAG.

Ou analysez une page pour trouver le texte peu contrasté

Gratuit. Vérifie l’adresse que vous saisissez en 20 secondes environ.

Ce que vérifie cet outil

  • Le rapport WCAG de deux couleurs quelconques

    Le calculateur utilise la formule de luminance relative des définitions des WCAG 2.2 et affiche le résultat pour le texte normal, le gros texte et les composants d’interface, aux niveaux AA et AAA. Il fonctionne dans votre navigateur.

  • Une couleur conforme, calculée pour vous

    Quand une paire échoue, il trouve la couleur de texte de même teinte la plus proche qui atteint 4.5:1 ou 7:1, pour que vous modifiiez le moins possible votre design.

  • Chaque texte peu contrasté d’une page

    L’analyse de page exécute la règle color-contrast d’axe-core dans un vrai navigateur Chrome et liste chaque élément en échec avec sa couleur de texte, sa couleur d’arrière-plan, sa taille de police et son rapport.

  • Regroupé par paire de couleurs

    Les échecs sont regroupés par couleur de texte et d’arrière-plan, car modifier une seule couleur du thème corrige généralement tous les éléments qui l’utilisent.

  • Le bon seuil pour le gros texte

    Un texte d’au moins 24 pixels, ou de 18,66 pixels en gras, doit atteindre 3:1 au lieu de 4.5:1. L’analyse applique à chaque élément le bon seuil d’après sa taille et sa graisse calculées.

  • Ce qui n’a pas pu être mesuré, et pourquoi

    Le texte placé sur des images, des dégradés ou des éléments qui se chevauchent est listé à part avec la raison, pour que vous sachiez exactement quoi vérifier à l’œil.

Ce qu’il ne peut pas vérifier

  • Mesurer le texte placé sur des photos, des dégradés ou des vidéos. Un logiciel ne peut pas savoir quelle partie d’une image se trouve derrière chaque lettre : ces textes sont donc listés pour que vous les vérifiiez.
  • Vérifier le survol, le focus ou les autres états. L’analyse voit la page telle qu’elle se charge ; vérifiez ces couleurs avec le calculateur.
  • Analyser les icônes, les bordures et les champs de formulaire de la page pour le critère WCAG 1.4.11. Le calculateur affiche le résultat à 3:1 pour toute paire que vous saisissez.
  • Lire le texte intégré à une image, comme une bannière dont les mots font partie de l’image.
  • Tester plus que la page que vous saisissez. L’analyse gratuite complète teste jusqu’à cinq pages clés.

Pourquoi c’est important

Le contraste insuffisant est l’échec d’accessibilité le plus courant sur le web. L’analyse 2026 de WebAIM portant sur le million de pages d’accueil les plus visitées a trouvé du texte peu contrasté sur 83,9 % d’entre elles, avec en moyenne 34 occurrences par page.

Un texte pâle est difficile à lire pour les personnes malvoyantes ou atteintes d’un trouble de la vision des couleurs, et pour quiconque utilise son téléphone en plein soleil. Le critère de succès 1.4.3 des WCAG 2.2, de niveau AA, fixe le minimum à 4.5:1 pour le texte normal et à 3:1 pour le gros texte.

C’est aussi l’un des problèmes les moins coûteux à corriger : sur la plupart des sites, une poignée de couleurs du thème provoquent presque tous les échecs, et les modifier corrige toutes les pages d’un coup.

Comment lire les résultats

Rapport de contraste
De 1:1 (deux fois la même couleur) à 21:1 (noir sur blanc). Les rapports sont arrondis à l’inférieur : une paire affichée à 4.49:1 n’atteint donc pas le minimum de 4.5:1.
Texte normal, AA (4.5:1)
Le minimum pour le texte courant, les liens, les étiquettes et le texte des boutons selon le critère WCAG 1.4.3.
Gros texte, AA (3:1)
Pour un texte d’au moins 24 pixels, ou de 18,66 pixels en gras. Les WCAG définissent le gros texte comme 18 points, ou 14 points en gras.
AAA (7:1 et 4.5:1)
Le niveau renforcé du critère WCAG 1.4.6. Il n’est pas nécessaire pour la conformité AA, mais il aide davantage de lecteurs.
Icônes, bordures et champs de formulaire (3:1)
Le critère WCAG 1.4.11 demande un rapport de 3:1 avec les couleurs adjacentes pour les parties des commandes et des graphiques que les personnes doivent voir pour les utiliser.
Texte en échec
Chaque élément que l’analyse a mesuré sous son seuil, avec son sélecteur, ses couleurs, sa taille et son rapport. Ouvrez-en un pour voir son balisage et, si elle est disponible, une capture d’écran.
À vérifier à l’œil
Le texte qu’axe-core n’a pas pu mesurer, avec la raison, par exemple une image ou un dégradé à l’arrière-plan.

Comment corriger les problèmes les plus courants

  • Texte gris sur fond blanc

    #767676 est à peu près le gris le plus clair qui atteint 4.5:1 sur du blanc (4.54:1). Des gris plus clairs comme #999999 (2.84:1) sont une cause fréquente d’échecs dans les pieds de page, les légendes, les textes indicatifs (placeholders) et les prix.

  • Texte blanc sur un bouton aux couleurs de la marque

    Si le texte blanc sur la couleur de votre marque échoue, assombrissez de quelques crans l’arrière-plan du bouton ou utilisez un texte foncé. Vérifiez aussi les couleurs de survol et de focus, qui sont souvent plus claires.

  • Texte indicatif dans les formulaires

    Le texte indicatif (placeholder) reste du texte et doit atteindre 4.5:1. Mieux encore, utilisez une étiquette visible au-dessus du champ, pour que le texte indicatif ne soit pas la seule instruction.

  • Texte sur des images et des carrousels

    Placez le texte sur un fond uni ou semi-transparent, ou ajoutez un voile sombre sur l’image, puis vérifiez la partie la plus claire de l’image qui se trouve derrière le texte.

  • Badges de promotion et petits caractères

    Le texte des commandes désactivées est exempté du critère 1.4.3, mais pas les badges de promotion, les prix ni les mentions légales en petits caractères. Ce sont souvent les textes les plus pâles des pages d’une boutique.

Contraste des couleurs insuffisant : pourquoi c’est important et comment le corriger sur Shopify, WooCommerce et tout autre site

Questions sur cet outil

Quel rapport de contraste les WCAG exigent-elles ?

Pour le niveau AA, 4.5:1 pour le texte normal et 3:1 pour le gros texte (critère de succès 1.4.3), et 3:1 pour les composants d’interface et les graphiques porteurs de sens (1.4.11). Le niveau AAA demande 7:1 et 4.5:1 (1.4.6).

Qu’est-ce qu’un gros texte ?

Les WCAG définissent le texte en grands caractères comme un texte d’au moins 18 points, ou 14 points en gras. En pixels CSS, cela correspond à environ 24 px, ou 18,66 px en gras.

Les logos doivent-ils respecter le minimum de contraste ?

Non. Le critère WCAG 1.4.3 exempte les logotypes et le texte faisant partie d’un logo ou d’un nom de marque, ainsi que le texte purement décoratif et le texte des commandes inactives.

Pourquoi l’analyse place-t-elle le texte sur une image parmi les points à vérifier ?

axe-core mesure des couleurs unies. Quand une image, un dégradé ou un autre élément se trouve derrière le texte, il ne peut pas savoir quelles couleurs se rencontrent : il signale donc l’élément pour qu’une personne le vérifie, au lieu de deviner.

Ai-je besoin d’un contraste AAA ?

Le niveau AAA n’est pas requis pour la conformité de niveau AA, et le W3C ne recommande pas d’exiger le niveau AAA pour des sites entiers. Atteindre 7:1 pour le texte courant reste une bonne pratique lorsque votre design le permet.

L’APCA fait-elle partie des WCAG ?

Non. L’APCA est une autre méthode de calcul du contraste, évoquée pour les WCAG 3, qui sont encore à l’état de projet. Aujourd’hui, la conformité se mesure avec le rapport des WCAG 2 que calcule cet outil.

Sources

Outils associés

Le Rapport Accessibilité ($174, paiement unique) part de l’analyse gratuite complète et y ajoute davantage de pages, la modification à apporter pour chaque constat, un PDF et de nouveaux tests pour vérifier vos corrections.

À propos du Rapport Accessibilité