Accessibilité et couleurs : outils et ressources pour concevoir des produits accessibles

J’avais discuté sur twitter il y quelque temps des lacunes dans l’enseignement des étudiantes et étudiants en design et notamment du manque de bases de l’accessibilité et des couleurs. Cette discussion a donné lieu a pas mal de réponses intéressantes sur les outils pour mesurer l’accessibilité des couleurs, le design inclusif et quelques discussions sur les emojis.

Plusieurs personnes sont venues me demander depuis des conseils et des outils pour les aider. Plutôt qu’un long tweet, j’ai décidé de rédiger un article « aide mémoire » pour partager toutes les ressources, conseils et outils que j’utilise régulièrement pour construire et vérifier l’accessibilité des couleurs des produits et services que je design. Je continue à mettre à jours régulièrement cet article avec de nouveaux outils.

Dernière mise à jours : 25 avril 2020

** This article also exists in English **

Contraste et accessibilité : quelques notions de base sur la couleur

Dans le design de sites, produits ou applications, le choix des couleurs est important. La couleur peut véhiculer l’identité de votre marque, aider les utilisatrices à comprendre l’information, etc. Malheureusement, tout le monde ne distingue pas les couleurs de la même façon. Certains utilisateurs peuvent être daltoniens, d’autres utilisatrices peuvent être malvoyantes. D’autres encore peuvent se trouver dans différents environnement ou situations qui rendent la perception des couleurs et des contrastes complexes. C’est pourquoi faire attention à l’accessibilité de vos produits, sites et services est primordial.

Je n’entrerai pas tous les détails sur l’accessibilité en général car cet article porte spécifiquement sur les couleurs. Ce que vous devez retenir c’est qu’il y a une liste de critères que vous pouvez trouver dans les directives WCAG 2.1 (en anglais) pour vous aider. Pour le moment le 2.1 n’est pas encore traduit en français mais il existe une traduction pour WCAG 2.0. Si vous êtes en France, le référentiel à suivre est le RGAA.

Dans cette grande liste, la section 1.4 est dédiée à « faciliter la perception visuelle et auditive du contenu par l’utilisateur, notamment en séparant le premier plan de l’arrière-plan ». Pour cette petite introduction, je m’en tiendrai aux critères AA qui est le niveau qu’on essaie de viser le plus souvent.

Concernant l’accessibilité et les couleurs, il y a 2 grandes choses dont vous devez vous souvenir :

  • N’utilisez pas la couleur comme seul moyen visuel de véhiculer une information, une action, etc.
  • Veillez à ce que le rapport de contraste entre le premier plan (texte ou icônes, mais aussi les bordures et autres éléments de formulaire) et le fond soit suffisant.

Illustration visuelle des deux principes cités au dessus

Pour le premier critère, cela signifie par exemple que si vous créez un graphique, vous devez prévoir un moyen autre que la couleur pour différencier les différents éléments. Trello en a un bel exemple. Si vous avez un formulaire, vous ne pouvez pas juste utiliser une bordure rouge pour montrer qu’il y a une erreur. Il y a d’autres exemples sur la page pour comprendre les critères de réussite : Understanding Success Criterion 1.4.1: Use of Color

Pour le second critère, cela signifie que le contraste entre le texte (ou éléments de premier plan) et la couleur de fond doit être :

  • de 4,5 à 1 pour les textes de moins de 18 points et de moins de 14 points s’ils sont en gras
  • de 3 à 1 pour les textes de plus de 18 points et au moins 14 points s’ils sont gras

La conversion points > pixels n’est pas super simple et si vous voulez plus de détails, vous pouvez lire Understanding Success Criterion 1.4.3: Contrast (Minimum)

En résumé: les « petits » textes de moins de 24px (ou les textes en gras de moins de 19px) doivent suivre la règle d’un contraste minimum de 4.5, les textes plus gros de plus de 24px (ou les textes en gras de plus de 19px) doivent suivre la règle d’un contraste minimum de 3.

Vous avez la théorie, maintenant vous vous demandez surement « mais comment suis-je censée mesurer ce rapport de contraste de 4,5 ou 3, est-ce que je dois faire des maths pour chaque couleur ?! » Ne vous inquiétez pas, j’ai préparé une sélection d’outils et de ressources pour vous aider à démarrer.

Les outils de simulation de daltonisme

Le premier critère donc de s’assurer que l’information n’est pas seulement véhiculée par la couleur. Vous pouvez bien sûr commencer par vérifier visuellement vos maquettes et rechercher tous les endroits où ce critère peut être appliqué. Les formulaires, les infographies, les graphiques, les statuts sont généralement un bon point de départ. Faites également attention aux sélecteurs de couleurs de produits si vous faites un site de e-commerce (plus d’informations à ce sujet dans les articles de la section suivante). Vous pouvez ensuite utiliser des simulateurs de daltonisme pour simuler et tester que vos choix de couleur fonctionnent avec différents types de daltonisme.

Color Oracle est un simulateur de daltonisme gratuit qui fonctionne sous Windows, Mac et Linux.

Stark est un plugin Sketch, Adobe XD et Figma qui permet de simuler différents types de daltonisme.

Si vous utilisez Photoshop, vous pouvez aller dans Affichage >Format d’épreuve et choisir l’une des options.

L’outil en ligne de Toptal Colorfilter vous permet de tester votre site Web et vous montre comment les personnes daltoniennes verront vos pages.

Outils pour vous aider à vérifier le contraste des couleurs

Le deuxième critère est le rapport de contraste entre le texte (ou éléments de premier plan) et l’arrière-plan. Comme je vous l’ai dit ici, vous n’aurez pas besoin de faire les calculs vous-même, il y a beaucoup d’outils pour vous aider.

Outils en ligne

Tanaguru Contrast Finder vous permet non seulement de vérifier le rapport de contraste entre deux couleurs, mais vous aide également à trouver une nouvelle couleur si celle que vous avez choisie ne correspond pas au rapport de contraste souhaité. Vous pouvez lire mon article Tips to Create an Accessible and Contrasted Color Palette pour vous aider à créer un jeu de couleur accessible avec cet outil.

Color Review vous permet de vérifier le rapport de contraste entre deux couleurs. La matrice de couleurs vous aide à trouver une alternative si les couleurs que vous avez choisies ne fonctionnent pas.

Color & Contrast Picker  vous permet de choisir une couleur d’arrière-plan et de premier plan et vous donne la valeur de contraste entre ces deux couleurs. Vous pouvez ensuite jouer avec les petites poignée pour trouver les combinaisons de couleurs accessibles les plus proches.

Contrast Ratio est un outil en ligne qui vérifie la ratio de contraste entre un couleur de texte et un arrière plan et vous montre le résultat avec du text pour que vous vous fassiez une idée du rendu.

Colorable est un autre outil en ligne qui vous permet de vérifier le rapport de contraste texte/arrière-plan. L’outil permet également de prévisualiser à quoi il ressemblera. Si le ratio de contraste n’est pas assez élevé, vous pouvez jouer avec les petits leviers Hue (teinte), Saturation (saturation) et Lightness (luminescence) pour trouver une couleur qui fonctionnera.

Color contrast checker de polyplane est un autre outil qui analyse et vous suggère des couleurs qui correspondent au rapport de contraste requis. Vous pouvez choisir entre les niveaux AA et AAA et l’outil vous suggérera des couleurs avec un ratio de contraste suffisant.

Si vous voulez tester un site entier vus pouvez utiliser Checkmycolours.com. Cet outil vous permet d’entrer une URL et de créer un rapport de tous les problèmes de contraste trouvés sur votre site.

Who can use this color combination?  est un outil qui vous permet non seulement de vérifier le ratio de contraste d’une combinaison de couleurs, mais aussi de prévisualiser cette combinaison avec différentes simulations de daltonisme et vous indique le pourcentage de la population qui est concerné.

Des outils hors ligne que vous pouvez installer

Contrast Analyser est l’outil que vous devez installer sous Windows, MacOS et Linux. Il vous permet de saisir une couleur ou de la récupérer avec la pipette pour vérifier le rapport de contraste. Par contre faites encore une fois attention avec l’outil de pipette : en fonction de ma configuration d’écran j’ai parfois des problèmes et l’hexadécimal qu’il récupère n’était pas exactement le bon. Donc je m’en tiens au « copier-coller » des couleurs hexadécimales dans l’outil.

Si vous êtes sur Mac et que vous êtes prêt à payer 7 $, vous pouvez obtenir usecontrast.com, mais je ne l’ai pas testé.

L’accessibilité des couleurs dans le design de sites et produits: articles et ressources

Maintenant que vous avez des outils, voici quelques autres articles et ressources pour vous aider à démarrer et à créer des sites et produits accessibles.

Construire une palette de couleurs accessible

90 combinaisons est une page qui propose comme son nom l’indique 90 combinaisons de texte / couleur de fond qui ont un rapport de contraste suffisant. Attention cependant au ratio, certains d’entre eux ont un ratio de 4,1 AA, ce qui signifie que vous ne pouvez les utiliser que pour du texte de plus de 18 points (ou du texte en gras de plus de 14 points). Si vous manquez d’inspiration, ce site est un endroit pour commencer, mais….

Mais de mon point de vue du designer, je pense que vous devriez éviter la moitié des 90 combinaisons. Le violet sur le jaune ou le vert sur le violet passent certes le test mathématique du ratio 4,5, mais ces combinaisons rendent le texte super difficile à lire. Ce n’est pas parce qu’on peut les utiliser ensemble qu’on doit le faire.

Accessible color palette builder est l’un de mes outils préférés. Vous pouvez entrer jusqu’à 6 couleurs et il vous construira cette matrice qui vous permet de savoir quelles couleurs peuvent être combinées.

Celui-ci est limité à 6 couleurs, si vous voulez une matrice plus complexe avec plus de couleurs, vous pouvez également vérifier cet outil.

Contrast Grid vous propose le niveau avancé en terme de grilles de combinaisons d’avant-plan et d’arrière-plan. Dans cet outil, vous pouvez choisir les couleurs spécifiques que vous voulez pour les lignes et les colonnes et construire votre propre grille personnalisée (via Mickaël G.)

Cloudflare color tool  Okay, cet outil n’est PAS le plus intuitif mais il est super puissant. En haut de l’écran, vous pouvez choisir de construire une palette à partir d’une URL, d’une image ou de jouer avec des couleurs. Vous obtenez ensuite une liste de couleurs que vous pouvez utiliser. Glissez-déposez ces couleurs dans les 4 catégories (parent, couleur, arrière plan et bordure) pour obtenir un bel aperçu, ou utilisez le lien « view 4 accessible combinations » pour voir toutes les combinaisons de couleurs accessibles.

My struggle with colors – Demystifying colors for accessible digital experiences and My struggle with colors, part II – Building an accessible color system from scratch. Sont deux excellents articles pour vous aider à construire une palette de couleurs. J’ai appliqué la méthode des 10 teintes avec la méthode des 5 étapes sur quelques projets, ça marche assez bien.

Aider les utilisateurs daltoniens à comprendre votre contenu

We are Colorblind est un site web avec des ressources, des articles et des exemples dédiés à aider d’autres personnes à comprendre le daltonisme.

Geri Coady’s ressources

Geri Coady est une designer qui a mis beaucoup de ressources à votre disposition pour vous aider :

Quelques articles supplémentaires pour vous aider

Enfin, voici quelques articles supplémentaires avec quelques conseils pour aller un peu plus loin dans ce sujet

Si vous avez d’autres outils et ressources à partager, les commentaires sont ouverts.

Attention aux images de fond en CSS

Maintenant que vous en savez un peu plus sur les couleurs et l’accessibilité, il y a une dernière chose à laquelle vous devez faire attention : les images de fond en CSS. Prenons l’exemple du site pragm.co de mon amie Myriam. Myriam a fait un bon travail sur le choix des couleurs. Si vous vérifiez le ratio de contrast entre sont violet foncé et le text blanc dans les outils que j’ai mentionnés ci-dessus, vous verrez que le rapport est bon. Bien joué Myriam ! !!

Néanmoins, si vous analysez son site avec un outil de vérification automatique de l’accessibilité comme Wave (un outil en ligne qui fourni un rapport sur les problèmes d’accessibilité), vous pouvez voir qu’elle a quelques problèmes de contraste avec son en-tête.  Pourquoi est-il wave met une erreur alors que le rapport de contraste entre ce fond violet et le texte blanc à l’écran est de 11:6? En fait ici wave (et d’autres outils automatisés) vont considérer que le fond de son entête est en fait blanc (#ffffff). Pourquoi ? Parce que le thème de Myriam n’ajoute que l’image de fond sans aucune couleur de secours. Comme vous pouvez le voir sur la partie droite de cette capture d’écran, si l’image n’est pas chargée, Myriam a effectivement un text blanc sur fond blanc. Et c’est pour ça que ces outils automatisés affichent un avertissement si vous n’avez pas une couleur de fond de secours, au cas où l’image n’est pas chargée (pour diverses raisons).

 Il est impossible de lire "Digital Marketing Agency" sans l'image de fond CSS

Comment y remédier ? Assurez-vous d’avoir une couleur de fond de secours pour vos éléments lorsque la couleur de fond est données par une image CSS. Cela peut être fait en fournissant une couleur de fond directement dans la déclaration CSS de l’image de fond. Ca fonctionne bien avec des JPGs. Mais si vous avez besoin de transparence (comme Myriam), vous devrez peut-être trouver un autre moyen d’obtenir cette couleur de fond. Testez votre site en désactivant les images CSS et vous verrez très vite où vous avez des soucis.

À l’aide, je suis coincée avec la marque du client.

Parfois, il faut travailler avec  une identité graphique imposée par le ou cliente. Certains clients et clientes n’aimeront pas que vous leur disiez que vous voulez changer la couleur de leur charte validée par toute la hiérarchie « juste » à cause de soucis de contraste sur le site Web. Pour ces cas là, une dernière solution consiste à utiliser un sélecteur de style pour fournir une version alternative conforme.

Merci également à Geoffrey Crofte pour la relecture et l’ajout d’un outil à la liste ?

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)

Me suivre sur Twitter

Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

4 thoughts on “Accessibilité et couleurs : outils et ressources pour concevoir des produits accessibles

  1. merci très intéressant, justement je me posais la question de la gestion des chartes clients qui convoquent des couleurs qui ne sont pas accessible pas évident ce contexte.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *