Vérificateur de Contraste des Couleurs (WCAG)

Vérifiez si une paire de couleurs texte/arrière-plan respecte les normes d'accessibilité WCAG AA et AAA. Obtenez le ratio de contraste et le statut de conformité en temps réel.

Studio · environnement neutre

Rapport de contraste

— : 1

AA · texte courant ≥ 4.5

AA · grand texte ≥ 3.0

AAA · texte courant ≥ 7.0

AAA · grand texte ≥ 4.5

Correction en un clic · teinte conservée

Couleur du texte

Arrière-plan

Spécimen

Fonctionnalités

Affiche le rapport de contraste

Statut WCAG AA et AAA

Aperçu du texte en direct

Texte normal et grand texte

Comment Utiliser

1. Définissez les couleurs du texte et du fond — le spécimen et le verdict WCAG se mettent à jour en direct.

2. Changez de spécimen (typo / article / interface) pour juger la paire en situation réelle ; la touche S permute les deux couleurs.

3. Si un niveau échoue, utilisez la correction en un clic — elle n'ajuste que la luminosité et conserve la teinte — ou copiez le rapport WCAG.

À propos de cet outil

Un texte dont la luminosité est trop proche de celle de son fond est difficile à lire pour tout le monde, et illisible pour certaines personnes. Les Règles pour l'accessibilité des contenus Web (WCAG) mesurent cela par un rapport de contraste allant de 1:1 à 21:1, fondé sur la luminance relative des deux couleurs. Le niveau AA exige au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (24 px, ou environ 18,66 px en gras) ; le niveau AAA relève ces seuils à 7:1 et 4,5:1. Ce vérificateur calcule le rapport en direct, indique la réussite ou l'échec pour les quatre seuils et affiche un vrai spécimen typographique, un article et une interface pour juger la paire en contexte. Si un niveau échoue, il propose la couleur de texte la plus proche qui réussit, en ne modifiant que la luminosité.

Questions Fréquentes

Comment le rapport de contraste est-il calculé ?

Chaque couleur est convertie en luminance relative avec la formule sRGB des WCAG 2, puis le rapport vaut (L1 + 0,05) ÷ (L2 + 0,05), où L1 est la couleur la plus claire. Du noir sur du blanc donne le maximum de 21:1 ; deux couleurs identiques donnent 1:1.

Qu'est-ce qui compte comme grand texte ?

Les WCAG définissent le grand texte comme au moins 18 points (24 pixels CSS) en graisse normale, ou 14 points (environ 18,66 pixels CSS) en gras. Le grand texte n'a besoin que de 3:1 pour AA et de 4,5:1 pour AAA, car les lettres plus grandes se lisent plus facilement.

Réussir le niveau AA signifie-t-il que mon design est accessible ?

Le contraste n'est qu'une exigence parmi d'autres. Les polices fines, le texte sur photo, les petites tailles et la couleur utilisée comme seul signal peuvent encore poser problème : testez sur de vrais écrans et associez le contraste à d'autres vérifications d'accessibilité.

Comment fonctionne la correction proposée ?

Elle conserve la teinte de votre couleur de texte et cherche des versions plus claires ou plus foncées jusqu'à atteindre le rapport visé. Si aucune luminosité n'y parvient sur votre fond, l'outil l'indique et c'est le fond qu'il faut changer.

Les règles de contraste s'appliquent-elles aux icônes et aux boutons ?

Oui. Les WCAG 2.1 demandent au moins 3:1 pour les éléments non textuels porteurs de sens, comme les icônes, les bordures de champs et les indicateurs de focus. Les graphismes purement décoratifs et les commandes désactivées en sont exemptés.