Quel ratio de contraste WCAG est exigé ?

WCAG 2.1 définit deux seuils. AA - le plancher légal le plus courant - exige 4,5:1 pour le texte normal et 3:1 pour le texte grand (18 pt+, ou 14 pt+ en gras). AAA monte à 7:1 et 4,5:1. Les composants UI non textuels et objets graphiques exigent 3:1 contre leur voisin immédiat.

Comment le ratio est-il calculé ?

C'est le ratio de luminance relative : (L_clair + 0,05) / (L_sombre + 0,05). La luminance est une somme pondérée des canaux RVB gamma-corrigés (0,2126 R + 0,7152 V + 0,0722 B). Le décalage de 0,05 gère les fonds noirs purs proprement. Le résultat va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).

Qu'est-ce que le « texte grand » ?

WCAG définit le texte grand comme 18 pt et plus, OU 14 pt et plus en gras. Soit environ 24 px / 18,66 px en pixels CSS au DPI par défaut de 96. Le texte grand n'a besoin que de 3:1 (AA) ou 4,5:1 (AAA) car des glyphes plus grands restent lisibles à un contraste plus faible - le texte fin et petit nécessite plus de séparation.

Le ratio change-t-il en mode sombre ?

Oui - il ne dépend que des couleurs réellement rendues, donc il faut vérifier les deux modes. Un `#475569` sur `#ffffff` passe AA (6,5:1), mais si votre token de mode sombre passe à `#475569` sur `#0f172a`, vous êtes à 1,6:1 et largement en échec. Testez les deux surfaces ; c'est précisément pour ça que les designers livrent des tokens de couleur clair + sombre, pas une palette unique partagée.

Et pour le texte anti-aliasé ou les images de fond ?

Le ratio WCAG suppose des couleurs unies. Pour un texte sur image, auditez le pixel le pire sous le texte (généralement le plus clair pour du texte sombre). Pour un texte avec fond translucide ou ombre, calculez le ratio contre la couleur effectivement rendue. La plupart des outils - dont celui-ci - ne vérifient que des paires de couleurs unies ; les audits sensibles aux images demandent un autre outil ou une inspection manuelle.

Passer WCAG suffit-il pour l'accessibilité ?

Le contraste est nécessaire mais pas suffisant. Il faut aussi des polices lisibles, du HTML sémantique, des textes alternatifs, le support clavier, des indicateurs de focus (qui doivent eux-mêmes faire 3:1 contre le fond), etc. Le contraste est le test d'accessibilité le plus facile à automatiser, ce qui lui vaut une attention disproportionnée - mais ce n'en est qu'un parmi beaucoup.

Vérificateur de contraste

Vérificateur de contraste WCAG avec ratio en direct, badges AA/AAA et texte d'exemple.

Avant-plan

Arrière-plan

Texte d'exemple

Texte courant à 14 pt regular - test le plus strict pour le contraste de texte normal.

Texte courant à 16 pt regular - taille de texte par défaut du navigateur.

Texte gras grand à 14 pt - compte comme « grand » selon WCAG.

Texte grand à 18 pt regular - seuil « texte grand » WCAG.

Titre - 24 pt, beaucoup d'espace pour respirer.

Ratio de contraste

14.68:1

AA texte normal (4,5:1)Réussi
AA texte grand (3:1)Réussi
AAA texte normal (7:1)Réussi
AAA texte grand (4,5:1)Réussi

Choisissez une couleur d'avant-plan et une d'arrière-plan. Le ratio se met à jour à la saisie, et quatre badges indiquent si la paire passe WCAG AA et AAA pour le texte normal et grand. Le texte d'exemple s'affiche aux tailles prévues par la spec (14 pt regular, 14 pt bold = grand, 18 pt = grand) pour vérifier visuellement, pas seulement par un chiffre.

Comment l'utiliser

Choisissez les couleurs
Utilisez les sélecteurs d'avant-plan et de fond, ou collez des valeurs hex. Le ratio se met à jour en direct.
Lisez les badges
Quatre badges montrent pass/fail pour AA-normal, AA-grand, AAA-normal, AAA-grand. Les badges qui comptent dépendent de votre taille de texte.
Essayez l'inversion
Cliquez sur Inverser pour échanger avant-plan et fond - utile pour concevoir des états renversés (boutons pleins, encadrés inversés).
Vérifiez visuellement
Le texte d'exemple s'affiche aux tailles WCAG réelles. Si le ratio passe mais le texte paraît bruité, votre police est trop fine - essayez une graisse plus forte.

Qu'est-ce que c'est ?

Un vérificateur de contraste calcule le ratio de contraste WCAG entre deux couleurs - généralement texte sur fond - et indique si la paire respecte chaque niveau WCAG. Le ratio est celui des luminances relatives (mesure perceptive de la luminosité), avec un décalage pour stabiliser la formule aux extrêmes. Plus haut = plus lisible ; 4,5:1 est le plancher WCAG AA pour le corps de texte normal, 7:1 celui de AAA.

Quand l'utiliser

Auditer chaque paire texte/fond d'un design system, vérifier les couleurs face aux exigences légales d'accessibilité (Section 508 aux États-Unis, EN 301 549 dans l'UE, AODA en Ontario), choisir des couleurs de marque qui survivent en thème clair et sombre, sélectionner des couleurs d'anneau de focus qui atteignent 3:1 avec l'UI environnante, valider les couleurs d'un graphique contre les lignes de grille, et vérifier une palette choisie avant publication.

Erreurs courantes

Ne tester que la version la plus claire d'un token (le passage en mode sombre échoue souvent). Considérer 3:1 comme « assez bon » pour le corps de texte - c'est le seuil texte grand ; le petit corps demande 4,5:1. Oublier que les exemptions pour texte désactivé existent en WCAG mais n'aident pas l'utilisateur final - si le texte désactivé est illisible, le formulaire est cassé. Valider des paires depuis une capture d'écran - la compression JPEG décale les teintes ; testez toujours les valeurs hex réelles depuis les design tokens.

FAQ

Quel ratio de contraste WCAG est exigé ?: WCAG 2.1 définit deux seuils. AA - le plancher légal le plus courant - exige 4,5:1 pour le texte normal et 3:1 pour le texte grand (18 pt+, ou 14 pt+ en gras). AAA monte à 7:1 et 4,5:1. Les composants UI non textuels et objets graphiques exigent 3:1 contre leur voisin immédiat.
Comment le ratio est-il calculé ?: C'est le ratio de luminance relative : (L_clair + 0,05) / (L_sombre + 0,05). La luminance est une somme pondérée des canaux RVB gamma-corrigés (0,2126 R + 0,7152 V + 0,0722 B). Le décalage de 0,05 gère les fonds noirs purs proprement. Le résultat va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).
Qu'est-ce que le « texte grand » ?: WCAG définit le texte grand comme 18 pt et plus, OU 14 pt et plus en gras. Soit environ 24 px / 18,66 px en pixels CSS au DPI par défaut de 96. Le texte grand n'a besoin que de 3:1 (AA) ou 4,5:1 (AAA) car des glyphes plus grands restent lisibles à un contraste plus faible - le texte fin et petit nécessite plus de séparation.
Le ratio change-t-il en mode sombre ?: Oui - il ne dépend que des couleurs réellement rendues, donc il faut vérifier les deux modes. Un `#475569` sur `#ffffff` passe AA (6,5:1), mais si votre token de mode sombre passe à `#475569` sur `#0f172a`, vous êtes à 1,6:1 et largement en échec. Testez les deux surfaces ; c'est précisément pour ça que les designers livrent des tokens de couleur clair + sombre, pas une palette unique partagée.
Et pour le texte anti-aliasé ou les images de fond ?: Le ratio WCAG suppose des couleurs unies. Pour un texte sur image, auditez le pixel le pire sous le texte (généralement le plus clair pour du texte sombre). Pour un texte avec fond translucide ou ombre, calculez le ratio contre la couleur effectivement rendue. La plupart des outils - dont celui-ci - ne vérifient que des paires de couleurs unies ; les audits sensibles aux images demandent un autre outil ou une inspection manuelle.
Passer WCAG suffit-il pour l'accessibilité ?: Le contraste est nécessaire mais pas suffisant. Il faut aussi des polices lisibles, du HTML sémantique, des textes alternatifs, le support clavier, des indicateurs de focus (qui doivent eux-mêmes faire 3:1 contre le fond), etc. Le contraste est le test d'accessibilité le plus facile à automatiser, ce qui lui vaut une attention disproportionnée - mais ce n'en est qu'un parmi beaucoup.