FrançaisFR

Vérificateur de contraste – contraste des couleurs WCAG

Choisissez une couleur de texte et une couleur de fond : le ratio de contraste et les résultats d’accessibilité s’affichent aussitôt.

Vos textes et fichiers restent dans votre navigateur : rien n’est envoyé à un serveur.

Ratio de contraste-
  • Texte normal AA (4,5:1)-
  • Texte normal AAA (7:1)-
  • Grand texte AA (3:1)-
  • Grand texte AAA (4,5:1)-
  • Composants d’interface et graphiques AA (3:1)-

Un grand texte fait au moins 24 px, ou environ 18,7 px en gras.

Aperçu

Voici l’allure d’un grand titre

Le texte courant demande au moins 4,5:1 pour se lire confortablement. Testez-le aussi sur un petit écran ou en pleine lumière.

Petit texte d’aide · 13 px

BoutonChamp de saisie
Couleurs suggérées conformes
Changer le texte en -
Changer le fond en -

Mode d’emploi

  1. Choisissez les couleurs du texte et du fond avec les pastilles ou saisissez des codes comme #fff ou rgb(…). Les couleurs semi-transparentes sont d’abord fusionnées avec le fond.
  2. Vous voyez le ratio de contraste et si le niveau AA est atteint pour le texte normal (4,5:1), le grand texte (3:1) et les composants d’interface (3:1), ainsi que les niveaux AAA, plus stricts.
  3. Si un test échoue, « Couleurs suggérées conformes » propose la couleur la plus proche de même teinte, en ne modifiant que la luminosité. « Appliquer » la met en place.
  4. Les deux couleurs figurent dans l’adresse de la page : copiez le lien pour le partager avec votre équipe.

Questions fréquentes

Que signifient AA et AAA ?

Ce sont des niveaux de conformité des WCAG (Web Content Accessibility Guidelines). Le texte normal demande 4,5:1 pour le niveau AA et 7:1 pour le niveau AAA. En France, le RGAA, qui s’impose notamment aux services publics, s’appuie sur le niveau AA des WCAG, et la directive européenne sur l’accessibilité étend depuis juin 2025 ces exigences à de nombreux services privés.

Comment le ratio de contraste est-il calculé ?

L’outil détermine la luminance relative des deux couleurs, puis divise (la plus claire + 0,05) par (la plus foncée + 0,05). Deux couleurs identiques donnent 1:1, du noir sur blanc 21:1. Le résultat est tronqué plutôt qu’arrondi, pour qu’une valeur juste sous un seuil ne paraisse jamais conforme.

Quand s’applique la règle des composants d’interface ?

Les éléments sans texte, comme les bordures de boutons, les contours de champs et les icônes, demandent au moins 3:1 par rapport aux couleurs voisines (WCAG 1.4.11).

Outils similaires

Sélecteur de couleurHEX, RGB, HSL et CMJN d’un coup d’œilNuancier pour Tailwind CSSUne couleur, une échelle de 50 à 950Couleur d’une imageCouleurs et palette d’une imageGénérateur d’ASCII artTexte et photos en caractères

Tous les outils