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

Stéphanie Walter

Senior UX Designer - Mobile Expert

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

Follow on Twitter

Le tweet sur l’enseignement des bases de l’accessibilité et des couleurs à des étudiants en design que j’avais fait un peu à la va vite a attiré beaucoup d’attention. Il a donné lieu à des discussions intéressantes sur l’accessibilité des couleurs (et quelques discussions inattendues sur les emojis ^^^). J’ai donc décidé de partager avec vous aujourd’hui 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.

** 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 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.

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.

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.

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.

À 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 ?

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

3 réflexions au sujet de « Accessibilité et couleurs : outils et ressources pour concevoir des produits accessibles »