Couleurs et Accessibilité, ma conférence au #BlendWebMix 2017

Comment aider les designers quand on est pas designer ? Comment améliorer l’accessibilité visuelle quand on est pas dev front ? Soyez daltonien ! Non enfin je veux, je le suis, je vais vous faire un topo.

Pourquoi cette conférence design

Je ne suis pas designer, je ne suis pas dev front, mais un utilisateur du Web comme beaucoup d’autres MAIS je fais partie des 8% de daltoniens qui visitent vos sites Internet.

Il est très difficile pour une personne qui n’a pas de déficience visuelle de se rendre compte de ce que c’est. Il existe des solutions simple quand on veut simuler un déficience totale par exemple mais c’est plus compliqué quand on a en face de nous des personnes daltoniennes (ou dyschromatopsiques).

Sur la dernière slide vous trouverez des outils et ressources, mais sincèrement, rien ne vaut l’oeil d’un·e daltonienne pour vous guider vers le bonne façon de choisir ses couleurs.

C’est quoi le daltonisme ?

Un peu de science, nous avons au fond de l’Å“il des récepteur de couleurs (des cônes) et des récepteurs de lumière (des bà¢tonnets). Ces 3 types de cônes R, G, B nous permettent de recevoir les couleurs, plus ou moins. Il est possible que vos cônes rouges soient efficaces à 99.99% ce qui ne vous gène pas, vous n’êtes pas considéré « daltonien·ne ». Il se peut aussi que vous ayez moins de des cônes et donc moins de réception de couleurs. Dans ces 2 cas, vous l’êtes.

Il y a 10 fois moins de femmes touchées par ce dysfonctionnement de l’Å“il, il peut donc être léger (comme moi) ou lourd (aucune couleur visible (0,0001 % de la population).

C’est quoi une couleur ?

Pour faire une couleur il faut 4 choses :

1. Une teinte
2. Une saturation
3. De la lumière
4. Du contraste

Une fois la teinte décidée (disons le « vert ») il faut la saturer ou la désaturer, c’est à dire qu’on va tirer vers un vert le plus « dur » ou un vert plus « pà¢le ». Ensuite il faut ajouter ou supprimer de la lumière pour tirer cers un vert « clair » jusqu’au blanc ou au contraire vers un vert « foncé » jusqu’au noir.

Pour le contraste c’est un peu plus compliqué car il dépends du contexte. Il est possible de joueur facilement avec les couleurs complémentaires.

Comment choisir la bonne couleur ?

Souvenez vous (et twittez le) :

Il n’y a pas de mauvaise couleur, il n’y a que des mauvaises utilisations. »” Julio Potier

Lorsque le logo de SecuPress a été réalisé, la question « Quelle est la bonne couleur ? » n’était pas pour décider si elle allait être bien vue par les daltoniens, car peut-importe la couleur sur ce logo, elle sera bien vue, même si la personne ne voit pas le jaune ou le vert, ça sera sa couleur et c’est tout. Ici c’était plus pour le message à faire passer, le vert a été gardé 😉

Travaillez en niveau de gris une fois le design réalisé et vérifiez que vos CTA ou les couleurs que vous avez mis côte à côte sont bien différentiables, c’est une façon de vérifier que ça sera plus facilement lisible.

Nommez les couleurs

SI vous avez un site e-commerce, n’oubliez pas de nommer vos couleurs, un t-shirt sans couleur (s’il n’y a pas de choix de couleur par exemple) est plus difficilement achetable par 8% de la population.

Mais nommez les bien car un t-shirt « Galaxy » ou « Sunshine », ça ne parle pas, ou alors ajouter une double nomenclature avec « bleu marine » et « jaune pà¢le » par exemple.

Ou alors au survol (title), vous pouvez aussi ajouter une information supplémentaire.

Légendes et données

Dans les graphs, utilisez des couleurs plus universelles afin de vous assurer que cela passe mieux OU utilisez des patterns dans les remplissages, c’est moche mais ça marche. Si vous trouvez ça trop moche, alors ajoutez un mode daltonien afin de rendre ça compatible. Les jeux vidéos le font aussi comme World of Warcraft, 2dots, GunPoint!

Les slides

Vous aimez ? Partagez !