Rules for Using Color in Charts

October 31, 2012

There are principles, rules and best practices for everything we do. Last week while working on revising colors for graphs of Unmetric, I wanted to refresh myself and learn more about using colors in graphs. Luckily I found a brief but useful articles by Stephen Few, author of Information Dashboard Design which I read last year while working with Intel.

Here are 9 rules by Stephen about using colors in charts and graphs:

  1. If you want different objects of the same color in a table or graph to look the same, make sure that the background—the color that surrounds them—is consistent.
  2. If you want objects in a table or graph to be easily seen, use a background color that contrasts sufficiently with the object.
  3. Use color only when needed to serve a particular communication goal.
  4. Use different colors only when they correspond to differences of meaning in the data.
  5. Use soft, natural colors to display most information and bright and/or dark colors to highlight information that requires greater attention.
  6. When using color to encode a sequential range of quantitative values, stick with a single hue (or a small set of closely related hues) and vary intensity from pale colors for low values to increasingly darker and brighter colors for high values.
  7. Non-data components of tables and graphs should be displayed just visibly enough to perform their role, but no more so, for excessive salience could cause them to distract attention from the data.
  8. To guarantee that most people who are colorblind can distinguish groups of data that are color coded, avoid using a combination of red and green in the same display.
  9. Avoid using visual effects in graphs.

Read the article [pdf]

2 Comments

Add your comment


  • # Pankaj Parashar
    says on October 31

    Interesting! But the article does not mention anything about the medium, on which the charts/graphs are being displayed on.

    I believe, there will be different set of rules for colors in charts/graphs, associated with each of the following medium,

    – web pages
    – print magazines
    – display devices like projector/lcds etc..


  • # Goulven
    says on November 01

    Also beware that many people (have to) print in black and white, so you need to add cross-hatches to distinguish the parts of a chart with similar hue, and write the percentage in the pie slice or right beside, not in the caption.
    This is also helpful for colorblind people by the way.