Les couleurs sont vérifiées dans votre navigateur ; rien n'est téléchargé
WCAG AA et AAA • Score APCA • Sans envoi de fichiers
Vérificateur de contraste de couleur
Vérifiez le contraste du texte et de l’arrière-plan par rapport aux WCAG AA et AAA avec un score APCA. Testez le texte normal, volumineux et d'interface utilisateur dans votre navigateur sans envoi de fichiers.
Vérifiez le contraste des couleurs par rapport aux normes WCAG
Entrez une couleur de texte et une couleur d'arrière-plan pour afficher le rapport de contraste WCAG 2.x, les résultats AA et AAA pour le texte normal, grand et UI, ainsi qu'un score de perception APCA. Ajustez l’une ou l’autre couleur jusqu’à ce qu’elle passe.
Comment vérifier le contraste des couleurs
- 1.Saisissez les couleurs du texte et de l'arrière-plan à l'aide du sélecteur, du champ hexadécimal ou des curseurs HSL.
- 2.Regardez le rapport de contraste et les indicateurs AA/AAA se mettre à jour instantanément
- 3.Ajustez la luminosité jusqu'à ce que le texte normal, grand ou l'interface utilisateur atteigne le niveau dont vous avez besoin
- 4.Copiez l'URL pour partager la paire de couleurs exacte avec quelqu'un d'autre
Utilise la formule officielle de contraste de luminance relative WCAG
Comprend le score de perception APCA du brouillon WCAG 3
La paire de couleurs reste dans l'URL afin que vous puissiez la partager
FAQ sur le vérificateur de contraste des couleurs
Les couleurs sont-elles envoyées à un serveur ?
Non. Le rapport de contraste est calculé localement dans votre navigateur à partir des deux couleurs que vous saisissez.
Que signifie le rapport de contraste ?
Il compare la luminance relative des deux couleurs sur une échelle allant de 1:1 (même couleur) à 21:1 (noir sur blanc). Les WCAG fixent des ratios minimaux tels que 4,5 : 1 pour le texte normal au niveau AA.
Que signifient AA et AAA ?
Ce sont des niveaux de conformité WCAG. AA nécessite au moins 4,5 : 1 pour un texte normal et 3 : 1 pour un texte de grande taille ; AAA les élève à 7:1 et 4,5:1.
Qu'est-ce qui constitue un texte volumineux ?
WCAG définit le texte volumineux comme étant d'au moins 18 pts (24 px) régulier ou 14 pts (18,66 px) en gras. Les textes de grande taille nécessitent moins de contraste : 3:1 pour AA et 4,5:1 pour AAA.
Qu’est-ce que le score APCA ?
APCA est l'algorithme de contraste perceptuel proposé pour les WCAG 3, mesurant la différence de luminosité perçue. Cette page montre la valeur Lc du projet actuel des WCAG 3 comme indicateur supplémentaire ; Les WCAG 2.x AA/AAA restent la base de conformité.
Mes couleurs échouent – comment puis-je les réparer ?
Utilisez le bouton Correction automatique sur AA à côté de l'une ou l'autre couleur pour ajuster la luminosité de cette couleur jusqu'à ce que le texte normal atteigne 4,5 : 1. Vous pouvez ensuite affiner la teinte, la saturation ou la luminosité avec les curseurs.