Vérifiez le rapport de contraste WCAG entre une couleur de texte et de fond — obtenez les verdicts AA/AAA pour le texte normal, le grand texte et les composants d'interface, avec un aperçu en direct et des suggestions de couleurs accessibles.

Couleur du texte
Teinte
Couleur de fond
Teinte
Rapport de contraste
--:1
Texte normal
Texte courant sous 18px (ou sous 14px gras)
AA AAA
Grand texte
18px+ normal, ou 14px+ gras
AA AAA
Composants d'interface
Icônes, bordures, champs de formulaire & graphiques
AA AAA
Aperçu en direct

Portez ce vieux whisky

Le grand texte se lit confortablement lorsque le contraste est suffisant.

Voici un paragraphe de texte courant. Un bon contraste de couleurs garde votre contenu lisible pour tous, y compris les personnes malvoyantes ou daltoniennes. un lien d'exemple.

Les petits caractères et légendes sont les plus difficiles à lire — ils exigent le plus de contraste.
Bouton d'exemple Bouton d'exemple
Suggestion

Tout est calculé en direct dans votre navigateur avec la formule de luminance relative WCAG 2.x — aucun envoi, aucune inscription, entièrement gratuit.


À propos de Vérificateur de contraste des couleurs

Le Vérificateur de contraste des couleurs mesure le rapport de contraste WCAG entre une couleur de texte et une couleur de fond, puis évalue la paire par rapport aux niveaux d'accessibilité AA et AAA pour le texte normal, le grand texte et les composants d'interface. Le rapport et chaque verdict de réussite/échec se mettent à jour en direct lorsque vous ajustez l'une ou l'autre couleur.

Un panneau d'aperçu réaliste affiche des titres, du texte courant, du petit texte, un bouton et un lien dans la combinaison choisie, afin que vous puissiez juger de la lisibilité avec du contenu réel plutôt que des nuances abstraites. Quand une paire échoue, l'outil suggère la couleur de texte accessible la plus proche qui atteint le seuil AA de 4,5:1, prête à appliquer en un clic.

Les calculs suivent la formule de luminance relative WCAG 2.x et s'exécutent entièrement dans votre navigateur — rien n'est envoyé et les vérifications sont gratuites. Vous pouvez aussi copier un rapport texte compact du rapport de contraste et des évaluations à coller dans une revue d'accessibilité ou une pull request.

Comment utiliser Vérificateur de contraste des couleurs

  1. Définissez votre couleur de texte et votre couleur de fond avec les sélecteurs ou en saisissant des valeurs.
  2. Lisez le rapport de contraste et les résultats AA/AAA pour le texte normal, le grand texte et les composants d'interface.
  3. Examinez l'aperçu en direct pour voir de vrais titres, paragraphes, boutons et liens dans vos couleurs.
  4. Si la paire échoue, appliquez la couleur de texte accessible suggérée ou inversez les deux couleurs.
  5. Cliquez sur « Copier le rapport » pour partager le rapport de contraste et les résultats de conformité.

Questions fréquentes

Le niveau AA des WCAG exige 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants d'interface comme les icônes et les bordures de formulaire. Le niveau AAA, plus strict, exige 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Un texte de 18px ou plus en graisse normale, ou de 14px et plus en gras. Comme les grands glyphes sont plus faciles à distinguer, les WCAG leur autorisent un rapport de contraste plus faible de 3:1 au niveau AA.

Oui. Chaque vérification est calculée instantanément dans votre navigateur à l'aide de la formule de luminance relative WCAG, sans inscription, sans limite d'utilisation et sans coût.

Utilisez la suggestion intégrée : l'outil trouve la variante la plus proche de votre couleur de texte qui réussit le test AA par rapport au fond actuel et vous permet de l'appliquer directement. Si aucune variante de la couleur de texte ne peut réussir, ajustez plutôt le fond.

Il couvre les critères de contraste des couleurs, qui figurent parmi les défaillances d'accessibilité les plus fréquentes, mais pas tout. Vous devez encore vérifier les états de focus, l'indépendance de l'information vis-à-vis de la couleur, les tailles de police et la tenue de la palette sous simulation de daltonisme.

Non. Les deux couleurs, le rapport et les suggestions sont tous calculés localement dans votre navigateur — la page ne fait aucune requête serveur pendant que vous travaillez.


Recherches populaires
vérificateur de contraste de couleur ratio de contraste wcag vérificateur de contraste accessible contraste de texte test de contraste aa aaa vérifier le contraste des couleurs en ligne
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.