Outils couleur

Vérificateur de contraste

Vérifiez les ratios de contraste WCAG entre deux couleurs. Voyez les badges réussite/échec pour AA et AAA en taille normale et large, avec un aperçu en direct.

Premier plan (texte)

Arrière-plan

Exemple de grand titre

Ceci est du texte de corps de taille normale — la ligne que vous lirez pour vos paragraphes et libellés de formulaire.

Ceci est du texte fin — légendes, notes de bas de page, textes d'aide.

Ratio de contraste

WCAG AA — Normal --

WCAG AA — Grand --

WCAG AAA — Normal --

WCAG AAA — Grand --

Qu'est-ce que le ratio de contraste ?

Le ratio de contraste est un nombre de 1:1 (aucun contraste) à 21:1 (noir pur sur blanc pur) qui décrit à quel point une couleur de premier plan se distingue de son arrière-plan. Les WCAG (Web Content Accessibility Guidelines) utilisent ce nombre comme référence légale pour déterminer si un texte est lisible par les personnes malvoyantes, daltoniennes, ou par toute personne lisant sur un écran sujet aux reflets. Plus le ratio est élevé, plus le choix est sûr — et plus votre interface est universellement lisible.

Comment utiliser ce vérificateur

Choisissez votre couleur de texte dans le sélecteur premier plan et la surface derrière dans le sélecteur arrière-plan — ou collez directement des codes hex. L'aperçu en direct se redessine en temps réel pour vous montrer exactement ce que les utilisateurs verront, et les quatre badges vous disent quels niveaux WCAG vous validez d'un coup d'œil. Utilisez le bouton Inverser pour inverser la paire quand vous esquissez une variante mode sombre ou que vous testez des boutons d'appel à l'action inversés.

Bonnes pratiques

Visez AA Normal (4,5:1) sur le corps de texte comme minimum absolu, et visez AAA Normal (7:1) quand l'accessibilité est une valeur de marque. Ne courez pas après le strict minimum — les ratios limites échouent sur les écrans bon marché et en extérieur. Testez vos vraies couleurs à la taille réelle d'utilisation, pas des approximations à partir d'un nuancier de marque. N'oubliez pas que les états désactivés, les textes de placeholder et la copie publicitaire comptent toujours comme du texte — ils ont aussi besoin de contraste. N'utilisez jamais la couleur seule pour porter le sens ; associez-la à des icônes, soulignements ou libellés.

Les maths du ratio

Les WCAG calculent le contraste à partir de la luminance relative, pas des valeurs RGB brutes. Chaque canal est d'abord linéarisé depuis sRGB — les valeurs sous 0,03928 sont divisées par 12,92, les autres passent par ((c + 0,055) / 1,055)^2,4. La luminance vaut alors L = 0,2126·R + 0,7152·G + 0,0722·B, pondérée parce que l'œil humain est le plus sensible au vert et le moins au bleu. Le ratio est (L_{plus claire} + 0,05) / (L_{plus sombre} + 0,05). Le terme + 0,05 modélise la lumière ambiante réfléchie sur les écrans réels et c'est ce qui plafonne le maximum à 21:1.

Niveaux de conformité WCAG en un coup d'œil

AA Normal : 4,5:1 minimum pour le corps de texte sous 18pt (ou 14pt gras). AA Large : 3:1 pour le texte 18pt+ (ou 14pt+ gras). AAA Normal : 7:1 — le niveau renforcé recommandé pour les sites visant le plus haut standard de lisibilité. AAA Large : 4,5:1 — texte large à la barre renforcée. Les composants UI non-textuels (icônes, indicateurs de focus, bordures de formulaire) doivent avoir au moins 3:1 contre leur surface adjacente pour satisfaire WCAG 2.1 SC 1.4.11.

Questions fréquentes

Que veut dire « grand texte » dans WCAG ?

Le grand texte, c'est tout ce qui fait 18pt et plus, ou 14pt et plus en gras — environ 24 px et 18,66 px en pixels CSS. La logique : les lettres plus grosses ont des traits plus épais et plus de masse visuelle, donc elles restent lisibles à plus faible contraste qu'un corps de texte resserré. Si votre design system mélange poids normaux et gras à la même taille, évaluez-les séparément.

Cet outil envoie-t-il mes couleurs à un serveur ?

Non. Chaque calcul de contraste tourne dans votre navigateur via du JavaScript standard — aucune requête réseau ne part quand vous changez les entrées. Vérifiez en ouvrant DevTools → Réseau et en faisant glisser le sélecteur. Les audits de couleurs de marque sont sûrs ici sur des palettes inédites.

Pourquoi mes couleurs échouent à 4,49:1 mais réussissent à 4,50:1 ?

Les WCAG définissent leurs seuils comme des minimums inclusifs — 4,5:1 signifie au moins 4,5, pas strictement supérieur. Nous arrondissons à deux décimales pour l'affichage mais comparons en pleine précision en interne, donc un résultat de 4,4998 échoue d'un cheveu même si le badge affiche 4,50. Si vous êtes si proche, poussez un canal d'un ou deux points pour passer la barre tranquillement.

Et les éléments non textuels comme les icônes ou les bordures de formulaire ?

WCAG 2.1 SC 1.4.11 exige un contraste minimum de 3:1 pour les composants graphiques d'interface — traits d'icône, bordures de champ, indicateurs de focus, contours de bouton. Utilisez ce vérificateur sur la couleur de premier plan de l'icône contre sa surface ; si l'icône est multicolore, évaluez le trait le plus contrasté qui porte le sens.

AAA importe-t-il vraiment pour un site classique ?

AA est le plancher légal dans la plupart des juridictions. AAA est aspirationnel et pas toujours tenable sur toute une palette sans sacrifier l'identité de marque. Atteignez AAA sur le corps de texte chaque fois que possible — c'est là que le bénéfice de lisibilité est le plus grand — et acceptez AA sur les survols d'accent et les grands titres.

Les noms de couleur comme « red » ou « blue » sont-ils supportés ?

Les sélecteurs et les champs hex acceptent les codes hex à 6 et 3 chiffres. Pour les couleurs CSS nommées, utilisez d'abord notre outil Couleurs nommées pour trouver l'équivalent hex, puis collez-le ici.

Vérificateur de contraste