Avoid Color Disasters with Harmonious Colors

Use Color to Improve Readability

Basic knowledge of the color wheel can help you to skillfully apply color. Colors that lie opposite of each other on the color wheel (for example, blue and orange) are known as complementary colors. When used together, side by side, or on the same page, complementary colors are considered pleasing to the eye. Using blue and orange within a graph visualization is a good idea because these colors are quickly distinguishable from each other. Keep in mind however that using these colors on top of each other (for example, red foreground and green background) causes color vibration.

Color vibration refers to the unpleasant visual appearance caused when placing certain colors on top of each other. If your report has a colored background, use black or white text as the foreground. Doing so helps to avoid color vibration, which is considered harmful to the eyes and causes a loss of detail in the foreground’s shape.

The left shows an example of a bar chart utilizing complementary colors. The right demonstrates colors which cause vibration when used together on the same bar chart.

Colors adjacent to one another on the color wheel are called analogous colors. Using analogous colors within the same visualization makes it difficult to perceive the block of color, especially for those with color blindness. Eight percent of men have the most basic form of color blindness and have difficulty distinguishing colors with a red and green hue.

The left shows an example of a bar chart utilizing analogous colors. The right demonstrates what a person with color blindness would see when viewing the same bar chart.

Also, choose background colors with sufficient contrast to your foreground elements. Depending on the context, white on a black background can have poor contrast. Black can start to “close in” on white shapes such as text.

Examples of poor contrast include:

Grey text on a black background
Red bars on a black background
Pictures as backgrounds

Understand How the Report Will Be Viewed

Will your report be viewed on a computer, on a printed page, or projected onto a screen? Each location changes how color is produced.

Computer screens produce richer and brighter colors because the computer screen adds light behind the color.
A printed report (especially black, white, and grayscale print) requires using more unsaturated color and not using a background color. This makes it easier and more cost effective to print. TIP: If you know your report will be printed, perform color runs (also called test prints) on your report to ensure the saturation and contrast is sufficient and produces a nice looking result.
A projected report requires colors with strong contrast to the background, so that the color richness comes through most effectively when projected on a white screen.

Be Mindful of Color Meaning

Be mindful that individual colors and combinations of colors can have meanings that distract from your data story. For example:

Red in America can signify warning, or cause for alert.
Green in America can signify success or completion.
When used together, green and red in America can signify Christmas.

If combinations of these colors are used within the same or adjacent visualizations, audiences might “fill in the gaps” inappropriately. Always display a legend to avoid confusion. For example:

Red means less than $10, Yellow means less than or equal to $50, and Green means greater than $100
Red means Canada, Yellow means France, and Green means Germany