Consistency and Contrast #

~6 min read

Contrast is how you direct attention.

but

Consistency is how you gain contrast.

This is likely the most powerful tool in your graphic design arsenal. If you can correctly implement this single concept, you will be producing some of the better designed data visualizations.

Why? Consistency and Contrast is how we draw the viewer’s attention where we want it. When poorly used, the result is a garbled mess that is hard for the user to parse. When used well, and it is almost a form of mind control.

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, how easy is it to find the shape with 8 sides?

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 lower case “b.” 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”. Such is the power of contrast.

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, shape, 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 specific property of an object that creates contrast, but a difference from a otherwise consistent set of objects.

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 differenes. 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 world 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 entry on color. Or 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 “x”—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.

Concluding thoughts #

That is about it! The most important thing to take away from this reading is that good contrast requires good consistency. In implementing them, I start by making everything as similar as I possibly can (same color, size, shape, etc.) and then ask myself what I need to change to make the plot readable, and which things I wish to emphasize. For those items needing emphasis, I make them VERY different—realizing that I am going to only be able to achieve contrast in 1–2 objects, at most. Trying to add contrast beyond this results in a loss of consistency and, therefore, contrast. Trying to make everything have contrast is a self-defeating activity.