Les 6 grands défis de la couleur dans un projet dataviz

6 grands défis. Ce que voyez juste au-dessus n’est qu’une partie de la palette de couleurs créée pour l’un de nos clients. Vous comprendrez alors combien nous sommes désarçonné·e·s face aux chartes graphiques de nos interlocuteur·rice·s qui ne précisent que quelques couleurs à utiliser pour l’identité de la marque. Quid de la dataviz ? Ultra-majoritairement, c’est le néant. Alors nous devons orchestrer nous-mêmes un système de couleurs, pilier de la transmission d’informations statistiques.

Parlons concret : nous avons décortiqué pour vous le projet du CCCA-BTP, organisme au service de la formation professionnelle dans le BTP et en particulier de l’apprentissage, qui vient de refondre son ambitieuse plateforme de données (outils, graphiques et cartographies, baromètres…).

🎨 Défi 1 - Définir une palette harmonieuse capable de gérer de nombreuses modalités

Le défi. Notre point de départ : les 2 ou 3 couleurs de la charte de la marque. Mais face à un sondage avec 6 ou 8 réponses, il faut imaginer autant de teintes qui doivent rester cohérentes avec l’identité.

Notre approche. Créer les couleurs supplémentaires à partir des teintes d’origine et alterner les tons et les niveaux de contraste dans l’ordre de la palette. Pourquoi alterner ? Pour deux raisons :

1/ Eviter que deux modalités voisines dans un graphique ne tombent sur deux bleus proches, créant un regroupement visuel artificiel.

2/ Améliorer la lisibilité : un œil qui saute d’une modalité à l’autre perçoit mieux les écarts quand les contrastes sont répartis, pas concentrés.

❓Défi 2 - S’adapter aux différentes natures de questions

Le défi. La plateforme du CCCA-BTP restitue des sondages dont les questions appellent des réponses de natures très différentes :

• des questions à choix multiples → réponses catégorielles
• des mesures d’intensité (satisfaction, fréquence) → réponses séquentielles
• des positions d’accord / de désaccord → réponses divergentes

Notre approche. En partant du bleu de la charte, nous avons réalisé 3 types de palettes pour gérer efficacement ces différentes natures de réponses.

⚖️ Défi 3 - Être vigilant·e à “l’émotion des couleurs”

Le défi. Les couleurs ne sont jamais neutres. Le vert évoque le positif, le rouge l’alerte, le gris le neutre ou un état “désactivé”. Attribuer du vert sur “tout à fait d’accord” et du rouge sur “pas du tout d’accord” semble intuitif… jusqu’à ce que l’on tombe sur « Vous arrive-t-il de vous sentir en échec ? ». Là, choisir le vert pour la réponse “souvent” sera un contresens.

Notre approche. Beaucoup de tests pour trouver les couleurs qui ne tromperont pas l'utilisateur·ice. D’ailleurs, vous trouverez dans ce billet passionnant une étude (en anglais) qui détaille les liens entre émotions et couleurs. Saviez-vous que le bonheur est associé à huit couleurs et la tristesse à cinq ?

🔗 Défi 4 - Faire cohabiter plusieurs registres de couleurs

Le défi. Dans un projet aussi transversal que cette plateforme, la couleur joue sur plusieurs registres qu’il faut penser ensemble :

• les couleurs d’interface : celles qui reviennent sur les éléments récurrents, comme les boutons et les états actifs (un élément sélectionné par exemple)
• les couleurs des données : nous avons vu ci-dessus ces palettes permettant de lire l’information des catégories, des intensités, des comparaisons
• les couleurs transversales : ici, nous avons 2 sujets récurrents que sont les apprenti·e·s, invariablement en violet, et la voie scolaire, en jaune
• les couleurs d’identification : la plateforme comprend 4 outils principaux, chacun rythmé par une couleur dominante qui le distingue des autres

Notre approche. L’utilisateur·rice, qui navigue d’un outil à l’autre, doit retrouver ses marques sans effort conscient : le genre de cohérence qui ne se remarque pas quand elle est là, mais qui manque cruellement quand elle est absente.

🖱️ Défi 5 - Prévoir les variations liées aux interactions

Le défi. Sur une plateforme interactive, la couleur ne reste pas figée. Elle doit exprimer de multiples états : actif, inactif, survolé, sélectionné, désélectionné.

Notre approche. Chaque couleur de base doit donc être déclinée en plusieurs variantes (états de transparence dans notre cas), cohérentes entre elles et lisibles dans leur contexte. Un survol trop discret et l’interaction passe inaperçue, un désélectionné trop contrasté et la hiérarchie s’effondre.

💡 Défi 6 - Savoir éteindre la couleur

Le défi. Tout ne mérite pas d’être coloré. Un graphique monochrome bien hiérarchisé peut être plus efficace qu’un graphique bariolé, la couleur posant parfois plus de problèmes qu’elle n’en règle.

Notre approche. Le gris et l’aplat plus ou moins opaque ont un vrai rôle à jouer : signaler un élément neutre, une donnée manquante, une modalité dont on veut réduire la présence visuelle. C’est très utile aussi pour faire ressortir, par contraste, l’unique élément qui compte : la moyenne, la sélection de l’utilisateur·rice ou le point remarquable.

🚀 Défi ultime - Relever tous ces défis ET rester le plus accessible possible

Le défi. Environ 8,5% des Français et Françaises présentent des troubles de la perception des couleurs, le daltonisme en étant la forme la plus courante. Ayant pour ambition d’être accessible à tous·tes, chaque palette créée doit passer les tests de simulation de déficiences visuelles et respecter les ratios de contraste.

Notre approche. Idéalement, la lecture des données ne doit pas reposer uniquement sur la teinte : on peut utiliser des libellés directs, une iconographie distincte, un accès aux données source... Et quand des couleurs proches cohabitent dans un histogramme empilé ou un camembert, un liseré blanc (ou noir) entre les segments suffit souvent à rétablir une meilleure lisibilité.

✏️ Ce qu’il fallait retenir

• N’oubliez pas d’inclure un chapitre dataviz dans vos chartes graphiques (ou appelez-nous pour les créer ;)). Des palettes de couleurs et des types de graphiques pensés pour les données en amont, ce sont des semaines de travail économisées en aval.
• La couleur en dataviz, c’est un système, pas une liste à la Prévert. Type de données, nombre de modalités, interactions, accessibilité : tout doit constituer un ensemble cohérent et activable.
• On ne peut pas être parfait·e sur tous les axes face à toutes ces contraintes : il faudra faire des choix, les assumer et les documenter pour la suite.

Merci à nos partenaires sur ce projet : GTAB (développement) et Pauline Osmont (design)

POUR ALLER ENCORE PLUS LOIN

✍️ Un article du blog de Datawrapper sur l’utilisation des couleurs en dataviz

🎨 Viz palette, un outil pour gérer l’accessibilité des couleurs en dataviz