Tester le contraste des couleurs de la conception Web

Un aperçu de trois outils et techniques pour tester et vérifier le contraste des couleurs accessible de votre conception.

Adam Argyle
Charlie Gleason

Supposons que vous ayez du texte sur un fond clair, comme ceci:

L'expression "Le renard brun glissant qui saute à nouveau par-dessus le chien paresseux" est affichée, chaque mot ou quelques mots s'affichent en bleu plus clair. Au-dessus de chaque section des mots progressivement estompés se trouve leur score de rapport de contraste. Les derniers mots sont très difficiles à lire en raison du faible contraste.

Tous les exemples peuvent être lisibles pour vous, mais ce n'est pas le cas pour tout le monde.

Le contraste des couleurs accessible est une pratique qui garantit que le texte est lisible par tous. Parfois, tester le contraste est facile et parfois c'est très difficile. À la fin de cet article, vous disposerez de trois nouveaux outils et techniques pour inspecter, corriger et vérifier le contraste de votre conception Web afin de vous attaquer aux scénarios les plus difficiles.

WCAG et contraste des couleurs

L'initiative d'accessibilité Web du W3C fournit des stratégies, des normes et des ressources pour rendre Internet accessible au plus grand nombre de personnes possible. Les directives qui sous-tendent ces normes sont appelées les Directives d'accessibilité des contenus Web, ou WCAG. La dernière version stable, WCAG 2.1, couvre une exigence importante en termes d'accessibilité: le contraste minimal.

La relation entre deux couleurs dans WCAG 2.1 est décrite par leur rapport de contraste, c'est-à-dire le nombre que vous obtenez lorsque vous comparez la luminance de deux couleurs. La luminance est un moyen de décrire à quel point une couleur est proche du noir (0%) ou du blanc (100%). Les WCAG définissent des règles et des algorithmes de calcul concernant ce rapport de contraste pour que le Web soit accessible. Il existe cependant des problèmes connus avec ce calcul. Une méthode encore plus fiable sera finalement adoptée, mais actuellement, les WCAG sont les meilleures que nous ayons.

Quelles sont les règles ?

AA AAA
Corps du texte (< 24 px) 4.5 7
Grand texte (> 24 pixels) 3 4.5
UI (icônes, graphiques, etc.) 3 non défini

Un rapport de contraste plus élevé est évalué avec un nombre plus élevé, par exemple 4,5 ou 7 au lieu de 3. Pour vous familiariser avec le tableau d'évaluation, consultez le Vérificateur de contraste de Polypane.

Le texte s&#39;affiche en violet: une paire est composée de texte noir sur violet et de texte blanc sur violet pour l&#39;autre.
Laquelle de ces associations de couleurs contrastez-vous le plus ?

Tester le contraste entre les couleurs

Maintenant que nous savons ce que nous recherchons, comment tester cela ? Voici trois outils sans frais pour vous aider à inspecter, corriger et mesurer le contraste sur votre site Web. Nous vous présenterons les points forts et les points faibles de chacune d'entre elles afin que vous puissiez tester en toute confiance l'accessibilité des couleurs et du contenu de votre site de différentes manières.

  1. Pika
    Une application macOS, unique en son genre, capable de montrer le contraste de toutes les couleurs sur l'ensemble de l'écran, les couleurs sur les dégradés, les couleurs avec transparence, etc. L'intent étant explicite, les utilisateurs choisissent manuellement les pixels à comparer. Un peu moins automatisé, avec un énorme gain de fonctionnalités.
  2. VisBug
    Extension internavigateur, capable d'afficher de façon unique plusieurs superpositions de contraste à la fois, mais comme les outils de développement, elle n'est pas toujours en mesure de détecter l'intent.
  3. Outils pour les développeurs Chrome
    Les outils de développement sont intégrés à Chrome et offrent de nombreuses façons d'inspecter, de corriger et de déboguer les problèmes de couleur. Toutefois, ils présentent des lacunes lors de l'inspection des dégradés et des couleurs semi-transparentes, et ne permettent parfois pas de détecter l'intention.

Pika (application macOS)

Si les outils de développement ou VisBug ne parviennent pas à évaluer correctement le contraste, par exemple pour tester une couleur en dehors du navigateur, ou en cas de transparence ou de dégradés, Pika est là pour sauver la mise. Pika a accès à chaque pixel de l'écran, car il s'agit d'un outil système et non d'un outil Web.

Télécharger Pika

Cela signifie également que l'expérience utilisateur pour utiliser Pika est différente de celle des outils de développement ou VisBug. Les outils de développement et VisBug s'efforcent d'afficher les couleurs de texte et d'arrière-plan du DOM du navigateur, tandis que les couleurs de Pika sont choisies manuellement à partir de n'importe quel point de l'écran. Cela donne à Pika plus de contrôle et ouvre d'autres cas d'utilisation:

  • Comparer deux couleurs, qu'elles soient ou non dans le navigateur. Si vous pouvez la voir sur votre écran, vous pouvez la tester.
  • Comparer les couleurs avec la transparence.
  • Comparer les couleurs dans les dégradés
  • Comparer les couleurs qui utilisent des modes de fusion, comme le mode mélange dans CSS

Comparer deux couleurs

Comparer du texte à une couleur d'arrière-plan:

Deux gris sont comparés côte à côte, ils ont un rapport de contraste de 13,01 et transmettent les cibles AA et AAA.

Comparer les couleurs de trait et de remplissage des graphiques vectoriels:

Deux tons violets sont comparés à partir d&#39;une icône bicolore, ils ont un rapport de contraste de 1,63 et ne dépassent aucun objectif WCAG.

Comparer les couleurs avec la transparence

Comparez la couleur du texte à plusieurs échantillons de pixels d'arrière-plan. Ici, le gris clair de l'effet verre dépoli est utilisé comme couleur de comparaison d'arrière-plan.

Deux couleurs qui ressemblent au gris, mais qui sont en réalité des violets très non saturés, sont comparées à partir d&#39;une image avec une légende semi-transparente floue.Elles ont un rapport de contraste de 4,65 et transmettent la cible AA.

Comparer des couleurs avec des dégradés

Comparez du texte sur un dégradé ou sur une image. Ici, le L de "Lasso" est comparé au bleu clair de l'image:

Sur une capture d&#39;écran d&#39;une série TV, le titre est affiché en superposition, le L est blanc et le bleu en arrière-plan est comparé. Ils ont un rapport de contraste de 8 et transmettent les cibles AA et AAA.

VisBug

VisBug est un outil inspiré de FireBug qui permet aux concepteurs et aux développeurs d'inspecter visuellement, de déboguer et de jouer avec la conception de leur site Web. Il vise à faciliter l'accès aux outils pour les développeurs Chrome en émulant l'interface utilisateur et l'expérience utilisateur des outils de conception que les utilisateurs connaissent et apprécient.

Essayez VisBug ou installez-le sur Chrome, Firefox, Edge, Brave ou Safari.

L'une de ses offres est l'outil d'inspection de l'accessibilité.

Capture d&#39;écran de la barre d&#39;outils VisBug sur le côté gauche d&#39;une page vierge. L&#39;icône de l&#39;outil d&#39;accessibilité est rose et un pop-up s&#39;affiche pour fournir des instructions sur l&#39;outil.

Inspecter le contenu dans tous les navigateurs (et même sur mobile)

Une fois que l'utilisateur a cliqué sur l'outil d'inspection de l'accessibilité, ses informations d'accessibilité sont indiquées dans l'info-bulle pour tout ce que l'utilisateur pointe ou que l'utilisateur accède au clavier. Cette info-bulle inclut des comparaisons de couleurs entre les couleurs de premier plan et d'arrière-plan découvertes.

Un composant avec un titre et une icône s&#39;affiche avec un cadre de délimitation rose autour. Une info-bulle sur l&#39;accessibilité VisBug pointe vers la zone rose avec un rapport de comparaison des couleurs de la couleur du texte et son arrière-plan. Le ratio est de 13,86 et transmet les cibles AA et AAA.

Inspectez un ou plusieurs

Les outils de développement peuvent soit examiner une paire de couleurs unie, soit obtenir un rapport de toutes vos paires de couleurs sur la page, mais VisBug offre un milieu intermédiaire en autorisant plusieurs associations de couleurs. Cliquez sur un élément pour que l'info-bulle reste visible. Maintenez la touche Maj enfoncée et continuez à cliquer sur d'autres éléments pour que toutes les info-bulles restent placées:

Une liste de liens sur une page Web s&#39;affiche avec plusieurs superpositions d&#39;accessibilité VisBug, chacune pointant de manière contextuelle vers le contraste des couleurs du texte et de l&#39;arrière-plan détecté et en signalant les contrastes de couleur du texte et de l&#39;arrière-plan.

Cela est particulièrement important pour la conception basée sur des composants, où plusieurs parties d'un composant doivent transmettre des scores de rapport de contraste. Cette méthode permet de voir tous ces composants à la fois. Également idéal pour les critiques de conception.

Outils pour les développeurs Chrome

Si Chrome est installé, vous disposez déjà de nombreux outils de test du contraste:

Sélecteur de couleur des outils pour les développeurs Chrome

Dans le volet "Styles des outils pour les développeurs Chrome" du panneau "Éléments", un petit échantillon de couleur carrée s'affiche à côté des valeurs de couleur. Lorsque vous cliquez sur ce nuancier, vous voyez le sélecteur de couleur. Si possible, le milieu de l'outil affiche le contraste de la couleur par rapport au premier plan ou à l'arrière-plan.

Dans l'exemple suivant, le sélecteur de couleur est ouvert pour une valeur de couleur de propriété personnalisée. Le score de rapport de contraste est de 15,79 et comporte deux coches vertes, indiquant que le score répond aux exigences AA et AAA WCAG 2.1:

Capture d&#39;écran du panneau &quot;Éléments de développement&quot;, avec le sélecteur de couleur affiché dans les styles et au milieu le rapport de contraste de la couleur de 4,98.

Correction automatique du sélecteur de couleur

Il est pratique de voir le score lors de la sélection des couleurs, mais les outils pour les développeurs Chrome disposent d'une fonctionnalité supplémentaire de correction automatique. Lorsque le sélecteur de couleur signale un échec de score de contraste des couleurs accessible, il peut être développé pour afficher les cibles de scores AA et AAA, ainsi qu'un outil de pipette. À côté de AA et AAA se trouvent des échantillons et une icône d'actualisation. Lorsque vous cliquez dessus, la couleur de transmission la plus proche s'affiche:

Si vous n'êtes pas pointilleux au sujet des couleurs, la fonctionnalité de correction automatique est un excellent moyen de respecter les consignes d'accessibilité et de ne pas travailler trop pour effectuer la tâche.

Info-bulle d'inspection

L'outil de sélection d'éléments présente une fonctionnalité spéciale lors du survol de la page, qui fournit des informations générales sur la police, la couleur et l'accessibilité. L'outil de sélection d'éléments est l'icône de gauche dans la capture d'écran suivante. C’est la case avec un curseur flèche au-dessus du coin inférieur droit. Vous pouvez également le sélectionner à l'aide du raccourci clavier Control+Shift+C (ou Command+Shift+C sous macOS).

Capture d&#39;écran de la boîte et de l&#39;icône en forme de flèche qui permettent d&#39;appeler l&#39;outil de sélection d&#39;éléments dans les outils de développement.

Une fois activée, l'icône devient bleue, et l'info-bulle d'inspection rapide suivante s'affiche:

Capture d&#39;écran d&#39;une superposition très semblable à VisBug.Elle montre des informations de style et une section d&#39;accessibilité qui affiche un score de contraste de 15,79, qui passe la cible AA.

Au lieu de l'outil de sélection de couleur, qui nécessite de trouver l'échantillon de couleur dans le volet "Styles", cet outil vous permet de pointer simplement sur la page pour afficher les scores de contraste. Comme le sélecteur de couleur, il ne peut afficher qu'un seul score de contraste à la fois.

Accrochez-vous jusqu 'à ce que vous passiez 🎶

Je inspecte souvent une association de couleurs avec cet outil d'inspection rapide et je constate qu'elle n'a pas réussi à transmettre le ratio requis. Au lieu d'utiliser la fonctionnalité de correction automatique du sélecteur de couleurs (car je suis pointilleux), je déplace les canaux de couleur dans le CSS et je regarde jusqu'à ce que je fournisse le ratio dont j'ai besoin. Ce processus s'appelle "booster jusqu'à ce que vous réussissiez", car je copie les numéros de canaux de couleur jusqu'à ce qu'ils obtiennent les WCAG 2.1.

Les étapes à suivre sont les suivantes, dans l'ordre exact:

  1. Placez le curseur au clavier au sein d'une couleur dans le panneau "Styles".
  2. Activez l'outil d'inspection des éléments à l'aide du raccourci clavier Control+Shift+C (ou Command+Shift+C sous macOS).
  3. Pointez au-dessus d'une cible.
  4. Appuyez sur les touches Haut et Bas du clavier pour modifier les valeurs numériques de la couleur.

Cela fonctionne, car la valeur de style CSS est toujours active au clavier, tandis que la souris vous permet de pointer sur une cible. Assurez-vous de ne pas cliquer sur votre cible, sinon le focus sera déplacé depuis la zone de valeur de couleur et ne vous laissera plus déplacer des valeurs jusqu'à ce que le nouveau curseur soit sélectionné.

Présentation du CSS

Jusqu'à présent, les outils pour les développeurs Chrome proposaient un moyen d'examiner une association de couleurs à la fois, mais la présentation CSS peut explorer l'intégralité de votre page et présenter toutes les associations inaccessibles en une seule fois:

Capture d&#39;écran de la vue d&#39;ensemble récapitulative de l&#39;exécution de l&#39;outil de capture &quot;Overview&quot; du CSS&quot;. Elle montre 7 problèmes de contraste, montrant les paires de couleurs découvertes et leurs échecs de résultats.

Pour en savoir plus sur cette fonctionnalité, lisez l'article CSS Overview: Identifier les améliorations CSS potentielles ou regardez Jecelyn Yeen sur YouTube dans sa série "Conseils d'outils de développement" pour savoir comment identifier les améliorations CSS potentielles à l'aide du panneau "Présentation du CSS".

Phare

Lighthouse est un autre outil d'audit disponible dans les outils pour les développeurs Chrome. Il peut explorer votre page et signaler les combinaisons de couleurs inaccessibles. Il présente de petites captures d'écran de chaque paire de couleurs que vous pouvez examiner, réussir et échouer. Toute combinaison défaillante aura un impact négatif sur votre score Lighthouse.

Voici à quoi peuvent ressembler ces résultats:

Capture d&#39;écran d&#39;une évaluation de Lighthouse, montrant les résultats du texte à faible contraste des combinaisons de couleurs de deux mots.

La console JS

Peut-être que tous les outils répertoriés jusqu'à présent ne sont tout simplement pas là où vous en êtes. Vous vous trouvez peut-être (toute la journée) dans JavaScript. Voici une expérience à essayer. Le volet "Problèmes" de la console peut signaler en permanence les problèmes d'accessibilité au contraste des couleurs au fur et à mesure de la compilation. Activez la fonctionnalité dans Paramètres > Tests, comme indiqué ci-dessous:

Capture d&#39;écran d&#39;une case à cocher activée: &quot;Activer le signalement automatique des problèmes de contraste via le panneau &quot;Problèmes&quot;

Ouvrez ensuite le volet "Issue" (Problème) et vérifiez s'il a fait des découvertes. Si c'est le cas, ils peuvent se présenter comme suit:

Capture d&#39;écran du panneau &quot;Problèmes&quot; dans la console, qui signale six erreurs liées au contraste.

Émulation daltonien

Concernant le contraste des couleurs et l'accessibilité des associations de couleurs, il est utile de souligner l'outil d'émulation des déficiences visuelles. Cela modifiera les couleurs ou l'apparence de votre conception pour démontrer les résultats des différentes variétés du daltonisme, ce qui vous donnera la possibilité de modifier votre conception afin que la couleur ne soit pas le seul moyen de communication entre l'expérience utilisateur et un utilisateur.

Capture d&#39;écran des options disponibles dans les outils de développement d&#39;émulation pour émuler des déficiences visuelles: pas d&#39;émulation, vision floue, protanopie, deutéranopie, tritanopie, achromatopsie

Il n'est pas recommandé d'utiliser exclusivement la couleur pour représenter des informations, comme le rouge pour le mauvais et le vert pour de bon. Certaines personnes ne voient pas les verts ni les rouges de la même manière, et cet outil d'émulation vous aidera à faire l'expérience et à vous en souvenir.

Émulation des préférences système de contraste des couleurs

Les utilisateurs modifient de plus en plus les paramètres de contraste dans leur système d'exploitation, ce qui leur permet de demander plus ou moins de personnalisation du contraste dans leur interface utilisateur. Le CSS peut exploiter ce paramètre, tout comme il peut le faire avec les préférences de thème clair ou sombre. Les outils pour les développeurs Chrome permettent d'émuler cette préférence afin que les conceptions puissent tester et s'adapter à la requête de l'utilisateur sans modifier le paramètre du système.

Capture d&#39;écran des options des outils de développement d&#39;émulation permettant d&#39;émuler la requête média CSS &quot;preferred-contrast: no emulation, more, less, custom&quot; (aucune émulation, plus, moins, personnalisée)

Essayez les WCAG 3.0 APCA

Vous pouvez également essayer vos associations de couleurs avec le système expérimental d'évaluation du rapport des couleurs de l'APCA. Activé via Paramètres > Tests, il remplace le système de rapports WCAG 2.1 par un algorithme de vérification du contraste plus récent et amélioré, qui vous permet de prévisualiser ses résultats à mesure que la proposition s'oriente vers une norme.

Capture d&#39;écran d&#39;une case à cocher activée: &quot;Activer le nouvel algorithme de contraste avancé (APCA) pour remplacer le rapport de contraste et les consignes AA/AAA précédents&quot;.

Une fois cette option activée, utilisez l'info-bulle d'inspection des points ou le sélecteur de couleur pour afficher le score d'association des couleurs et vérifier qu'il réussit:

L&#39;info-bulle d&#39;inspection d&#39;un élément des outils de développement indique -100,2% pour le score de contraste d&#39;un élément dd.

Conclusion

Le contraste des couleurs est un élément important du puzzle de l'accessibilité sur le Web. Le fait de le respecter rend le Web plus facile à utiliser pour le plus grand nombre de personnes dans les situations les plus variées. J'espère que ces trois outils vous aideront à vous sentir apte à faire de bons choix de couleurs.