Créer une palette de couleurs accessible

Créer une palette de couleurs accessible et suffisamment contrastée n’est pas toujours chose aisée. Heureusement, de nombreux outils peuvent faciliter la tâche ; voici mes préférées à ce jour :

Construire une matrice de couleurs

Quand je travaille sur un site existant, ou qui a déjà une identité visuelle, mon premier réflexe est de construire une matrice de couleurs grâce à l’outil Accessible color palette builder.

Les couleurs de la charte graphique de ce site s’associent facilement, c’est un plaisir à travailler 👌

En quelques clics, je renseigne les couleurs dont je dispose et j’obtiens une matrice qui m’indique quelles combinaisons sont valides (et lesquelles sont à éviter).

Je peux ainsi facilement repérer les couleurs problématiques : celles qui ne passent ni en fond, ni en couleur de texte. Il faudra les retravailler, mais j’y viendrais plus bas dans cet article.

Bref, Accessible color palette builder est un outil bien pratique. Tellement que j’ai déployé en local cette PR, qui lève la limite de six couleurs pour pouvoir l’utiliser encore plus intensément (on utilise souvent BIEN plus que six couleurs au final dans une application)

multiple-color-matrix

combinaisons-accessibles — Test de ma gamme de couleurs « neutres »

Enfin, cerise sur le gâteau, on peut sauvegarder la matrice obtenue via une simple URL : il est alors très facile de s’y référer tout au long d’un projet ou de le partager au reste de l’équipe.

👉 Accessible color palette builder

Corriger une combinaison de couleurs

Quand une combinaison n’est pas accessible, il suffit parfois d’y changer un détail pour régler le problème. Pour cela, le tanaguru contrast finder est parfait.

Cet outil permet de trouver de vérifier les contrastes d’une combinaison et de si besoin trouver des alternatives.

Je commence généralement par chercher « des couleurs valides et très proches de la couleur initiale » ; et si jamais aucun résultat n’est trouvé (ça arrive souvent avec le orange, une couleur que j’aime pourtant tellement 😭), je tente alors ma chance avec « une palette de couleurs valide » ou encore en modifiant la couleur de texte plutôt que de fond.

Bref, il faut parfois savoir adapter son idée première, mais les utilisateurs m’en seront reconnaissante, qu’ils aient une vision réduite ou qu’ils utilisent l’application depuis leur téléphone en plein soleil.

👉 tanaguru contrast finder

Valider mes maquettes

Parce que l’erreur est humaine, je me laisse parfois emporter par ma créativité (tiens ce texte en gris clair sur fond blanc, ça va être super !). Alors, avant de finaliser une maquette d’interface dans Figma, je la teste d’abord avec le plugin A11Y Contrast Checker.

Il est très simple à utiliser : après avoir sélectionné une frame, le plugin relève les problèmes de contrastes.

On peut même corriger le tir directement depuis le plugin (même si je préfère passer par l’interface principale pour utiliser mes styles prédéfinis et choisis avec soins).

Quand tout est corrigé, le plugin me félicite d’un AAAMAZING qui me mets toujours en joie 😄.

Par ailleurs, l’accessibilité n’est pas seulement une histoire de contrastes : dans rares contextes (graphiques d’un dashboard, légendes d’une carte…) où la couleur est le moyen principal de communiquer une information, je m’assure aussi que les couleurs choisies sont correctement identifiables.

Le plugin Color Blind m’aide dans cette tâche en me donnant un aperçu de ce que voient des personnes atteintes de troubles visuels :

Interface du plugin Color Blind dans Figma

Le plugin est un peu lent (et globalement, les plugins sont plutôt mal intégrés à Figma) mais ça fait le job.

👉 A11Y Contrast Checker et Color Blind

Pour aller plus loin

Voilà les outils que j’utilise au quotidien. Si vous voulez creuser un peu plus, ces ressources vous intéresseront sûrement pour trouver un workflow qui vous correspond :