Vérifier le contraste de couleur WCAG en ligne : AA, AAA et texte large

Un gris #999999 sur blanc donne un ratio d'environ 2,85:1, bien en dessous du seuil AA de 4,5:1. C'est pourtant l'un des choix de design les plus courants pour les textes secondaires, les placeholders et les légendes.

Les couleurs de marque "douces" (bleu pastel, vert menthe, orange clair) sont souvent choisies pour l'identité visuelle sans jamais être testées avec du texte blanc dessus.

Un titre blanc sur une photo d'en-tête fonctionne sur la zone sombre du ciel, mais devient illisible sur la zone claire d'un nuage. Le contraste varie selon l'endroit de l'image où se trouve le texte.

outline: none sans remplacement casse la navigation au clavier. Le contraste non textuel (SC 1.4.11) s'applique aussi aux indicateurs de focus.

Le critère WCAG 1.4.3 (Contrast Minimum) impose un ratio d'au moins 4,5:1 pour le texte normal au niveau AA. Le niveau AAA, plus strict (critère 1.4.6), monte l'exigence à 7:1. Presque toutes les obligations légales visent le niveau AA (RGAA en France, EN 301 549 en Europe, ADA aux États-Unis). Le niveau AAA reste recommandé, mais il est rarement exigé pour un site entier.

WCAG définit le « texte large » comme un texte d'au moins 24 px, soit 18 pt. Un texte d'au moins 18,67 px, soit 14 pt, en fait aussi partie s'il est en gras (graisse de 700 ou plus). En dessous de ces seuils, le texte est considéré comme normal, même s'il paraît imposant. FastMinify détermine le seuil applicable à partir de la taille et de la graisse saisies.

Depuis WCAG 2.1, le critère 1.4.11 (Non-text Contrast) impose un ratio d'au moins 3:1 entre les composants d'interface et leur couleur adjacente. Cela vise les bordures de champs, les cases à cocher, les icônes porteuses de sens et les indicateurs de focus.

Le ratio WCAG 2.x compare la luminance relative des deux couleurs. Cette valeur comprise entre 0 et 1 dérive des composantes RVB linéarisées, pondérées 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu. L'œil humain perçoit en effet le vert bien plus intensément que le bleu. Le ratio final est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire. C'est pourquoi deux couleurs « différentes à l'œil » peuvent donner un ratio proche. À l'inverse, deux teintes d'apparence voisine peuvent avoir des luminances très éloignées.

Le ratio WCAG 2.x a une limite connue : il traite « noir sur blanc » et « blanc sur noir » de façon symétrique, ce qui ne correspond pas toujours à la perception réelle. APCA (Advanced Perceptual Contrast Algorithm), pressenti pour WCAG 3, tient compte de la polarité, c'est-à-dire du texte clair sur fond sombre ou l'inverse. Il tient aussi compte de la taille de police, pour un jugement plus fin. FastMinify propose une superposition APCA facultative en complément du ratio WCAG 2.2 officiel, et non en remplacement, puisque WCAG 3 n'est pas encore une norme publiée.

Ouvrez le vérificateur de contraste, collez votre couleur de premier plan et votre couleur de fond dans n'importe quel format CSS (HEX, RGB, HSL, OKLCH, nommée). Le ratio et les niveaux AA, AAA et non textuel se recalculent en direct. Ajustez la taille et la graisse du texte pour voir le seuil « texte large » s'appliquer automatiquement.

Un bouton primaire a souvent trois variantes de couleur (normal, hover, disabled) qu'on oublie de tester individuellement.

Plutôt que de tester une à une les combinaisons d'un design system, collez vos couleurs de texte dans Couleurs des lignes et vos couleurs de fond dans Couleurs des colonnes. Saisissez une couleur par ligne, jusqu'à 16 par axe. Le résultat est une grille avec le verdict de chaque croisement, que vous pouvez filtrer par niveau (AAA, AA, AA grand ou Échecs).

Chaque vérification (couleurs, taille du texte, mode matrice ou paire, options APCA) est encodée dans l'URL. Copiez le lien depuis la barre d'adresse, ou utilisez le bouton Partager ces réglages. Collez-le ensuite dans votre pull request, un ticket ou un message à votre designer. La page se rouvre exactement dans le même état.

Un vérificateur manuel convient à la conception d'une palette. Pour éviter les régressions, il faut aussi vérifier le contraste automatiquement à chaque pull request. axe-core et Lighthouse CI détectent la plupart des échecs de contraste sur du texte statique. Ils ont plus de mal avec le texte posé sur une image ou un dégradé.

Vérification manuelle rapide, sans installation ni donnée envoyée. Le mode matrice, unique parmi ces options, permet d'auditer un design system complet en un seul passage, et l'URL partageable facilite la collaboration entre designers et développeurs. Limite : c'est une vérification manuelle qui ne remplace pas un audit automatisé en CI, et elle ne détecte pas le contraste sur une image ou un dégradé complexe.

L'inspecteur de couleur intégré affiche le ratio de contraste directement sur l'élément sélectionné dans la page réelle, avec les styles calculés, sans outil externe. Limite : un élément à la fois, ce qui devient fastidieux sur une palette complète, sans mode matrice ni partage par lien.

Un audit automatisé intégré au pipeline CI détecte systématiquement les régressions de contraste à chaque pull request, et couvre l'accessibilité au-delà du seul contraste. Limite : il ne remplace pas la phase de conception de la palette en amont, et peut produire des faux négatifs sur du texte superposé à une image.