Paint by Numbers: How to Color Your Data Visualizations
Presentation is everything and color can make or break your delivery.
Color imparts meaning to data visualizations. It’s the element that encodes value and indicates the metric on display. When you’re visualizing data, choosing the right palette is just as crucial as choosing the right chart.
It’s paramount that viewers peruse your data visualization with an open mind. Furthermore, they should readily absorb any information you put before them. Color has the power to direct their gaze, and a misuse of color can slow down or warp their analysis.
Once you grasp the nature of color and its role in visual perception, you begin to make better decisions about designing your data visualizations.
WHAT IS COLOR?
Color has three properties: hue, saturation, and brightness. Hue refers to the wavelength that people see and it’s what everyone interprets as color (e.g. red, blue, yellow). Saturation measures intensity and reflects how much of a hue is present. Lastly, brightness is the degree to which a hue is dark or light. A hue with 0% saturation appears white, whereas a hue with 0% brightness appears black.
All of these circles have the same hue, but note how different levels of saturation or brightness can alter their appearance.
HOW WE PERCEIVE COLOR
Color is an attribute that sighted individuals process preattentively, meaning that they recognize it without any conscious thought. To observe this principle in practice, try scanning this sequence of numbers and count every instance of three. How many are there?
The correct answer is that there are nine instances of three. Now repeat the same exercise with this sequence of numbers.
Whether you got the answer right or wrong the first time, surely it was easier to count every instance of three in red. As you can see, the shape of each number is too elaborate to process preattentively — but not the color. Humans subconsciously group things together based on preattentive attributes like color; understanding this instinct is key to producing effective data visualizations.
6 TIPS FOR USING COLOR
There isn’t a universal approach to coloring data visualizations; various metrics, charts, and audiences all require their own considerations. In any case, a lot of the best practices are easy to remember because they appeal to our basic impulses. Armed with the right techniques, you can turn any blank canvas into a visually compelling chart.
1. Lighten Up Your Axes & Gridlines
Axes and gridlines provide the structure for data visualizations like bar charts and line charts. Axes define the area of the graph and gridlines mark the intervals where you plot the data. Although they’re essential components, they should always be muted.
Black axes and gridlines can distract from the data, hence their color and stroke weight should be as light as possible. The same rationale applies to any labeling, particularly if it’s on a light dashboard. People are more likely to develop eyestrain from reading high contrast pairings like black text on a white screen.
2. Give Your Bar Charts One Color
Believe it or not, this emoji is a poorly designed data visualization: 📊.
Any bar chart that visualizes one metric must have one color. It shouldn’t have multiple colors or even a gradient since these effects can mislead viewers.
This is because we preattentively assign different colors to different groups. Yet these bars don’t belong to different groups, they actually belong to different categories within the same group. Gradients have more subtle color variations, but they can still interfere with our preattentive processing.
There are merely two exceptions to this “one color” rule: a bar chart should have multiple colors if it’s stacked or if it visualizes more than one metric together (like spend and conversions).
3. Be Purposeful with Brightness
Bright colors are attention-grabbing, but only when they stand out in contrast to softer colors. Otherwise, they become overwhelming and meaningless. If everything in your data visualization is bright and bold, your viewers won’t be able to notice anything significant.
This isn’t to suggest that you shouldn’t use brightness at all, just use it sparingly and reserve it for special cases. Bright colors can emphasize importance or urgency, which is why they’re ideal for alerts.
These bullet charts represent the same information, but the set on the left uses bright colors to highlight almost everything. Conversely, the set on the right is more restrained and therefore easier to digest. It also removes all of the alert icons except for the ones in red, making it obvious that “Profit” and “New Customers” are the main metrics to focus on.
4. Never Go 3D!
A 3D effect may look impressive at first glance, however it’s a really terrible format for data visualization. Given that it illustrates depth with different shades and tints, 3D adds superfluous colors. Plus, a third dimension can hide data from your viewers like in this comparison.
The 3D bar chart on the left has overlapping bars that block some of the values. It’s pretty much useless without extensive labeling. If you redesign it as a 2D stacked bar chart like the one on the right, the information becomes much clearer.
5. Don’t Make Everything a Traffic Light
Most people encounter traffic lights in their daily life. As a result, they’re socialized to interpret red as “stop”, yellow as “proceed with caution”, and green as “go”. Many designers apply the same pattern to data visualizations, especially those with “bad”, “satisfactory”, and “good” ranges.
These three colors are the norm for regulating traffic, but they’re not always practical for visualizing data. Keep in mind that traffic lights use brightness purposefully, and they don’t show each signal at once. If they did, they would confuse drivers — so why should we expect concurrent displays of bright red, yellow, and green to work in data visualizations?
Gauges are common on reporting dashboards because they evoke the literal dashboards in cars. Designers tend to iterate on the driving metaphor by coloring them like traffic lights. Gauges may be standard for measuring speed or fuel, but they’re not a good fit for every metric. A bullet chart with mellow colors is usually a better alternative.
6. Design for Color Blindness
Another issue with traffic light-inspired color schemes is that they alienate 4.5 percent of the population with red-green color blindness. These individuals have trouble distinguishing between red and green, sometimes they perceive them as similar brownish hues.
Therefore, you should always check if your colors are readable to everyone. Note how the red and green segments in this pie chart are barely discernible to most color blind viewers. Of course, the legend can’t assist them at all since it exhibits the same problem.
In addition to choosing safe color combinations, you can ensure that your pie chart is accessible by giving it a single hue and grading its saturation. People naturally equate more saturation with more volume, so it’s a nice solution as long as your greater values are richer in hue.
Coblis is a portal where you can upload your images and simulate how they appear to color blind viewers. It can also mimic rarer forms of the condition like blue-yellow color blindness.
COLOR MADE EASY
There are several resources that can streamline your color selection process. Adobe Color Picker features an interactive color wheel that can generate an entire scheme for you. Meanwhile, Flat UI Colors is a destination that has tasteful palettes; in fact, all of the options are specially curated for 2D designs. And if you’re creating data visualizations for a company dashboard, consider seeking inspiration from the brand’s style guidelines.
One thing you can count on is that an abundance of color will bombard your viewers rather than captivate them. When in doubt, use the minimum amount of color and employ brightness to highlight what’s truly important.
All said, you don’t have to remember every single best practice in order to properly color your data visualizations. Simply remind yourself that a little bit always goes a long way.
