Use Contrast to Create Impact
Recently, I was looking up an example of how to create impact with (color) contrasts, and I came across this little gem:
While the chart isn’t terrible, the designers missed an opportunity to highlight the important data points. In this post, I will share a redesign that uses color contrast to draw the audience’s attention to the chart’s main takeaway message:
Over half of job seekers gained skills in searching and applying for jobs.
WHY IS COLOR IMPORTANT?
Color choice can evoke emotion, guide viewers to important insights, and build brand recognition. In fact, there are entire fields (i.e., color theory, color psychology, color science) dedicated to the study of color, its role in art and design as well as color perception and preference.
HOW IS COLOR USED IN DATA VISUALIZATION?
Color is one of the most important tools in an information designer’s toolkit. It can be used to highlight differences between elements or objects:
Population Pyramid
show intensity or scale magnitude:
World Population Density
or emphasize a key point:
WHEN COLOR CAUSES CONFUSION
While the proper use of color can enhance a data visualization, poor color choice can make even the most effective graphic design fall flat or worse, muddy its message.
Take this example:
The color gradient does not appear to follow a logical progression, which results in an extremely confusing map.
**Now back to the redesign**
The first two bars in the chart are a cool green tone while the remaining seven bars are a warm red tone. By using both Red and Green, the visual display is overwhelming to the eye. In fact, the vibrancy of the red color used in the chart draws attention to the seven lower bars,
even though the designers wanted to emphasize the first two categories:
Importantly, the chart contains two hues that can be hard to distinguish from one another:
You can learn more about diverse color vision experiences here.
Indeed, color is an important element of any data visualization, but so too is the contrast between the colors.
WHAT IS CONTRAST?
Contrast is a technique where a designer creates visual differences between elements on a page. It can be achieved through:
size:
space:
pattern:
shape:
and color:
(among other means)
**Now to complete the redesign**
GOAL: Draw attention to the first two categories:
(The chart was redesigned in Excel.)
At the very least, I would:
Remove the gray bar underlay;
Remove the horizontal axis + title;
Apply the same warm red tone (color hex: # C7173C; RGB: 199, 23, 60) to each bar in the chart;
Change the font color of the data labels to white (color hex: # FFFFFF; RGB: 255, 255, 255); and
Choose a font scheme that matches the organization’s other materials (I used Open Sans).
Then, to ensure that readers focus their attention on the first two categories, set the transparency of bars 3 through 9 to 50%, so these bars appear less saturated and vibrant.
Finally, add an informative title that emphasizes the takeaway message and—voila:
As an added bonus, the visual display is now color-vision-friendly:
