Vérificateur de contraste des couleurs

Le ratio compare la luminance relative des couleurs de premier plan et d’arrière-plan à l’aide de la formule de contraste WCAG. L’échelle va de 1:1 pour une luminance identique à 21:1 pour la plus forte différence entre noir et blanc. Le calcul utilise les valeurs de couleur saisies, il ne prend donc pas automatiquement en compte la transparence, les dégradés, les images d’arrière-plan, les ombres, l’anticrénelage, les conditions d’affichage ou une couleur différente affichée dans un état interactif. Testez les couleurs réellement rendues pour les états normal, survol, focus, actif, désactivé et visité lorsqu’ils diffèrent.

Pour le texte ordinaire, WCAG AA exige un ratio minimal de 4.5:1 et AAA de 7:1. Le grand texte utilise des seuils plus bas car les caractères plus grands et suffisamment gras sont plus faciles à distinguer : 3:1 pour AA et 4.5:1 pour AAA. Le fait qu’un texte soit considéré comme grand dépend de sa taille et de sa graisse réelles, et non d’une simple étiquette de conception. Une paire peut donc réussir pour un grand titre et échouer pour le corps du texte. Vérifiez l’exigence qui correspond à la typographie réelle et à l’objectif de conformité.

Oui. Le contraste du texte n’est qu’une partie de l’accessibilité des couleurs. Les informations visuelles nécessaires pour identifier les contrôles d’interface utilisateur, les états des composants, les objets graphiques et les indicateurs de focus clavier nécessitent généralement au moins un contraste de 3:1 avec les couleurs adjacentes selon les recommandations WCAG sur le contraste non textuel. Les éléments décoratifs et les contrôles inactifs ont des considérations différentes. Testez les bordures, les icônes, les graphiques, les états sélectionnés, les messages de validation et les contours de focus dans leur contexte. Une paire de texte qui réussit AA ne prouve pas que chaque élément interactif ou graphique à l’écran est accessible.

Saisissez les couleurs effectives de premier plan et d’arrière-plan à l’endroit où apparaissent le texte ou un graphique essentiel. Les couches semi-transparentes se mélangent avec ce qui se trouve derrière elles, et les dégradés ou les photographies créent des ratios de contraste différents sur un même élément. Échantillonnez la zone pertinente la plus faible, puis testez d’autres positions probables et recadrages adaptatifs. Si le contraste dépend d’une ombre, d’un contour ou d’une superposition, incluez l’effet rendu réel dans l’examen manuel. Préférez un fond opaque stable derrière un texte important lorsque l’image sous-jacente peut changer.

Non. Le contraste n’est qu’une exigence mesurable. Une conception accessible nécessite également une typographie lisible, un espacement suffisant, une structure sémantique, des étiquettes, le fonctionnement au clavier, un focus visible, des alternatives pertinentes, un zoom et un réécoulement utilisables, un mouvement contrôlé et des instructions qui ne dépendent pas de la seule couleur. Les paires de couleurs peuvent réussir mathématiquement tout en étant difficiles dans des polices fines, de petites tailles, des reflets, des différences de vision des couleurs ou des mises en page denses. Utilisez ce résultat comme une vérification dans une revue plus large et testez l’interface réelle avec des contenus et états représentatifs.