Présentation de trois outils et techniques permettant de tester et de vérifier le contraste des couleurs accessible de votre conception.
Imaginons que vous ayez un texte sur un fond clair, comme ceci:
Bien que tous les exemples soient lisibles pour vous, 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 pour 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 pouvoir relever les 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 garantir que l'accès à Internet est ouvert au plus grand nombre de personnes possible. Les directives qui sous-tendent ces normes sont appelées "Directives d'accessibilité des contenus Web" ou WCAG. La dernière version stable, WCAG 2.1, couvre une exigence d'accessibilité importante: le contraste minimal.
Dans les WCAG 2.1, la relation entre deux couleurs est décrite par leur rapport de contraste, c'est-à-dire le nombre obtenu lorsque vous comparez la luminance de deux couleurs. La luminance permet de décrire la proximité d'une couleur avec le noir (0%) ou le blanc (100%). Les WCAG définissent certaines règles et algorithmes de calcul concernant le rapport de contraste qui doit être appliqué pour que le Web soit accessible. Cependant, ce calcul présente des problèmes connus. À terme, une méthode encore plus fiable sera adoptée, mais, pour le moment, les WCAG sont les meilleures.
Quelles sont les règles ?
Un rapport de contraste plus élevé est évalué par un nombre plus élevé, comme 4,5 ou 7 au lieu de 3. Pour vous familiariser avec le tableau de notation, consultez le vérificateur de contraste de Polypane.
Tester le contraste entre les couleurs
Maintenant que nous savons ce que nous recherchons, comment le tester ? Voici trois outils sans frais pour vous aider à inspecter, corriger et mesurer le contraste de votre site Web. Les points forts et les points faibles de chacun seront décrits afin que vous puissiez tester en toute confiance l'accessibilité des couleurs et du contenu de votre site de multiples façons.
- Pika
Application MacOS, capable de montrer le contraste de n'importe quelle couleur sur l'ensemble de l'écran, les couleurs sur les dégradés, les couleurs avec transparence, etc. L'intent est explicite, les utilisateurs choisissent manuellement les pixels à comparer. Un peu moins d'automatisation, mais avec un gain de fonctionnalités considérable. - VisBug
Extension multinavigateur, capable de superposer plusieurs contrastes à la fois, mais qui, comme DevTools, ne parvient parfois pas à détecter l'intention. - Outils pour les développeurs Chrome
Les outils pour les développeurs sont intégrés à Chrome et offrent différentes 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 sont parfois pas en mesure de détecter l'intent.
Pika (application macOS)
Si DevTools ou VisBug ne peuvent pas évaluer correctement le contraste, par exemple lorsque vous devez tester une couleur en dehors du navigateur ou lorsque la transparence ou les dégradés sont impliqués, Pika est là pour vous 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.
Cela signifie également que l'expérience utilisateur de Pika est différente de celle de DevTools ou de VisBug. DevTools et VisBug font de leur mieux pour afficher les couleurs du texte et de l'arrière-plan du DOM du navigateur, tandis que les couleurs que Pika compare sont choisies manuellement à partir de n'importe quel point de l'écran. Cela donne à Pika plus de contrôle et ouvre de nouveaux cas d'utilisation:
- Comparer deux couleurs, qu'elles soient ou non dans le navigateur : si vous pouvez les voir à l'écran, vous pouvez les tester.
- Comparaison des couleurs avec transparence.
- Comparaison des couleurs dans les dégradés.
- Comparer des couleurs qui utilisent des modes de mélange, comme mix-blend-mode en CSS
Comparer deux couleurs
Comparer le texte à une couleur d'arrière-plan:
Comparez les couleurs de remplissage et de trait des graphiques vectoriels:
Comparer des couleurs avec transparence
Comparez la couleur du texte à différents échantillons de pixels d'arrière-plan. Ici, le gris le plus clair de l'effet verre givré est utilisé comme couleur de comparaison de l'arrière-plan.
Comparer des couleurs avec des dégradés
Comparer du texte sur un dégradé ou sur une image Ici, le L de "Lasso" est comparé au bleu clair de l'image:
VisBug
VisBug est un outil inspiré de FireBug qui permet aux concepteurs et aux développeurs d'inspecter, de déboguer et de jouer visuellement avec la conception de leur site Web. Il est censé avoir une barrière d'entrée plus faible que les outils pour les développeurs Chrome en émulant l'UI et l'UX des outils de conception que les utilisateurs connaissent et apprécient.
Essayez VisBug ou installez-le sur Chrome, Firefox, Edge, Brave ou Safari.
L'outil d'inspection de l'accessibilité fait partie de ses offres.
Inspecter dans les navigateurs (et même sur mobile)
Une fois que l'utilisateur a cliqué sur l'outil d'inspection de l'accessibilité, les informations d'accessibilité de tout élément sur lequel l'utilisateur pointe ou vers lequel il navigue à l'aide du clavier s'affichent dans l'info-bulle. Cette info-bulle inclut des comparaisons de couleurs entre les couleurs de premier plan et d'arrière-plan détectées.
Inspecter un ou plusieurs
DevTools peut examiner une seule association de couleurs ou obtenir un rapport sur toutes vos associations de couleurs sur la page, mais VisBug offre un bon compromis en permettant plusieurs associations de couleurs. Cliquez sur un élément pour que la bulle d'aide reste affichée. Maintenez la touche Maj enfoncée et continuez à cliquer sur d'autres éléments. Toutes les info-bulles resteront à leur place:
Cela est particulièrement important pour la conception basée sur les composants, où plusieurs parties d'un composant doivent obtenir des scores de contraste. Cette méthode permet de voir toutes ces pièces de composant en même temps. Idéal pour les revues de conception.
Outils pour les développeurs Chrome
Si vous avez installé Chrome, vous disposez déjà de nombreux outils de test du contraste:
- Sélecteur de couleur
- Info-bulle d'inspection
- Présentation du CSS
- Phare
- Console JavaScript
- Outils d'émulation pour les daltoniens
- Émulation des préférences de contraste des couleurs du système
- Test APCA WCAG 3.0
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", les valeurs de couleur sont accompagnées d'un petit carré de couleur. Lorsque vous cliquez sur ce nuancier, l'outil de sélecteur de couleurs s'affiche. Si possible, le milieu de l'outil affiche le contraste de la couleur par rapport à un premier plan ou un 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 du rapport de contraste est de 15,79 et comporte deux coches vertes, ce qui signifie qu'il répond aux exigences AA et AAA de WCAG 2.1:
Autocorrection du sélecteur de couleur
Il est pratique de voir le score lorsque vous choisissez 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 indique un score de contraste des couleurs non accessible, il peut être développé pour afficher les cibles de score AA et AAA, ainsi qu'un outil de pipette. À côté de AA et AAA se trouvent des échantillons et une icône de rafraîchissement. Si vous cliquez dessus, la couleur la plus proche sera trouvée:
Si vous n'êtes pas pointilleux sur les couleurs, la fonctionnalité de correction automatique est un excellent moyen de respecter les consignes d'accessibilité et de ne pas trop vous fatiguer pour accomplir la tâche.
Info-bulle d'inspection
L'outil de sélection d'éléments dispose d'une fonctionnalité spéciale lorsque vous pointez sur la page. Il fournit des informations générales sur la police, la couleur et l'accessibilité. L'outil de sélection des éléments est l'icône de gauche dans la capture d'écran suivante. Il s'agit du cadre avec un curseur en forme de flèche en bas à droite. Vous pouvez également la sélectionner à l'aide du raccourci clavier Control+Shift+C (ou Command+Shift+C sous macOS).
Une fois activée, l'icône devient bleue. Si vous pointez sur un élément de la page, l'info-bulle d'inspection rapide suivante s'affiche:
Au lieu de l'outil de sélecteur de couleur, qui vous oblige à trouver la palette de couleurs dans le volet "Styles", cet outil vous permet simplement de pointer 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.
Bump bump 'til you pass 🎶
J'inspecte souvent une association de couleurs avec cet outil d'inspection rapide et je constate qu'elle ne respecte pas tout à fait le ratio requis. Au lieu d'utiliser la fonctionnalité de correction automatique du sélecteur de couleur (parce que je suis pointilleux), j'ajuste les canaux de couleur dans le CSS et j'observe jusqu'à ce que j'atteigne le ratio dont j'ai besoin. Je nomme ce processus "bump bump til you pass" (augmenter les numéros de canaux de couleur jusqu'à ce qu'ils passent les tests WCAG 2.1), car j'augmente les numéros de canaux de couleur jusqu'à ce qu'ils passent les tests WCAG 2.1.
Les étapes suivantes doivent être effectuées dans l'ordre exact:
- Définissez le focus du clavier sur une couleur dans le panneau "Styles".
- Activez l'outil d'inspection des éléments à l'aide du raccourci clavier
Control+Shift+C(ouCommand+Shift+Csous macOS). - Pointez sur une cible.
- Appuyez sur les touches "Haut"/"Bas" du clavier pour modifier les chiffres de la valeur de couleur.
Cela fonctionne, car la valeur de style CSS est toujours sélectionnée par le clavier, tandis que la souris vous permet de pointer sur une cible. Veillez à ne pas cliquer sur votre cible, sinon le focus sera déplacé de la zone de valeur de couleur et vous ne pourrez plus modifier les valeurs tant que vous n'aurez pas rétabli le focus.
Présentation du CSS
Jusqu'à présent, les outils de développement Chrome permettaient d'examiner une combinaison de couleurs à la fois, mais la Vue d'ensemble du CSS peut explorer l'intégralité de votre page et présenter tous les appariements inaccessibles en même temps:
Pour en savoir plus sur cette fonctionnalité, consultez l'article Vue d'ensemble du CSS: identifier les améliorations potentielles du CSS ou regardez la série de conseils DevTools de Jecelyn Yeen sur YouTube pour découvrir comment identifier les améliorations potentielles du CSS avec le panneau "Vue d'ensemble 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 associations de couleurs inaccessibles. Il présente de petites captures d'écran de chaque association de couleurs que vous pouvez examiner, en indiquant si elle est réussie ou non. Toute combinaison non valide aura un impact négatif sur votre score Lighthouse.
Voici à quoi peuvent ressembler ces résultats:
La console JS
Il est possible que tous les outils listés jusqu'à présent ne correspondent pas à votre situation. Peut-être que vous êtes (toute la journée) dans JavaScript. Voici un test à essayer. Le volet "Problèmes" de la console peut signaler en permanence les problèmes d'accessibilité liés au contraste des couleurs pendant la création. Activez la fonctionnalité dans Paramètres > Tests, comme indiqué ci-dessous:
Ouvrez ensuite le volet "Problème" pour voir s'il a détecté des problèmes. Si c'est le cas, elles peuvent se présenter comme suit:
Émulation pour daltoniens
En parlant du contraste des couleurs et de la garantie d'associations de couleurs accessibles, il est utile de mentionner l'outil d'émulation des déficiences visuelles. Cela modifiera les couleurs ou l'apparence de votre conception pour montrer les résultats de différentes formes de daltonisme, ce qui vous permettra de modifier votre conception afin que la couleur ne soit pas le seul moyen de communication de l'expérience utilisateur.
Il n'est pas recommandé d'utiliser exclusivement la couleur pour représenter des informations, comme le rouge pour le négatif et le vert pour le positif. Certaines personnes ne voient pas les verts ou les rouges de la même manière, et cet outil d'émulation vous aidera à le constater et à vous en souvenir.
Émulation des préférences système de contraste des couleurs
De plus en plus d'utilisateurs modifient les paramètres de contraste de leur système d'exploitation, ce qui leur permet de demander une personnalisation du contraste plus ou moins élevée dans leur UI. Le CSS peut exploiter ce paramètre, tout comme il peut le faire avec les préférences de thème clair ou sombre. Chrome DevTools permet d'émuler cette préférence afin que les conceptions puissent tester et s'adapter à la requête de l'utilisateur sans activer le paramètre à partir du système.
Essayer l'APCA WCAG 3.0
Vous pouvez également tester vos associations de couleurs avec le système expérimental de notation du rapport de couleurs APCA. Activé dans Paramètres > Tests, il remplace le système de rapport WCAG 2.1 par un algorithme de vérification du contraste plus récent et amélioré, qui vous permet d'en prévisualiser les résultats à mesure que la proposition évolue vers une norme.
Une fois l'option activée, utilisez l'info-bulle d'inspection du point ou le sélecteur de couleurs pour afficher le score d'association de couleurs et vérifier s'il est acceptable:
Conclusion
Le contraste des couleurs est un élément important de l'accessibilité sur le Web. Le respect de ce principe rend le Web plus utilisable par le plus grand nombre de personnes dans les situations les plus diverses. Nous espérons que ces trois outils vous aideront à faire de bons choix de couleurs.