Vérificateur de contraste des couleurs

Vérifiez le contraste des textes normaux et de grande taille à partir des couleurs de premier plan et d'arrière-plan.

Vérificateur de contraste des couleurs

Un résultat côté navigateur pour la planification et la référence.

Premier planArrière-plan

CSS / HEX

GUIDE

Que vérifier avant de l'utiliser

Quand cet outil est utile

Utilisez-le avant de publier les couleurs de premier plan et d’arrière-plan pour le texte principal, les libellés ou les boutons. Saisissez deux couleurs HEX pour voir leur ratio de contraste ainsi que les seuils de texte normal et de grand texte.

Comment le résultat est obtenu

Le calcul linéarise les canaux sRGB, calcule la luminance relative, puis divise la luminance la plus claire plus 0,05 par la luminance la plus sombre plus 0,05. Il compare ensuite ce ratio aux seuils de texte de 3:1, 4,5:1 et 7:1.

Exemple pratique et interprétation

En saisissant la couleur de premier plan #111111 sur le fond #FFFFFF, on obtient un ratio élevé. Vérifiez d’abord AA normal pour le texte de corps; pour une combinaison réservée aux grands titres, consultez aussi le résultat AA large.

Portée et limites

Valider un ratio ne suffit pas à clore un audit d’accessibilité. Testez la vraie taille et le vrai poids de police, les états interactifs, le texte placé sur des images et toute information transmise uniquement par la couleur.

Questions fréquentes

Comment transférer une couleur depuis le vérificateur de contraste des couleurs vers une autre application ?

Utilisez le bouton Copier sous le résultat pour copier un texte CSS, HEX ou HSL. Vérifiez que l’application de destination interprète le même format de couleur.

La couleur écran issue du vérificateur de contraste des couleurs correspond-elle à l’impression ?

Pas automatiquement. Les écrans RGB émissifs et le papier encre réfléchissants utilisent des gamuts et des modèles de mélange différents, donc les profils d’impression et les épreuves restent nécessaires.

Puis-je valider un design token avec le vérificateur de contraste des couleurs seul ?

Utilisez-le d’abord comme candidat, puis testez le vrai fond, le mode sombre, les états interactifs et le contraste du texte avant de nommer et d’approuver un token.