De belles couleurs de feux de circulation accessibles

author
4 minutes, 3 seconds Read

Tout le monde les utilise : Le vert, le jaune (ou l’orange) et le rouge. Nous les utilisons dans la visualisation des données, nous les utilisons dans les boutons, nous colorons le texte et les icônes avec eux et les mettons dans les alertes. Ils sont souvent utilisés dans les moments cruciaux, lorsque nous annonçons un succès ou que nous annonçons une mauvaise nouvelle. Nous en abusons également, en les utilisant pour attirer l’attention là où elles ne sont pas pertinentes. Ce que nous ne faisons pas, bien trop souvent, c’est les rendre accessibles.

Une minorité importante de personnes sont daltoniennes, et la plupart d’entre elles ont un daltonisme rouge-vert. Depuis 2011, j’ai dû résoudre la question de l’accessibilité des couleurs dans des interactions importantes, telles que les alertes pour les constantes du patient, la qualité des soins aux patients, l’état du serveur cloud ou les analyses des ventes des cadres. Voici quelques conseils d’accessibilité que j’ai recueillis en cours de route, ainsi que mon modèle personnel pour une palette de couleurs de circulation utilisable et accessible.

Vous pouvez concevoir une belle palette adaptée aux daltoniens, mais cela ne fait jamais de mal de renforcer le message. Au lieu de changer le texte en rouge ou en vert, mettez une icône rouge ou verte de forme différente à côté du texte. De cette façon, même si vous n’avez aucun contrôle sur votre palette de couleurs, ou que le graphique a été imprimé en noir et blanc, ou que votre utilisateur ne voit qu’en gris, vous avez fait passer votre message.

Cas d’école : Excel. Excel offre des icônes dans des couleurs de feux de circulation pour aider à raconter votre histoire de données. Assurez-vous d’utiliser des icônes de forme différente ainsi que des couleurs différentes ! Voici pourquoi :

Excel de bureau, Office 2013. Faites attention aux cercles rouges et verts – pourriez-vous les distinguer facilement ? Microsoft a résolu ce problème dans les versions ultérieures.

La deutéranopie et la protanopie sont deux types courants de daltonisme rouge-vert. Tester vos couleurs par rapport à eux optimisera la plupart de vos utilisateurs, mais les icônes aident à sceller l’affaire.

Ne faites pas confiance aux palettes de couleurs prédéfinies

Il existe de nombreux frameworks et boilerplates extrêmement utiles en ligne. Chacun répond à de nombreux besoins, mais tous n’ont pas eu le temps d’optimiser leurs couleurs pour le daltonisme.

Exemples de thèmes de couleurs prédéfinis populaires qui n’ont pas vérifié l’accessibilité dans l’utilisation des couleurs. (Ou, « Pourquoi ne pas utiliser l’orange. »)

La question la plus importante lorsque vous examinez vos rouges, verts, oranges et jaunes est la suivante : « Mes utilisateurs reconnaîtront-ils cette couleur lorsqu’ils la verront seule ? » Ne faites pas confiance aux personnes qui ont créé votre framework pour avoir pensé à cela. Vérifiez par vous-même.

Comment faites-vous cela, vous demandez-vous ? Pendant de nombreuses années, la seule solution que j’ai trouvée pour faire des tests était Photoshop d’Adobe, qui offrait des vues de protanopie et de deutéranopie de tout ce que je créais. Les options se trouvent sous View → Proof Setup (voir l’image ci-dessous).

Capture d’écran : trouver les aperçus de daltonisme dans Adobe Photoshop.

Maintenant, le Coblis Corblindor (Color Blind Simulator) est devenu mon outil de prédilection. Il suffit de faire une capture d’écran rapide de votre travail, et de voir comment il se présente pour de nombreux types de daltonisme.

Planifiez à l’avance avec un modèle de couleur

J’ai fait beaucoup de travail de couleur de visualisation de données au fil des ans, et un modèle a émergé que je trouve utile. Je l’offre ici, dans l’intérêt de rendre les données plus utilisables. Je recommande fortement de considérer cette approche lorsque vous développez une palette de couleurs de marque.

Notez comment le clair vs le foncé et le chaud vs le froid différencient le rouge et le vert. Votre jaune doit être significativement plus clair que votre rouge ou votre vert!

Voici les directives clés:

  • Utilisez une teinte claire, moyenne et foncée. Votre jaune devrait être votre nuance claire.
  • Utilisez un vert chaud et un rouge froid, ou un vert froid et un rouge chaud. Il suffit de ne pas avoir les deux froids ou les deux chauds.
  • Pas d’orange. Parce qu’il est beaucoup plus léger, l’utilisation du jaune au lieu de l’orange rend beaucoup moins probable que votre couleur d' »avertissement » entre en conflit avec votre vert de « succès » pour les utilisateurs daltoniens, ou ressemble trop à votre rouge de « problème sérieux » (erreurs, par exemple).

C’est tout ! Merci de votre lecture. Allez-y et amusez-vous à raconter de bonnes histoires avec vos données.

Similar Posts

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.