Color Contrast Checker

Qu’est-ce qu’un Vérificateur de Contraste des Couleurs ?

Cet outil calcule le Contrast Ratio (ratio de contraste) entre une couleur de premier plan (texte) et une couleur d’arrière-plan, puis vérifie si la combinaison répond aux directives d’accessibilité WCAG 2.0 aux niveaux AA et AAA. Il simule également le daltonisme, suggère des corrections pour les paires qui échouent et exporte le code dans plusieurs formats.

Comment Vérifier le Contraste des Couleurs

Choisir les Couleurs

• Color A (premier plan/texte) et Color B (arrière-plan) disposent chacun d’une entrée hex et d’un sélecteur de couleurs.
• La Shade Scale sous chaque sélecteur vous permet d’ajuster finement la luminosité. Cliquez sur une nuance pour l’appliquer instantanément.
• Le Color Wheel ajuste visuellement la teinte de Color A. La couleur complémentaire est affichée en dessous : cliquez pour l’appliquer comme Color B.
• Swap inverse Color A et Color B.

Ce que Signifient les Résultats

Résultat	Ce qu’il montre
Contrast Ratio	Le ratio calculé (1:1 – 21:1). Plus il est élevé, mieux c’est.
A11y Score	Un score d’accessibilité sur 100 basé sur le ratio de contraste.
WCAG AA / AAA	Réussite ou échec pour Normal Text et Large Text à chaque niveau.
Preview	Un aperçu en direct montrant un titre, du texte de corps, un bouton, un badge, une entrée et une carte avec vos couleurs.
Fix Suggestion	Lorsque le contraste échoue au niveau AA, une carte cliquable suggère la nuance valide la plus proche avec son ratio. Cliquez pour appliquer.

Seuils WCAG

Niveau	Normal Text	Large Text
AA	Minimum 4.5:1	Minimum 3:1
AAA	Minimum 7:1	Minimum 4.5:1

• Normal text: moins de 18pt (ou moins de 14pt en gras)
• Large text: 18pt et plus (ou 14pt en gras et plus)

Fonctionnalités Supplémentaires

• Undo / Redo – annulez ou rétablissez vos changements de couleur.
• Share Result – copie une URL intégrant les couleurs actuelles. Toute personne l’ouvrant verra la même paire.
• Pin – sauvegardez jusqu’à 8 paires de couleurs pour les comparer côte à côte. Cliquez sur une paire épinglée pour la recharger.
• Brand Colors – 8 palettes de marques réelles (Spotify, Slack, GitHub, etc.) avec leurs ratios de contraste. Cliquez sur l’une d’elles pour la charger.
• A11y Check – simule 4 types de daltonisme (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) avec le ratio de contraste effectif pour chacun.
• Code Output – génère du code prêt à être collé en CSS, Tailwind 4, Tailwind 3, Flutter et React. Section réductible, ouverte par défaut.
• Randomize / Clear All – génère une paire de couleurs accessible aléatoire ou réinitialise les valeurs par défaut.

Bons Exemples

Exemple 1 : Texte Gris sur Blanc – une Erreur Courante

Un texte gris clair sur fond blanc semble subtil, mais échoue aux tests d’accessibilité.

• Color A : #999999, Color B : #ffffff
• Contrast Ratio : 2.85:1 – Échec AA
• La Fix Suggestion recommande la nuance 600 (#595959) pour un ratio de 4.9:1 – Réussite AA. Cliquez pour l’appliquer.

Exemple 2 : Vérifier la Palette d’une Marque

Cliquez sur Spotify dans la section Brand Colors.

• Color A : #191414 (noir), Color B : #1DB954 (vert)
• Contrast Ratio : 4.9:1 – Réussite AA, Échec AAA
• Épinglez (Pin) cette paire, puis essayez LinkedIn (#ffffff sur #0A66C2, 4.7:1) et comparez.

Exemple 3 : Concevoir un Mode Sombre

Trouver une couleur de texte lisible pour un fond bleu marine foncé.

• Color A : #e0e0e0, Color B : #1a1a2e
• Contrast Ratio : 12.4:1 – Réussite AA et AAA
• Ouvrez A11y Check pour confirmer que les 4 types de daltonisme réussissent également.

Exemple 4 : Flux de Travail du Développeur – Exporter le Code

Après avoir trouvé une bonne paire, développez Code Output et sélectionnez votre framework :

• CSS: propriétés personnalisées --fg et --bg
• Tailwind 4: valeurs de couleurs arbitraires
• React: objet de style en ligne

Copiez l’extrait directement dans votre projet.

Conseils Clés

• Commencez par les Brand Colors. Si vous vérifiez une marque existante, cliquez dessus dans la liste prédéfinie au lieu de saisir manuellement les valeurs hex.
• Utilisez Fix Suggestion. Si le contraste échoue, ne devinez pas : cliquez sur la carte de suggestion pour passer automatiquement à la nuance valide la plus proche.
• Épinglez des paires pour les comparer (Pin). Lors du choix entre plusieurs options de couleur, épinglez chacune d’elles. Vous pourrez les recharger et les comparer côte à côte.
• Vérifiez également le daltonisme. Une paire qui passe les critères WCAG peut toujours être difficile à distinguer pour les utilisateurs daltoniens. Ouvrez la section A11y Check pour vérifier.
• Partagez votre décision. Utilisez Share Result pour envoyer l’URL exacte de la paire de couleurs à un designer ou à un réviseur.

Formule

Les WCAG 2.0 définissent le Contrast Ratio à l’aide de la luminance relative :

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variable	Signification
$CR$	Contrast Ratio
$L_1$	Luminance relative de la couleur la plus claire
$L_2$	Luminance relative de la couleur la plus foncée

La luminance relative est calculée à partir des valeurs sRGB après linéarisation : $L = 0.2126R + 0.7152G + 0.0722B$

Foire aux Questions

Dois-je viser le niveau AA ou AAA ?

Le niveau AA est la norme légale minimale dans la plupart des pays. Le niveau AAA offre une meilleure lisibilité, mais est plus difficile à atteindre pour tous les éléments de conception. Une approche pratique : le niveau AA pour le texte de corps, le niveau AAA pour les informations critiques comme les avertissements ou les erreurs.

Le respect des WCAG garantit-il l’accessibilité pour les utilisateurs daltoniens ?

Le ratio de contraste des WCAG vérifie la luminance, et non la distinction des teintes. Une paire peut respecter les normes WCAG, mais sembler identique à une personne atteinte de daltonisme. Utilisez la section A11y Check pour vérifier et complétez toujours la couleur avec des icônes ou des étiquettes de texte.

Quels formats de code cet outil prend-il en charge ?

Propriétés personnalisées CSS, Tailwind CSS v3 et v4 (valeurs arbitraires), objets Color() de Flutter et styles en ligne React. Sélectionnez le format dans la section Code Output.

Puis-je sauvegarder et partager mes paires de couleurs ?

Oui. Pin sauvegarde jusqu’à 8 paires localement pour les comparer. Share Result copie une URL intégrant les couleurs : toute personne l’ouvrant verra exactement la même paire.