Vérificateur de Contraste
Vérifiez le ratio de contraste des couleurs pour la conformité WCAG. Testez les couleurs de premier plan et d'arrière-plan.
The quick brown fox jumps over the lazy dog
Texte courant en 16px — voilà ce que vos visiteurs liront réellement.
Directives d'accessibilité WCAG
AA Normal (4.5:1): Contraste minimum pour le texte normal. Requis pour la plupart des contenus web.
AA Large (3:1): Contraste minimum pour le texte large (18pt+ ou 14pt+ gras).
AAA Normal (7:1): Contraste amélioré pour le texte normal. Norme d'accessibilité la plus élevée.
AAA Large (4.5:1): Contraste amélioré pour le texte large. Recommandé pour le contenu critique.
Préréglages
Historique
Directives d'accessibilité WCAG
Le vérificateur de contraste de couleurs vous aide à garantir que votre site web respecte les normes d'accessibilité WCAG. Il calcule le ratio de contraste entre les couleurs de premier plan et d'arrière-plan.
Outils populaires
À propos de Vérificateur de Contraste
Définissez une couleur de premier plan et une couleur d'arrière-plan par code hexadécimal ou avec le sélecteur de couleur, et ce vérificateur indique le rapport de contraste WCAG 2.1, avec une mention réussite ou échec pour AA texte normal (4.5:1), AA grand texte (3:1), AAA normal (7:1) et AAA grand texte (4.5:1). Un échantillon en direct montre la paire en taille de titre et en taille de texte courant, ce dont les designers ont besoin avant de valider une palette. Le calcul de luminance relative se fait dans votre navigateur, et les paires enregistrées restent dans le stockage local.
Cas d'utilisation
Comment utiliser
Définissez la couleur de votre texte dans le champ Foreground, à l'aide du nuancier ou en saisissant une valeur hexadécimale telle que #4f46e5 dans la case voisine.
Définissez de la même façon la couleur de la page dans le champ Background : le grand aperçu Aa se redessine aussitôt et le badge du rapport, en haut à droite, se met à jour.
Lisez les quatre cartes WCAG sous l'aperçu - AA Normal, AA Large, AAA Normal et AAA Large - chacune affichant une coche verte ou une croix rouge par rapport à son seuil.
Appuyez sur les flèches d'inversion entre les deux champs de couleur pour tester la combinaison inverse, ou cliquez sur un préréglage comme White on Dark ou GitHub Dark pour charger une association connue.
Appuyez sur Copy sous le grand chiffre du rapport pour copier ce rapport et les quatre verdicts de réussite ou d'échec dans le presse-papiers, ou sur Save pour conserver la paire dans la barre History.
Astuces Pro
- Collez directement votre contenu : le vérificateur de contraste des couleurs reconnaît les formats d'entrée courants et applique automatiquement des réglages par défaut pertinents.
- Utilisez les raccourcis clavier (Ctrl/Cmd+A pour tout sélectionner, Ctrl/Cmd+C pour copier) afin de gagner du temps dans le vérificateur de contraste des couleurs.
- Pour les contenus très volumineux, découpez-les en morceaux : un onglet de navigateur encaisse plusieurs mégaoctets de texte, mais l'analyse de gros volumes peut figer brièvement l'interface.
- Le vérificateur de contraste des couleurs n'enregistre ni ne conserve vos données. Si vous avez besoin d'un historique, copiez les résultats importants dans un fichier local ou une application de notes.
- Associez le vérificateur de contraste des couleurs aux autres outils du site (formateurs, convertisseurs, encodeurs) pour construire des chaînes de traitement complètes sans quitter votre navigateur.
Questions fréquemment posées
Oui, totalement gratuit : sans inscription, sans clé API, sans filigrane et sans limite d'utilisation.
Non. Le vérificateur de contraste des couleurs fonctionne entièrement côté client, dans votre navigateur. Vos données ne passent jamais par nos serveurs.
Il n'y a pas de limite stricte, mais attendez-vous à des ralentissements au-delà de quelques mégaoctets, selon la mémoire de votre appareil.
Oui. Les résultats produits avec le vérificateur de contraste des couleurs vous appartiennent et s'utilisent librement dans tout projet personnel ou commercial.
L'essentiel du traitement repose sur du JavaScript côté client : après le premier chargement, vous pouvez souvent continuer à travailler sans connexion réseau.
Aucune. Comme le vérificateur de contraste des couleurs s'exécute dans votre navigateur, vous pouvez traiter autant de contenus que votre matériel le permet, sans clé API ni bridage.