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

Un gris #999999 sur blanc affiche 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, placeholders et 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 de héros fonctionne sur la zone sombre du ciel, mais devient illisible sur la zone claire du nuage — le contraste varie selon l'endroit de l'image.

outline: none sans remplacement casse la navigation clavier — et c'est un contraste non-texte (SC 1.4.11) qui s'applique aussi aux indicateurs de focus, pas seulement au texte.

Le critère WCAG 1.4.3 (Contrast Minimum) impose un ratio d'au moins 4.5:1 pour le texte normal en niveau AA. Le niveau AAA, plus strict (critère 1.4.6), monte l'exigence à 7:1. AA est le niveau visé par la quasi-totalité des obligations légales (RGAA en France, EN 301 549 en Europe, ADA aux États-Unis) ; AAA reste recommandé mais rarement exigé pour l'ensemble d'un site.

WCAG définit le "texte large" comme du texte d'au moins 24px (18pt), ou d'au moins 18.67px (14pt) s'il est en gras (graisse ≥ 700). En dessous de ces seuils, le texte est considéré comme normal même s'il paraît visuellement imposant. FastMinify calcule automatiquement le seuil applicable à partir de la taille et de la graisse renseignées.

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

Le ratio WCAG 2.x compare la luminance relative des deux couleurs (une valeur de 0 à 1 dérivée des composantes RVB linéarisées, pondérées 0.2126 pour le rouge, 0.7152 pour le vert, 0.0722 pour le bleu — l'œil humain perçoit 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 pour cela que deux couleurs "différentes à l'œil" peuvent donner un ratio proche, tandis que deux teintes qui semblent similaires peuvent avoir des luminances très éloignées.

Le ratio WCAG 2.x a une limite connue : il traite le contraste "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, prend en compte la polarité (texte clair sur fond sombre vs l'inverse) et la taille de police pour un jugement plus fin. FastMinify propose un overlay APCA optionnel en complément du ratio WCAG 2.2 officiel — pas 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 badges AA/AAA/non-texte 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 votre liste de couleurs de texte en lignes et votre liste de couleurs de fond en colonnes (jusqu'à 16 couleurs par axe). Le résultat affiche une grille avec le verdict de chaque croisement, filtrable par niveau de conformité (AAA / AA / AA-large / échec).

Chaque vérification (couleurs, taille de texte, mode matrice ou paire, options APCA) est encodée dans l'URL. Copiez le lien depuis la barre d'adresse et collez-le dans une pull request, un ticket ou un message à votre designer — la page se rouvre exactement dans le même état.

Un vérificateur manuel est parfait pour concevoir une palette ; pour éviter les régressions, le contraste doit aussi être vérifié 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 sur image ou les dégradés).

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 — aucun outil externe nécessaire. 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.