Vérificateur de contraste des couleurs
Vérifiez le contraste texte/fond selon les seuils WCAG 2.2 AA et AAA. Composez les transparences sur un canevas opaque, prévisualisez du texte normal ou grand et exportez le rapport.
Utilisez un nom CSS, HEX, RGB/RGBA ou HSL/HSLA. Les couleurs transparentes sont composées sur le support choisi avant le calcul.
| Usage | Minimum | Résultat |
|---|---|---|
| Texte normal · AA | 4.5:1 | Conforme |
| Texte normal · AAA | 7:1 | Conforme |
| Grand texte · AA | 3:1 | Conforme |
| Grand texte · AAA | 4.5:1 | Conforme |
| Interface et graphiques essentiels · AA | 3:1 | Conforme |
Le verdict utilise le rapport non arrondi. Un grand texte mesure au moins 24 CSS px, ou environ 18,67 CSS px en gras. Le contraste de l’interface dépend des couleurs adjacentes réelles ; cette paire ne prouve pas une conformité WCAG complète.
Rendez chaque mot facile à lire.
L’aperçu utilise les seuils du texte normal. Fond effectif : #FFFFFF (arrondi pour l’affichage).
Trois étapes simples.
- Saisissez les couleurs du texte et du fond en noms CSS, HEX, RGB ou HSL.
- Choisissez le canevas opaque derrière les transparences et examinez les résultats.
- Prévisualisez le texte, échangez les couleurs et copiez ou téléchargez le rapport.
Quelques points à connaître.
La décision utilise la luminance relative sRGB et le rapport non arrondi. Grand texte : au moins 24 pixels CSS, ou environ 18,67 en gras. Seule une paire de couleurs unies est vérifiée ; dégradés, images, rendu des polices, couleurs adjacentes et conformité complète demandent une autre analyse.
Comment fonctionne la confidentialité →Questions fréquentes.
Pourquoi 4,50:1 peut-il échouer ?
L’affichage est arrondi à deux décimales. Le résultat utilise la valeur exacte : juste en dessous de 4,5, le seuil AA du texte normal n’est pas atteint.
Quel est l’effet de la transparence ?
Le fond est d’abord composé sur le canevas opaque, puis le texte sur ce fond effectif. Le contraste est ensuite calculé. Un autre canevas peut modifier le résultat.