Choisir les couleurs
Entrez des codes hexadecimaux ou utilisez les selecteurs. Le diagnostic se met a jour a chaque frappe.
Methodologie WCAG
Le rapport de contraste compare la luminance relative du texte et celle du fond. WCAG calcule ce rapport de 1:1 à 21:1 avec la formule (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus claire.
- AA texte normal : au moins 4,5:1.
- AAA texte normal : au moins 7:1.
- AA grand texte : au moins 3:1.
- AAA grand texte : au moins 4,5:1.
Sources et verification
Dernière revue : 2026-05-16. Les seuils affichés reprennent les critères WCAG 2.x de contraste minimum et renforcé, utilisés par les validateurs comme WebAIM et les guides MDN.
Limites et disclaimer
Ce calculateur est une aide de conception et d'audit rapide. Il ne remplace pas un audit accessibilité complet : vérifiez aussi les états focus, les liens, les icônes, les erreurs de formulaire, la taille de police, les contrastes non textuels et les tests avec lecteurs d'écran.
Bonnes pratiques
- Testez les couleurs finales dans le composant reel, pas seulement dans une maquette.
- Évitez d'utiliser la couleur seule pour signaler une erreur ou une réussite.
- Contrôlez aussi les états hover, focus, disabled et dark mode.
- Gardez une trace du ratio dans votre design system.