Choosing Colors for Data Visualization

This article explains that a good use of colors can enhance and clarify a presentation, when used poorly it will have a negative effect. The use of color is all about function: what information are you trying to convey, and how color can enhance it. The author uses a lot of examples to help us understand what the effects of colors are. Within this summary I’ll take some of the conclusions about the examples which I think could be important within my thesis.

One of the functions of colors is to distinguish one element from another, but one should not forget that all visible parts of a presentation must be some color and if all are taken together they must be effective. Effective in this case is making it easy for the viewer to understand the roles and relationships between the elements. To do this one could define categories of information and group and order the information. Using color will group related items and command attention in proportion to importance.

A next step is choosing an effective set of colors, to understand this the author explains the principles of color design. contrasting colors are different, analogous colors are similar. Contrasting draws attention, analogy groups. In color design, color is specified by three dimensions. The first, hue is the color’s name and is typically drawn as a hue circle. Analogous hues are close together and contrasting hues are on the opposite side of the hue circle. Next is the value of a color which is the perceived lightness or darkness of the color. Contrast in value defines legibility as well as having a powerful effect on attention. Last is the chroma which indicates how bright, saturated, vivid or colorful a color is. High chroma colors are vivid and bright. Using darker and grayer has many benefits: looks less garish, more sophisticated, …

Different dimensions have different application to information display. Making related items the same color (analogues hue) is a powerful way to label and group. Hue contrast is easy to overuse to the point of visual clutter, a better approach is to use a few high chroma colors as color contrast in a presentation consisting primarily of grays and muted colors.


Legibility means being able to read, decipher, discover and to be understood. Difference in value between the symbol and its background is important for legibility. The higher the luminance contrast (difference in value) , the easier it is to see the edge between one shape and another. Variation in luminance can also be used to separate overlaid values into layers, where low contrast layers can sit behind high contrast ones without causing visual clutter. A primary rule in many forms of design is “get it right in black and white”, meaning that important information would be legible even if chroma were reduced to zero.

Summarized these previous statements tell us to “assign color according to function”.

  • use contrast to highlight
  • analogy to group
  • control value contrast for legibility

Most design situations, the best results are achieved by limiting hue to a palette of two or three colors, and using hue and chroma variations within these hues to create distinguishable different colors. The article gives some examples that makes things more clear. ColorBrewer is a website that helps choose colors for data display and is refered to by the paper. The examples of the paper always use a white background and the contextual information are shades of gray. A general rules is to make background white and its supporting information shades of gray this provides the most effective foundation for your color palette.

The paper ends by a few notes on background color, noting that most color palettes are designed to be printed on white paper. White as a background color has the advantage that the human visual system is designed to adapt its color perception relative to the local definition of white. A white background gives a stable definition of white, and a stable “surface” to focus on.


This paper helped me realize that colors are very important to making a visualization easy to understand, I already applied the contrast rule for all of my tags within my graph. I will most likely change my background of my application to white and give the supporting information appropriate colors.


One Response to “Choosing Colors for Data Visualization”

  1. Sam Decrock Says:

    interesting 😉

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: