Vérificateur de contraste des couleurs

Vérificateur de contraste de couleurs WCAG pour les couleurs de texte et d'interface

Utilisez ce vérificateur de contraste de couleurs pour comparer un premier plan et un arrière-plan, résoudre la transparence sur un fond explicite et inspecter le rapport de contraste qui en résulte. Le vérificateur de contraste WCAG indique les seuils AA et AAA pour le texte, ainsi qu'un résultat de 3:1 pour les paires de couleurs des contrôles et des graphiques, ce qui en fait un outil utile de vérification de l'accessibilité des couleurs lors de la création d'interfaces.

Comment vérifier le contraste du premier plan et de l'arrière-plan

1. Saisissez les couleurs de premier plan, d'arrière-plan et de canevas au format HEX, RGB ou HSL. Utilisez l'alpha lorsque le premier plan ou l'arrière-plan est translucide, ou convertissez d'abord un code HEX en RGB ou HSL si vous ne disposez que d'un seul format.
2. Examinez les couleurs résolues, le rapport, les résultats pour le texte normal et en gros caractères, et l'aperçu du composant.
3. Choisissez une cible de 3:1, 4.5:1 ou 7:1, appliquez une couleur de premier plan suggérée, puis copiez, téléchargez ou partagez le CSS.

Seuils WCAG AA, AAA, texte en gros caractères et 3:1

Utilisez cet outil comme vérificateur de contraste AA pour le texte normal et en gros caractères, ou comme vérificateur de contraste AAA lorsque les cibles plus élevées s'appliquent. WCAG AA requiert un rapport d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte en gros caractères ; AAA élève ces cibles à 7:1 et 4.5:1. Le texte en gros caractères signifie généralement au moins 18 points en police normale ou 14 points en gras. Le résultat de contraste de 3:1 distinct pour le premier plan et l'arrière-plan évalue uniquement la paire de couleurs testée pour un contrôle ou un graphique ; il n'établit pas à lui seul la conformité pour le contenu non textuel.

Pourquoi les couleurs translucides nécessitent un canevas explicite

Une couleur translucide n'a pas de contraste final tant que toutes les couches situées derrière elle ne sont pas connues. Ce vérificateur de contraste de texte compose d'abord le canevas opaque, puis l'arrière-plan, et enfin le premier plan. Le rapport affiché décrit donc les couleurs résolues du navigateur plutôt que de supposer silencieusement du blanc derrière chaque valeur transparente.

Les couleurs à contraste élevé dépendent de la paire et du contexte

Que sont les couleurs de contraste ? Ce sont des couleurs dont la différence de luminance résolue crée une paire lisible ou distinguable dans un usage spécifique. Une combinaison de couleurs accessible pour un composant peut échouer dans un autre état, et les meilleures couleurs contrastantes ne sont pas universelles : le noir peut fonctionner sur un fond jaune pâle alors qu'un gris plus clair échoue. Un choix de couleur de contraste pour un fond jaune doit toujours être mesuré par rapport au jaune exact, à la taille du texte, à la graisse et à l'état du composant que vous livrerez.

Trouver un premier plan accessible plus sombre ou plus clair

Lorsque la paire actuelle n'atteint pas la cible sélectionnée, le vérificateur recherche des chemins sRGB déterministes plus sombres et plus clairs pour trouver les valeurs de premier plan exportées les plus proches qui sont conformes. Il préserve l'alpha du premier plan lorsque c'est possible et indique clairement une alternative opaque lorsque la transparence rend la cible inaccessible. Pour ajuster manuellement la couleur de premier plan et voir ses teintes et nuances, ouvrez-la dans le sélecteur de couleurs.

Une paire de couleurs conforme ne constitue pas un audit d'accessibilité complet

Ce calcul ne prouve pas que la page entière est conforme. La typographie réelle, les dégradés, les images, les icônes, les états d'interaction, les indicateurs de focus, les contrôles désactivés, les bordures et les couleurs environnantes nécessitent toujours une inspection dans l'interface rendue. Utilisez ce résultat comme une mesure précise au sein d'un examen d'accessibilité plus large.

Vérification privée du contraste dans votre navigateur

L'analyse, la composition alpha, le calcul du contraste, les suggestions, le rendu de l'aperçu et la génération du CSS s'effectuent localement dans ce navigateur. Les données analytiques excluent les couleurs exactes, les ratios, les résultats de réussite ou d'échec, le CSS généré et les valeurs d'état de partage. Une URL de partage ne contient des couleurs que lorsque vous la créez explicitement.

Foire aux questions

Quel rapport de contraste le niveau WCAG AA exige-t-il ?

Le niveau WCAG AA exige un minimum de 4.5:1 pour le texte de taille normale et de 3:1 pour le texte de grande taille. Le vérificateur affiche les deux résultats séparément car la taille et la graisse de la police déterminent quel seuil s'applique.

Quel rapport de contraste le niveau WCAG AAA exige-t-il ?

Le niveau WCAG AAA exige un rapport d'au moins 7:1 pour le texte normal et de 4.5:1 pour le texte de grande taille. AAA est un objectif de contraste de texte plus élevé, et non une déclaration que toutes les autres exigences d'accessibilité sont respectées.

Qu'entend-on par texte de grande taille pour le test de contraste ?

Le texte de grande taille désigne généralement un texte normal d'au moins 18 points ou un texte en gras de 14 points. Les pixels CSS et les métriques de police rendues peuvent varier, donc vérifiez la taille et la graisse réelles utilisées dans l'interface.

Les contrôles et les icônes doivent-ils avoir un contraste de 3:1 ?

De nombreux contrôles significatifs, indicateurs de focus et objets graphiques doivent avoir un rapport de contraste de 3:1 par rapport aux couleurs adjacentes. Cet outil ne signale que la paire testée ; le fait que l'exigence s'applique ou non dépend de l'élément et de son état.

Une paire de couleurs valide prouve-t-elle que ma page est conforme ?

Non. Une paire valide couvre un seul calcul de contraste. La typographie, les images, les dégradés, les icônes, les contrôles, les états de survol et désactivé, les indicateurs de focus, la structure, l'accès au clavier et la page rendue complète nécessitent toujours un examen.