Vérificateur de contraste des couleurs
Vérifiez le contraste entre la couleur du texte et l'arrière-plan selon WCAG 2.1 AA et AAA — avec le ratio de contraste instantané, un aperçu en direct et des badges réussite/échec.
Couleurs
4.48:1Plus c'est élevé, mieux c'est. WCAG exige au moins 4,5:1 pour le texte normal.Aa texte normal — portez ce vieux whisky
Aa grand texte
À propos de cet outil
Ce vérificateur de contraste des couleurs mesure la lisibilité du texte sur son arrière-plan à l'aide de la formule de contraste WCAG 2.1. Saisissez une couleur de texte et une couleur d'arrière-plan en valeurs HEX, ou choisissez-les visuellement, et il affiche instantanément le ratio de contraste (par exemple 4,52:1) avec des badges de réussite ou d'échec pour les niveaux AA et AAA des Règles pour l'accessibilité des contenus Web. Un aperçu en direct affiche un texte d'exemple dans vos couleurs pour juger le résultat d'un coup d'œil, et un bouton d'inversion permute le premier plan et l'arrière-plan. Tout fonctionne dans votre navigateur : rapide, confidentiel et utilisable hors ligne une fois chargé — idéal pour les designers, les développeurs et tous ceux qui créent des interfaces accessibles.
Comment l'utiliser
- 1 Saisissez la couleur de votre texte (premier plan) en HEX ou choisissez-la avec le sélecteur.
- 2 Saisissez la couleur d'arrière-plan de la même manière ; #rgb et #rrggbb sont acceptés.
- 3 Lisez le ratio de contraste et les badges AA/AAA pour texte normal et grand.
- 4 Utilisez le bouton d'inversion et ajustez jusqu'à atteindre au moins 4,5:1.
Comment ça marche
Chaque couleur est d'abord convertie de sRGB en lumière linéaire : chaque canal est divisé par 255, et les valeurs supérieures à 0,03928 sont élevées selon une courbe gamma. La luminance relative est alors L = 0,2126·R + 0,7152·V + 0,0722·B, le vert étant le plus pondéré car l'œil y est le plus sensible. Le ratio de contraste entre deux couleurs est (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur la plus claire et L2 la plus foncée. Cela donne une valeur de 1:1 (couleurs identiques) jusqu'à 21:1 (noir pur sur blanc pur). WCAG 2.1 exige un ratio d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA, montant à 7:1 et 4,5:1 pour AAA. Le grand texte correspond à environ 18,66px en gras ou 24px normal et au-delà.
Questions fréquentes
Quel ratio de contraste faut-il pour respecter WCAG ?
Pour le niveau AA de WCAG 2.1, il faut au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA est plus strict et exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. La plupart des sites visent AA comme base légale et pratique.
Qu'est-ce qui compte comme grand texte ?
WCAG définit le grand texte comme au moins 18,66px (environ 14pt) en gras, ou au moins 24px (environ 18pt) quelle que soit la graisse. Le grand texte étant plus facile à lire, on lui autorise un seuil de contraste plus bas (3:1 pour AA, 4,5:1 pour AAA).
Comment le ratio de contraste est-il calculé ?
La luminance relative de chaque couleur est calculée à partir de ses canaux rouge, vert et bleu linéarisés (L = 0,2126R + 0,7152V + 0,0722B). Le ratio est ensuite (plus clair + 0,05) / (plus foncé + 0,05), donnant des valeurs de 1:1 jusqu'à 21:1 pour le noir sur blanc.
Pourquoi le noir pur sur blanc donne-t-il 21:1 ?
Le noir a une luminance relative de 0 et le blanc de 1. En les insérant dans (1 + 0,05) / (0 + 0,05), on obtient 21, le ratio de contraste maximal possible. C'est pourquoi #000000 sur #ffffff réussit tous les niveaux WCAG.
Le contraste des couleurs affecte-t-il le SEO et le droit de l'accessibilité ?
Oui. Un contraste suffisant fait partie des normes d'accessibilité référencées par des lois telles que l'ADA, la Section 508 et la loi européenne sur l'accessibilité, et une bonne lisibilité améliore les indicateurs d'utilisabilité. Respecter WCAG AA réduit le risque juridique et rend votre contenu utilisable par les personnes malvoyantes ou ayant une déficience de la vision des couleurs.
Outils et usages liés
Un vérificateur de contraste est essentiel pour une conception web et applicative accessible. Associez-le au convertisseur de couleurs pour passer du HEX au RGB et au HSL pendant que vous ajustez votre palette, et à la calculatrice de pourcentage pour mettre à l'échelle les espacements ou l'opacité. Designers, développeurs front-end et créateurs de contenu l'utilisent pour que boutons, étiquettes et texte courant restent lisibles pour tous.