Couleurs dans la visualisation de données
Trois types de palettes de couleurs sont disponibles pour s’adapter aux différents graphiques.
Palette catégorielle
Cette palette, qui est composée de couleurs différentes, sert à distinguer les catégories qui n’ont pas d’ordre intrinsèque comme les pays, les ethnies, les genres ou les industries.
La palette catégorielle contient quatre couleurs. S’il est nécessaire d’utiliser plus de quatre couleurs, il vaut mieux regrouper certaines catégories ou utiliser un autre type de graphique. Plus il y a de couleurs dans un graphique, plus il est difficile à lire.
Bleu 04
#095797
rgb(9, 87, 151)
Citron 02
#D0DC03
rgb(208, 220, 3)
Vert 02
#68CEBA
rgb(104, 206, 186)
Rouge 03
#D56050
rgb(213, 96, 80)
Palette séquentielle
Cette palette est composée de dégradés qui vont du plus clair au plus foncé ou inversement. On l’utilise pour visualiser des chiffres qui vont du plus bas au plus haut comme le revenu, la température ou l’âge. Les couleurs claires sont généralement utilisées pour les valeurs faibles et les couleurs foncées pour les valeurs élevées.
Il faut éviter d’utiliser plus d’une palette séquentielle dans un même graphique puisque certaines teintes plus foncées ou claires peuvent être difficiles à distinguer.
Bleu
Bleu 05
#063665
rgb(6, 54, 101)
Bleu 04
#095797
rgb(9, 87, 151)
Bleu 03
#6194BF
rgb(97, 148, 191)
Bleu 02
#95BFDD
rgb(149, 191, 221)
Bleu 01
#CAE2F2
rgb(202, 226, 242)
Citron
Citron 05
#42490D
rgb(66, 73, 13)
Citron 04
#78740C
rgb(120, 116, 12)
Citron 03
#A29C0E
rgb(162, 156, 14)
Citron 02
#D0DC03
rgb(208, 220, 3)
Citron 01
#DBE788
rgb(219, 231, 136)
Vert
Vert 05
#0C4540
rgb(12, 69, 64)
Vert 04
#246B65
rgb(36, 107, 101)
Vert 03
#379F8F
rgb(55, 159, 143)
Vert 02
#68CEBA
rgb(104, 206, 186)
Vert 01
#B9EAD8
rgb(185, 234, 216)
Rouge
Rouge 05
#4A3742
rgb(74, 55, 66)
Rouge 04
#8D5150
rgb(141, 81, 80)
Rouge 03
#D56050
rgb(213, 96, 80)
Rouge 02
#F39C8D
rgb(243, 156, 141)
Rouge 01
#F6CEC9
rgb(246, 206, 201)
Palette divergente
Cette palette est composée d’échelles de couleurs divergentes. Les échelles sont les mêmes que les échelles de couleurs séquentielles, mais au lieu d’aller simplement du plus clair au plus foncé, elles ont une valeur médiane claire et vont ensuite au plus foncé aux deux extrémités de l’échelle, dans des teintes différentes. La palette divergente est utilisée pour visualiser, entre autres, des valeurs négatives et positives, des résultats électoraux ou des échelles de Likert (tout à fait d’accord, d’accord, neutre, pas d’accord, pas du tout d’accord).
On utilise cette palette lorsqu’il y a un point médian significatif. Les teintes divergentes permettent de mettre l’accent sur les extrêmes.
Les deux palettes divergentes – soit bleu à jaune et bleu à rouge – n’ont pas de conflit de couleurs et peuvent être utilisées au sein d’un même graphique, en autant que la couleur grise ait le même sens dans les deux échelles.
Bleu à citron
Bleu 04
#095797
rgb(9, 87, 151)
Bleu 03
#6194BF
rgb(97, 148, 191)
Bleu 02
#95BFDD
rgb(149, 191, 221)
Gris 01
#DEDEE1
rgb(222, 222, 225)
Citron 02
#D0DC03
rgb(208, 220, 3)
Citron 03
#A29C0E
rgb(162, 156, 14)
Citron 04
#78740C
rgb(120, 116, 12)
Bleu à rouge
Bleu 04
#095797
rgb(9, 87, 151)
Bleu 03
#6194BF
rgb(97, 148, 191)
Bleu 02
#95BFDD
rgb(149, 191, 221)
Gris 01
#DEDEE1
rgb(222, 222, 225)
Rouge 02
#F39C8D
rgb(243, 156, 141)
Rouge 03
#D56050
rgb(213, 96, 80)
Rouge 04
#8D5150
rgb(141, 81, 80)
Données totales
Ce gris est utilisé pour représenter un total. Il permet de comparer une donnée mise en valeur avec un total.
Gris 01
#DEDEE1
rgb(222, 222, 225)
Autres éléments
Cette palette est utilisée par les éléments complémentaires aux données. Elle ne peut pas être utilisée pour représenter des données.
Bleu 06
#223654
rgb(34, 54, 84)
Gris 04
#4E5662
rgb(78, 86, 98)
Gris 03
#6B778A
rgb(107, 119, 138)
Gris 02
#C5CAD2
rgb(197, 202, 210)
Texture
Les textures aident à distinguer plusieurs éléments de la même couleur dans un graphique. Cependant, elles doivent être utilisées avec parcimonie, car elles sont difficiles à différencier et à mémoriser.
Voici quelques exemples d’utilisations des textures.
Lignes pointillées
Les lignes pointillées (trait long, espace court) sont idéales pour représenter les scénarios hypothétiques. Il peut s’agir d’une colonne avec un contour en pointillé et un centre vide ou d’une ligne pointillée.
Trait épais
Un seul trait épais (au moins 150 % des autres traits) est perçu comme étant le plus important ou comme étant la combinaison des autres traits. On l’utilise pour mettre de l’avant certaines données (moyenne, total, etc.). Par exemple, il peut représenter la moyenne canadienne en comparaison à d’autres provinces dans un graphique à ligne.
Mise en évidence
Lorsqu'il est nécessaire de faire ressortir une certaine donnée dans un graphique, il est possible d'utiliser un traitement particulier mettant en évidence cette donnée. Cette approche devrait être utilisée pour communiquer un message clair à l'utilisateur plutôt que de lui donner une vue d'ensemble sur une situation.
La donnée mise en évidence utilisera le Bleu 04 alors que les autres données utiliseront toutes le Gris 01.
Comment choisir une palette
Voici un outil d’aide à la décision lorsque vient le temps d’utiliser une palette de couleurs. Selon le type de données du graphique, certaines palettes sont recommandées ou non.
De plus, des règles générales s’appliquent. Voici ce qu’il est important de retenir :
- Éviter l’utilisation des « feux de circulation » (vert = bon, jaune = passable, rouge = mauvais). Ce type de palette n’est pas accessible pour les personnes daltoniennes.
- Utiliser la même couleur lorsque la même variable est répétée dans plusieurs graphiques.
- Utiliser le gris pour les éléments moins importants comme les données contextuelles générales, les annotations moins importantes, ce qui n’est pas sélectionné par l’utilisateur ou pour adoucir l’impression visuelle générale des graphiques.
- Éviter la combinaison stéréotypée rose-bleu pour représenter les genres.
Dernière mise à jour : 6 novembre 2023