Consistency and Contrast #

~5 min read

Contrast is how you direct attention.

but

Consistency is how you enable contrast.

This is likely the most powerful tool in your graphic design arsenal. Master this one concept, and your data visualizations will immediately stand out from the crowd.

Why is it so powerful? Because our brains are wired to notice patterns and breaks in those patterns. When a design is a garbled mess, the viewer doesn’t know where to look. When it’s designed well, it’s almost a form of mind control—you guide the viewer’s eyes exactly where you want them to go.

Let’s see how one can move from poor implementation to good implementation.

Lack of consistency #

Consistency is the foundation from which we build contrast. Thus, we must first ensure that our designs have good consistency, before we try to create good contrast.

As an example of poor consistency, consider shapes below. Each shape is a different size, shape, color, and text. Because of this, each of these properties vie for our attention, and it makes identifying any single shape hard. For instance, imagine your goal was to draw attention to the text inside the six-sided shape. How long does it take you to find it? With so many elements competing for attention, nothing stands out.

Inconsistent designs are those where multiple properties all change at the same time, making it challenging for the viewer to understand which aspect we should focus on.

Consistency #

Ultimately, we will use contrast to help us find the object of interest, but the first step is to make them all as consistent as possible. When doing so, we need to consider which property we wish to focus on; that will be the property that is allowed to change. For instance, if we decide we want to focus on the text, then we should make all the sizes, shapes, and colors the same.

Designs with high consistency make it clear which aspect the viewer should focus on. In this case, it is the text inside the collection of otherwise identical circles.

In this design, we have not yet created contrast, and so it might not be easy to find a single object. For instance, it might still be hard to find the upper case “C.” However, we have already improved the communication with our viewer. When someone looks at the consistent design above, they will naturally focus on the differences in the text, because that is the only difference they perceive.

And now that the viewer knows what property to focus on, we can use contrast to help direct their attention to the specific thing we wish them to notice.

Contrast #

With a consistent design in hand, we can use contrast to create a design in which the viewer almost has no choice but to look where we wish them to. To do so, we can choose one (or possibly more) aspects to change against the consistent background of shapes. Below, I made the color of both the shape and the text very different for one object. If you show this image to anyone, and ask them what they noticed first, they will say it was the shape with the “C.” In fact, unless people are severely colorblind, they will be unable not to notice this shape first.

Using contrast, you can direct the user’s attention exactly where you want it. In this case, you simply cannot help but notice “C” first.

Though it is easy to see the power of this contrast, there are two important points to make regarding its use…

Good contrast requires good consistency #

Though the red shape in our high contrast image above stands out, it is not because the shape is red. Indeed, in the very first (inconsistent) image, the size and color of the object with the “C” was the same. And yet, it does not stand out nearly as much (ask a friend what they see first in that image!) Thus, it is not the inherent property of an object that creates contrast (red isn’t inherently attention-grabbing), but its properties relative to the consistent context you’ve established.

Good contrast requires large differences #

Not all differences are the same. When striving to create contrast, make the differences large in magnitude. If you make the differences too small, then we might call the elements similar. We don’t want that, we want LARGE differences. We want contrast.

Consider the words “similar” and “LARGE” in the above paragraph. They are both different from the surrounding text (similar is italicized, while large is bold and in all caps). Which stands out more? For nearly everyone, it is the word LARGE—because it is very different from its surroundings.

Many aspects can provide contrast #

Above, we used differences in color to provide contrast between objects. While color is a common means to achieve contrast, it is not the only one. An incomplete list of other means is depicted in the figure below.

When a series of elements all share a common set of attributes, contrast can be achieved by creating a large change in one (or more) attributes. There are many attributes that can be varied to achieve contrast.

Usage in data visualizations #

Just as in our above examples in basic graphic design, consistency and contrast is used in data visualization in order to direct the reader’s attention. One uses consistency in order to reduce the difficulty of processing an image and then contrast in order to draw the attention to the point of interest—the thing that is very different.

For example, imagine you made a bar chart with a single bar that is most important. You can keep all other bars consistent, and then use contrast to draw attention to that bar.

Of course, how you choose your color matters, and if you are interested in learning more on this, head over to the page on color. But there are ways to achieve contrast other than color. For instance, imagine that you had a scatterplot of old and new data. You might make the markers for the old data small and circular, while new data might be larger and an “$\times$”—creating good contrast without color.

Another, more subtle, usage of contrast is to grey out all the non-data (e.g., axes, titles, and tick labels), as was done in the bar chart above, while keeping the data grey, black, or colored. The reason for this is that many websites/journals have white backgrounds, against which black has the highest possible contrast. However, you want focus on the data, not the axes! By reducing the darkness of the axes, you reduce the contrast with the background, making the data stand out more. This is the reason why many modern plotting packages (e.g., ggplot2) use grey axes as a default. If you are interested in thinking more about axes, there is a entire page on the design of axes.

A Workflow for Effective Design #

The core takeaway is simple: good contrast requires a foundation of good consistency.

You can turn this principle into practice with a simple, two-step workflow for your next data visualization:

1. Enforce Consistency First. Start by making every element as uniform as possible. Use the same color, size, shape, and font weight for all your data points, bars, or lines. Your initial goal is to create a clean, quiet, and consistent visual field.

2. Add Contrast Second (and Sparingly). Ask yourself: “What is the single most important message or data point I want my audience to see?” Then, and only then, change a single property (like color or size) of that one element to make it dramatically different from the rest.

Resisting the urge to emphasize everything is the key. When everything is emphasized, nothing is. Start with consistency, and you will wield the power of contrast with precision and impact.