Tool Hub

Vérificateur de contraste

Vérifie le rapport de contraste WCAG 2.1 entre texte et arrière-plan

Rapport de contraste

Aa Bb Cc 123

Sample text · normal size

17.40:1

Niveau WCAGRésultat
AA Normal (4.5:1)
Pass
AA Large / UI (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

Comment utiliser

  1. Entrez ou sélectionnez la couleur de premier plan en utilisant l'entrée de couleur à gauche.
  2. Entrez ou sélectionnez la couleur de fond en utilisant l'entrée de couleur à droite.
  3. Lisez le rapport de contraste et les badges de réussite/échec WCAG 2.1 pour le texte normal (AA nécessite 4,5:1), le texte grand (AA nécessite 3:1) et les composants d'interface utilisateur (3:1).
  4. Cliquez sur le bouton d'échange pour inverser les couleurs et vérifier les deux directions.

Exemples

  • Premier plan #767676 sur fond #ffffff produit un rapport de 4,48:1, qui échoue AA pour le texte normal mais réussit pour le texte grand.
  • Premier plan #000000 sur #ffffff donne 21:1, passant tous les niveaux WCAG 2.1 incluant AAA.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.