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 du 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. Il est parfois facile de tester le contraste, et parfois c'est très difficile. À la fin de cet article, vous aurez 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 est une façon 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 qui définissent ce rapport de contraste pour que le Web soit accessible. Toutefois, 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 la meilleure option dont nous disposons.
Quelles sont les règles ?
Un rapport de contraste plus élevé est noté avec un nombre plus élevé, par exemple 4,5 ou 7 au lieu de 3. Pour vous familiariser avec le tableau de notation, consultez l'outil de vérification du contraste de Polypane.
Tester le contraste entre les couleurs
Maintenant que nous savons ce que nous recherchons, comment le tester ? Voici trois outils gratuits 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 multiplate-forme permettant d'afficher plusieurs superpositions de contraste de manière unique à la fois, mais comme les outils de développement, elle n'est pas toujours en mesure de détecter l'intent. - 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 quelconques
Comparer le texte à une couleur d'arrière-plan :
Comparer les couleurs de trait et de remplissage des graphiques vectoriels:
Comparer les couleurs avec la 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 dépoli est utilisé comme couleur de comparaison d'arrière-plan.
Comparer les couleurs avec les 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'une de ses offres est l'outil d'inspection de l'accessibilité.
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 il 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 les autres éléments. Toutes les info-bulles restent affichées:
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. Également idéal pour les revues de conceptions.
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 "Elements", les valeurs de couleur sont accompagnées d'un petit carré de couleur visuelle. 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 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 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 trop pointilleux au niveau des couleurs, la fonctionnalité de correction automatique est un excellent moyen de respecter les consignes d'accessibilité et de ne pas être trop dur 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 d'éléments est l'icône à gauche de la capture d'écran suivante. Il s'agit de la boîte avec une 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. Pointez sur n'importe quel élément de la page pour afficher l'info-bulle d'inspection rapide suivante :
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 (car je suis pointilleux), je déplace les chaînes de couleur dans le CSS et je regarde jusqu'à ce que le ratio dont j'ai besoin soit obtenu. 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 replacé le focus.
Présentation du CSS
Jusqu'à présent, les outils pour les développeurs Chrome permettent d'examiner une association de couleurs à la fois, mais la page Présentation du CSS peut explorer l'intégralité de votre page et présenter toutes les associations inaccessibles en même temps:
Pour en savoir plus sur cette fonctionnalité, consultez l'article Présentation du CSS: identifiez les améliorations potentielles du CSS. Vous pouvez aussi regarder Jecelyn Yeen sur YouTube dans la série "Conseils sur les outils de développement" pour savoir comment identifier les améliorations potentielles du CSS à l'aide du panneau "Présentation du CSS".
Phare
Lighthouse est un autre outil d'audit des outils pour les développeurs Chrome. Il peut explorer votre page et signaler les paires de couleurs inaccessibles. Il contient de minuscules 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 :
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 illustrer 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 par lequel l'expérience utilisateur communique avec l'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. Certains utilisateurs ne voient pas les verts ni les rouges de la même manière, et cet outil d'émulation vous aidera à en faire l'expérience et à vous en souvenir.
Émulation des préférences système pour le 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 importante 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 WCAG 3.0 APCA
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'afficher un aperçu de ses résultats à mesure que la proposition évolue vers une norme.
Une fois l'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 voir s'il réussit:
Conclusion
Le contraste des couleurs est un élément important de l'accessibilité sur le Web. Le respecter 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.