Vérificateur de Contraste de Couleurs
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Qu'est-ce que Vérificateur de Contraste de Couleurs
Cet outil mesure le ratio de contraste entre une couleur de texte et une couleur d'arrière-plan, puis le compare aux directives d'accessibilité WCAG 2.1. Il affiche un aperçu en direct des deux couleurs ensemble et indique si la paire réussit AA ou AAA pour le texte normal et le texte large, pour repérer les problèmes de lisibilité avant qu'ils n'arrivent en production.
Comment utiliser
- Choisissez ou saisissez la couleur du texte dans le premier champ, en code HEX.
- Choisissez ou saisissez la couleur d'arrière-plan dans le second champ.
- Consultez le ratio de contraste et les badges de réussite ou d'échec pour AA et AAA.
- Cliquez sur le bouton d'inversion pour tester les couleurs en sens inverse.
- Copiez l'URL pour partager la paire exacte avec votre équipe.
Quand l'utiliser
Vous choisissez la couleur du texte d'une nouvelle maquette et vous n'êtes pas sûr qu'elle soit assez lisible ? Saisissez votre couleur de texte et d'arrière-plan, par exemple #767676 sur #FFFFFF, et vous obtenez un ratio de 4.54:1 : réussi pour AA en texte normal, échoué pour AAA. C'est tout l'écart entre un produit accessible et un point relevé lors d'un audit, que vous révisiez le site d'un client ou lanciez votre propre application.
Questions fréquentes
Quel est un bon ratio de contraste pour le texte ?
WCAG AA exige au moins 4.5:1 pour le texte normal et 3:1 pour le texte large (18pt ou 14pt en gras et plus). WCAG AAA est plus strict : 7:1 pour le texte normal et 4.5:1 pour le texte large.
Quel est le ratio de contraste maximal possible ?
21:1, le ratio entre le noir pur (#000000) et le blanc pur (#FFFFFF). Aucune paire de couleurs ne le dépasse.
Pourquoi mes couleurs ont échoué AA alors que le design me semble bien ?
Le ratio de contraste mesure l'accessibilité, pas le goût personnel. Une personne malvoyante, ou n'importe qui regardant un écran en plein soleil, a besoin de plus de contraste qu'une paire qui semble acceptable pour une vision typique.
Cet outil vérifie-t-il aussi le daltonisme ?
Non. L'outil vérifie le contraste de luminance selon la formule WCAG, ce qui profite à tous les utilisateurs, y compris de nombreuses formes de daltonisme, mais ne simule pas des déficiences spécifiques de la vision des couleurs.
Puis-je partager cet outil avec mes données pré-remplies ?
Oui. L'URL se met à jour automatiquement pendant que vous choisissez les couleurs. Copiez le lien depuis la barre d'adresse ou utilisez le bouton Partager, quiconque l'ouvre verra vos couleurs exactes déjà remplies.
Outils connexes
Calculateur de Ratio d'Aspect
Calculez le ratio d'aspect, trouvez la largeur ou la hauteur manquante et redimensionnez images et vidéos en gardant les proportions. Gratuit.
Décodeur Base64
Décodez des chaînes Base64 en texte brut instantanément. Supporte la sortie Unicode complète avec emojis. Décodeur Base64 gratuit.
Encodeur Base64
Encodez du texte en Base64 instantanément dans votre navigateur. Supporte Unicode, emojis et caractères spéciaux. Encodeur Base64 gratuit.