Tendances du Design

La couleur en visualisation de données : graphiques, diagrammes et cartes

9 min de lecture

La couleur en visualisation de données n'est pas de la décoration. C'est un encodage — un canal qui porte de l'information au même titre que la position, la longueur et la taille. Quand la couleur est bien utilisée, les lecteurs saisissent les patterns instantanément. Quand elle est utilisée sans soin, les graphiques induisent en erreur, confondent ou excluent des segments entiers de l'audience.

Ce guide couvre les trois types d'échelles de couleurs canoniques, la façon dont le daltonisme remodèle les décisions de dataviz, et les erreurs les plus courantes qui fragilisent des travaux par ailleurs solides.


Pourquoi la couleur est un encodage puissant — et dangereux

Parmi les attributs visuels préattentifs étudiés en recherche sur la perception, la couleur se distingue par sa vitesse brute. Les lecteurs détectent en quelques millisecondes un point d'une couleur distincte dans un nuage de points de milliers de points, sans recherche consciente. Ce pouvoir est réel, mais il s'accompagne de contraintes.

La couleur encode l'information efficacement seulement quand :

  1. Le lecteur peut distinguer les valeurs encodées
  2. L'encodage est intuitif (pas arbitraire)
  3. Les choix de couleurs résistent à différentes conditions de visualisation (impression, projecteur, vision daltonienne)

Violez l'une de ces conditions, et la couleur cesse d'être un signal utile pour devenir du bruit. Les types d'échelles ci-dessous sont des réponses structurées à chacune de ces contraintes.


Échelles de couleurs séquentielles : du clair au foncé

Les échelles séquentielles représentent des données qui évoluent dans une direction — typiquement des valeurs basses vers des valeurs élevées, ou de sparse à dense. La caractéristique définissante est une teinte unique qui varie en luminosité et parfois en saturation.

Comment fonctionnent les échelles séquentielles

Une échelle séquentielle ancre la teinte la plus claire à la valeur de données la plus basse et la nuance la plus foncée à la valeur la plus élevée. Chaque valeur intermédiaire reçoit une couleur placée proportionnellement sur ce continuum.

Une échelle séquentielle pratique à teinte unique pour la densité de population géographique :

Valeur Hex Description
Très faible #EFF6FF Bleu quasi-blanc
Faible #BFDBFE Bleu ciel pâle
Moyen #60A5FA Bleu clair
Élevé #2563EB Bleu vif
Très élevé #1E3A8A Bleu marine profond

Cet encodage est intuitif : plus de bleu signifie plus. Les lecteurs avec n'importe quelle perception des couleurs peuvent lire l'échelle car elle repose sur la luminance, pas sur la différenciation de teinte.

Conseils pratiques

  • Évitez les dégradés arc-en-ciel (spectraux) dans les contextes séquentiels. Les dégradés spectraux — du rouge à l'orange au jaune au vert au bleu — créent de fausses ruptures aux limites de teinte. Un changement soudain du jaune au vert autour du point médian signale une rupture catégorielle qui n'existe pas dans les données. Les palettes séquentielles perceptuellement uniformes (comme celles dérivées d'OKLCH ou de CIELAB) évitent cet artefact.
  • Utilisez une progression perceptuellement uniforme. Uniforme signifie que des pas égaux dans les données produisent des pas d'apparence égale dans la couleur. Les progressions non uniformes sur-accentuent certaines plages de valeurs.
  • Extrémité saturée, origine désaturée. Une origine légèrement saturée quasi-blanche et une extrémité foncée entièrement saturée donnent la plage perceptuelle la plus large.

Vous pouvez construire des échelles séquentielles à teinte unique en partant d'une teinte de base dans le générateur de palettes et en la combinant avec le générateur de nuances pour garantir des pas réguliers.


Échelles de couleurs divergentes : deux extrémités de teinte

Les échelles divergentes représentent des données ayant un point médian porteur de sens. Quand les valeurs au-dessus et en dessous de ce point médian sont conceptuellement différentes — pas seulement quantitativement différentes — une échelle divergente rend visibles les deux moitiés simultanément.

Quand utiliser une échelle divergente

Les cas d'utilisation classiques incluent :

  • Résultats électoraux : rouge pour l'avantage républicain, bleu pour l'avantage démocrate, violet neutre ou blanc pour un résultat 50/50
  • Performance financière : rouge pour les pertes, vert pour les gains, neutre pour l'équilibre
  • Anomalies de température : bleu pour en dessous de la moyenne, rouge pour au-dessus, blanc pour la norme historique
  • Scores de sentiment : du sentiment négatif au sentiment positif, neutre au centre

Concevoir une échelle divergente

Une échelle divergente nécessite trois points d'ancrage : les deux extrémités de teinte et le centre neutre.

Exemple pour une échelle de satisfaction d'enquête (très insatisfait → neutre → très satisfait) :

Position Hex Description
Très insatisfait #991B1B Rouge profond
Insatisfait #F87171 Rouge doux
Neutre #F5F5F4 Blanc cassé
Satisfait #4ADE80 Vert doux
Très satisfait #166534 Vert profond

Le centre neutre doit être presque achromatique — un gris clair ou blanc cassé — afin que les valeurs de chaque côté du point médian se lisent comme des catégories distinctes.

Écueils

  • Plage perceptuelle inégale de chaque côté. Le rouge et le vert n'ont pas la même intensité visuelle à des niveaux de saturation équivalents. Utilisez un outil pour vérifier que vos deux extrémités sont perceptuellement équidistantes du neutre, pas seulement numériquement équidistantes.
  • Choisir des paires de teintes qui s'effondrent pour les daltoniens. Les échelles divergentes rouge-vert sont le coupable le plus courant. Cela est traité en détail dans la section sur le daltonisme ci-dessous.

Échelles de couleurs catégorielles (qualitatives) : teintes distinctes

Les échelles catégorielles encodent des données nominales — des catégories qui n'ont pas d'ordre inhérent. Le pays A n'est pas supérieur ou inférieur au pays B ; il est simplement différent. Cela nécessite des couleurs aussi perceptuellement distinctes les unes des autres que possible, sans ordre ni hiérarchie implicites.

Principes des bonnes palettes catégorielles

Distance perceptuelle maximale. Les couleurs doivent être réparties autour du cercle chromatique, pas regroupées. Une palette qui utilise trois bleus, deux verts et un violet ne fonctionnera pas car les lecteurs confondront les teintes similaires.

Luminosité approximativement égale. Si certaines catégories sont claires et d'autres foncées, les foncées domineront visuellement même si elles ne sont pas plus importantes. Visez une luminance similaire pour toutes les couleurs catégorielles.

Pas plus de 7 à 10 catégories, idéalement moins. La mémoire à court terme humaine retient environ 7 unités. Demander aux lecteurs de suivre plus de 7 associations distinctes couleur-catégorie impose une charge cognitive qui fragilise le graphique. Si vous avez 15 pays, reconsidérez si la couleur est le bon encodage.

Une palette catégorielle équilibrée à 6 couleurs :

Catégorie Hex Teinte
Catégorie A #3B82F6 Bleu
Catégorie B #EF4444 Rouge
Catégorie C #10B981 Vert-sarcelle
Catégorie D #F59E0B Ambre
Catégorie E #8B5CF6 Violet
Catégorie F #F97316 Orange

Bleu, rouge, vert, ambre, violet et orange sont largement répartis autour du cercle chromatique et ont des valeurs de luminosité similaires.

Tester les palettes catégorielles

Avant de finaliser, vérifiez que votre palette fonctionne quand :

  • Imprimée en noir et blanc (vérifiez que la similarité de luminance n'élimine pas les distinctions)
  • Visualisée à petite taille dans une légende
  • Visualisée par quelqu'un atteint de daltonisme (voir ci-dessous)

Le simulateur de daltonisme gère le troisième test.


Daltonisme en visualisation de données

Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience héréditaire de la vision des couleurs. Dans une audience de bureau typique de 50 personnes, 3 à 4 lecteurs perçoivent probablement les couleurs différemment. Dans une visualisation publique, le nombre n'est pas négligeable.

Les types les plus pertinents pour la dataviz

Deutéranopie / Deutéranomalie : sensibilité réduite au vert. La forme la plus courante (~5 % des hommes). Le rouge et le vert semblent similaires en teinte ; la distinction s'effondre vers une plage de brun-jaune-gris.

Protanopie / Protanomalie : sensibilité réduite au rouge. Moins courante (~1 % des hommes). Le rouge semble plus foncé et moins saturé ; une confusion rouge-vert se produit.

Tritanopie : rare (~0,001 %). Confusion bleu-jaune. Affecte très peu de personnes mais devient pertinent quand le bleu est une couleur catégorielle principale.

Le désastre rouge-vert

L'erreur de daltonisme en dataviz la plus courante est l'échelle divergente rouge-vert — utilisée constamment pour les données financières, les cartes et les indicateurs de statut. Pour les lecteurs deutéranopes et protanopes, les deux extrémités de teinte s'effondrent en tons brunâtres ou olivâtres presque identiques. Le graphique ne transmet pratiquement aucune information à environ 6 % des lecteurs masculins.

Alternatives :

Remplacez rouge-vert par :

  • Bleu-orange (#1D4ED8 à #EA580C) : largement distinguable dans tous les types courants de vision des couleurs
  • Violet-vert (#7C3AED à #059669) : également robuste pour la deutéranopie et la protanopie
  • Rouge-bleu avec une forte différence de luminosité : fonctionne pour la plupart des formes si le contraste de luminosité est suffisamment fort

Les indicateurs de statut feux tricolores (rouge-jaune-vert) ont le même problème. Remplacez par des formes et des étiquettes comme encodage principal, et utilisez la couleur comme signal redondant secondaire.

Stratégies de design pour la robustesse aux daltoniens

  1. Utilisez le contraste de luminance, pas seulement le contraste de teinte. Les couleurs qui diffèrent significativement en luminosité restent distinguables sous la plupart des formes de daltonisme car la perception de la luminance est largement préservée.

  2. Ajoutez des encodages redondants. Ne vous fiez pas à la couleur seule. Utilisez :

  3. Différents styles de ligne (plein, tirets, pointillés) dans les graphiques linéaires
  4. Différentes formes de points dans les nuages de points
  5. Étiquettes directes sur les séries de données
  6. Hachures ou motifs dans les graphiques à barres

  7. Testez avec un simulateur. Utilisez le simulateur de daltonisme pour visualiser votre palette à travers des filtres deutéranopiques, protanopiques et tritanopiques avant de publier.

  8. Utilisez des palettes accessibles établies. Wong (2011) a publié une palette à 8 couleurs spécifiquement conçue pour la robustesse aux daltoniens : noir, orange, bleu ciel, vert bleuté, jaune, bleu, vermillon et violet rougeâtre.


Meilleures pratiques et erreurs courantes

Meilleures pratiques

Adaptez le type d'échelle au type de données. Séquentielle pour les données continues ordonnées. Divergente pour les données avec un centre porteur de sens. Catégorielle pour les données nominales non ordonnées. Mélanger ces types (utiliser une échelle séquentielle pour des données catégorielles) crée un ordre implicite qui induit en erreur.

Placez les couleurs les plus foncées sur les données les plus importantes. Les valeurs plus foncées commandent plus d'attention. Si vos valeurs les plus élevées sont les plus exploitables, les ancrer à l'extrémité foncée d'une échelle séquentielle aligne l'attention visuelle avec la priorité des données.

Tenez compte de l'arrière-plan. Les couleurs apparaissent différemment sur des arrière-plans blancs, gris ou sombres. Une échelle conçue sur un fond blanc peut sembler plate ou terne sur un tableau de bord gris. Testez sur le fond réel.

Utilisez une échelle cohérente entre les graphiques connexes. Si trois graphiques d'un tableau de bord affichent tous des chiffres de vente, utilisez la même échelle de couleurs pour la même métrique. L'incohérence force les lecteurs à relire chaque légende.

Gardez les légendes proches des données. Plus la légende est éloignée, plus les lecteurs doivent faire un effort cognitif pour décoder les couleurs. Les étiquettes directes éliminent entièrement la consultation de la légende.

Erreurs courantes

Échelles arc-en-ciel pour les données continues. Comme mentionné ci-dessus, les dégradés spectraux introduisent de fausses ruptures perceptuelles et déforment les données. Une échelle à teinte unique perceptuellement uniforme est presque toujours supérieure.

Utiliser la couleur comme seul encodage. Si votre graphique échouerait complètement converti en niveaux de gris, il repose trop sur la couleur. Ajoutez forme, position ou étiquettes directes.

Trop de couleurs catégorielles. Plus de 7 à 8 couleurs distinctes dans une légende est le signe que les données doivent être restructurées, pas que vous avez besoin d'une palette plus large.

Couleurs à faible contraste sur les remplissages de cartes. Les cartes géographiques affichent de nombreuses couleurs simultanément sur de petites formes polygonales. Des couleurs qui semblent distinctes isolément peuvent être très difficiles à différencier à l'échelle d'une carte. Testez à la taille d'affichage réelle.

Ignorer l'effet projecteur. Les projecteurs délavent significativement les couleurs. Une palette qui se lit magnifiquement sur écran peut perdre toutes les distinctions de gamme moyenne dans une salle de conférence. Ajoutez une marge de contraste.

Encoder uniquement par couleur pour l'impression. L'impression peut reproduire les couleurs différemment de l'écran, et l'accessibilité pour les documents imprimés est tout aussi importante. Concevez en pensant à l'impression en niveaux de gris.


Points clés à retenir

  • Utilisez les échelles séquentielles (clair-au-foncé, teinte unique) pour les données continues ordonnées où une extrémité signifie « plus » de quelque chose.
  • Utilisez les échelles divergentes (deux extrémités de teinte, centre neutre) pour les données avec un point médian porteur de sens — financières, politiques, déviation par rapport à la référence.
  • Utilisez les échelles catégorielles (teintes perceptuellement distinctes) pour les données nominales sans ordre implicite ; limitez à 7 à 10 catégories maximum.
  • Évitez les dégradés arc-en-ciel pour les données séquentielles — ils introduisent de fausses ruptures et induisent la perception en erreur.
  • L'encodage rouge-vert échoue pour environ 6 à 8 % des hommes ; remplacez par des paires divergentes bleu-orange ou violet-vert.
  • Testez chaque palette avec le simulateur de daltonisme avant de publier.
  • Ajoutez des encodages redondants (formes, étiquettes, styles de ligne) afin que la visualisation reste lisible quand la couleur fait défaut.
  • Utilisez le générateur de palettes pour construire et évaluer des palettes de couleurs adaptées à votre type de données spécifique.

Couleurs associées

Marques associées

Outils associés