Vérificateur de contraste des couleurs (WCAG)
Vérifiez le rapport de contraste entre la couleur du texte et celle du fond selon les niveaux WCAG AA et AAA, pour le texte normal, le grand texte et les composants d'interface, avec des corrections proposées.
Chargement de Vérificateur de contraste…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Vérificateur de contraste
- 1
Ouvrez Vérificateur de contraste sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Un texte peu contrasté est l'un des problèmes d'accessibilité les plus courants sur le web, et il gêne tous ceux qui lisent sur un téléphone en plein soleil. Ce vérificateur de contraste des couleurs calcule le rapport de contraste entre une couleur de texte et une couleur de fond et indique s'il respecte les règles WCAG 2. En cas d'échec, il propose les couleurs les plus proches qui réussissent, pour corriger sans changer votre design.
Comment vérifier le contraste
- Saisissez la couleur du texte et celle du fond, ou choisissez-les visuellement.
- Lisez le rapport de contraste et le résultat réussi ou échoué pour chaque niveau.
- Regardez l'aperçu en direct avec du texte normal, de grands titres et des petits caractères.
- Si un niveau échoue, utilisez une correction proposée, ou inversez les deux couleurs pour tester l'inverse.
- Copiez le CSS de la combinaison valide.
Exigences de contraste WCAG
| Élément | AA | AAA |
|---|---|---|
| Texte normal | 4,5:1 | 7:1 |
| Grand texte (24px, ou 18,66px en gras) | 3:1 | 4,5:1 |
| Composants d'interface et icônes | 3:1 | non défini |
Le niveau AA est celui auquel se réfèrent la plupart des lois et des politiques d'accessibilité. Le niveau AAA est plus strict et recommandé pour les longs textes. Un texte en gras d'environ 18px compte aussi comme grand texte.
Comment le rapport est calculé
L'outil convertit les deux couleurs en luminance relative, une mesure de la luminosité perçue, puis divise la plus claire plus 0,05 par la plus sombre plus 0,05. Le résultat va de 1:1 (aucun contraste, même couleur) à 21:1 (noir sur blanc).
Conseils pour des couleurs accessibles
- Le texte gris sur blanc est le coupable habituel : #767676 est à peu près le gris le plus clair qui réussit encore AA pour un texte normal sur blanc.
- Vérifiez chaque état : textes indicatifs, boutons désactivés, liens, couleurs de survol et texte sur image.
- Ne comptez pas uniquement sur la couleur pour transmettre un sens, comme le rouge pour une erreur ; ajoutez une icône ou un texte.
- Testez tôt les couleurs de marque, car les jaunes vifs et les bleus clairs échouent souvent comme couleur de texte.
Vous concevez une palette complète ? Le générateur de palette de couleurs affiche le contraste de chaque couleur, et le convertisseur de couleurs traduit les valeurs entre HEX, RGB et HSL.
Questions fréquentes
Quel rapport de contraste faut-il pour WCAG AA ?
Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants d'interface comme les boutons, les bordures de formulaire et les icônes.
Qu'est-ce qui compte comme grand texte ?
Un texte d'au moins 24px, ou un texte en gras d'au moins 18,66px environ (14 points). Le grand texte demande un rapport de 3:1 pour AA et de 4,5:1 pour AAA.
Quelle est la différence entre AA et AAA ?
AA est le niveau standard cité par la plupart des lois sur l'accessibilité. AAA est plus strict, 7:1 pour le texte normal, et recommandé pour les longs passages de texte.
Quel est le rapport de contraste maximal ?
21:1, soit du texte noir sur fond blanc ou l'inverse.
La couleur de ma marque échoue. Que faire ?
Utilisez une correction proposée, qui garde la teinte mais ajuste la luminosité jusqu'à réussir, ou réservez la couleur de marque aux grands titres et aux fonds plutôt qu'au corps de texte.
L'outil vérifie-t-il le texte sur les images ?
Non. Il vérifie deux couleurs pleines. Pour un texte sur photo, testez la couleur contre les zones les plus claires et les plus sombres de l'image derrière le texte.