Color choice is an important part of data visualization.
But what if your readers are color blind?
There are many people with a certain type of color vision impairment, which requires for a different approach if you want to optimize your charts and multimedia content.
Tips for designing charts with a color blind friendly palette
You may not know this yet, but as many as 8% of the male and 0.5% of the female population are affected with some type of color blindness, most often the red-green form.
Have you heard of Mark Zuckerberg? He is color blind, as well as Keanu Reeves and even Bill Clinton!
Taking these numbers into consideration, it is important to become more aware of the high number of color blind people.
Therefore, as a person presenting ideas and facts in the form of charts, you must be prepared to make information as accessible as it is possible for every reader.
The role of colors in visual content
Picking the right color for your charts is an absolute must. Every color represents a piece of information that is unique and crucial for the reader to understand what you are trying to say.
And that’s not all. The colors we use in data visualization can represent more than a single idea. If used properly, colors can show differences between categories and relationships.
WATCH: Everything you need to know about COLOR… in under 3 minutes
What is color blindness?
Having a color vision deficiency does not mean that the person cannot see colors. This particular impairment is very rare and is called achromatopsia. While only one in 33,000 people who cannot see colors at all, people with color vision deficiencies (CVD) are much more numerous.
That’s why color blindness awareness simply must be increased.
There are two most common types of this deficiency, called deuteranomaly and deuteranopia. These two account for 6% of the population, while protanopia and protanomaly account for 2% of men. Among people, these conditions are often referred to as “red weak”, “green weak” and “red-green color blindness”.
You may be wondering, “why are men more likely to be color blind?”
The answer is very simple: the genes that are responsible for this condition are on the X chromosome and women have two of these. If one of them has a defect, this is typically compensated for by the other chromosome. In the case of men, there is no second X chromosome that can compensate the defect or damage.
Here are some charts illustrating how color-blind people see colors:
The most common form makes people with CVD impaired in the sense that they cannot distinguish between red and green color, while the second most common form is blue and yellow color blindness.
People who are color blind find it hard to see differences in certain colors, which can make reading traffic lights more challenging. Marketers have to understand the importance of color choice in their charts and other methods of data visualization.
However, people who are color blind are not the only ones you need to pay attention to. The ability to see and differentiate between colors decreases as people age and can become seriously damaged in old age.
Here are some quick tips for designing charts for color blind people:
- Choose a color scheme that can be identified by everyone, including people with various types of color vision deficiency.
- Do not focus only on different colors, but also on shapes, positions, coloring patterns and line types. This will allow you to make sure that the information is conveyed to those who cannot distinguish the colors.
- Avoid bad color combinations that may present an issue for color blind people, such as red & green, green & brown, green & blue, blue & grey, blue & purple, green & grey and green & black.
- Make your chart monochrome, i.e. work with different shades of a single color.
- Use highly contrasting colors. The majority of color blind people can perceive high contrast.
All these tips should help you make the chart easier to read for people with a CVD.
Plan your color scheme ahead of time
You may be worried that if you apply a color blind-friendly palette to your chart design, you risk a badly balanced visualization.
But if you plan the color scheme before designing, you can create a chart that looks good and will work for color blind people as well.
Look at the color wheels below. The first is a regular color wheel illustration:
While the second one illustrates deuteranomaly (red and green color blindness):
Not a big difference, right?
When to use red and green together
Marketers often avoid using this combination since it presents a huge problem for color blind people. Those suffering from a severe CVD condition see both these colors as brown, which means that they will not be able to distinguish the two.
At the same time, people who suffer from weak CVD will see red and green well, but may experience some issues if the colors are blended together or if the maker used weak colors in the chart.
As you probably know, colors are a great visual element of every data presentation, which is why we often use them as an encoding method of a comparison. In the case where you want to make a comparison by using colors, you should always tend to avoid this combination.
Don’t just rely on color to differentiate between data
For example, you can use red for one chart and green for other chart, even if the two stand next to one another. In this case, it will not really present a problem when a person with severe CVD sees them as brown.
In this chart, color-blind people can see which numbers are positive and which are negative even if they do not distinguish between the colors.
The limits do not end with red and green
Many create charts and other types of data visualization by avoiding this combination, thinking that the remaining colors and combinations are ideal for everyone. The combination of red and green is called the “stoplight palette”, but this is not the only thing you need to avoid if you want to make color blind friendly charts.
The problem with data visualization is much more complicated than this. Red and green do present a problem with color blind people, but so do combinations such as red and green and orange or blue and purple.
Your perfect palette for the chart must avoid these combinations, but it does not end with red and green. Someone with strong CVD will see red, green, orange and brown as brown when combined together, while others will see purple as blue and find the combination of blue and purple problematic.
Additionally, you should always avoid the combinations of gray and pink and gray and brown. People can suffer from various types of CVD, which means that they may be experiencing problems with a variety of color combinations.
A combination of blue and purple is not color-blind friendly.
How can you create color blind friendly charts?
1. Use a color blind friendly palette
People who are not associated with a certain type of CVD can see color combinations without any problem. However, the most common conditions of this deficiency make it impossible for people to distinguish the combinations we previously mentioned.
The color blind friendly palette supports color combinations such as blue & orange, blue & red or blue & brown. In these cases, color blind people can distinguish between the two, which eventually leads to optimized data visualization.
By using these palettes, you are making sure that everyone can capture the differences and meanings of the information presented in the chart, as well as easily remember things you have put focus on.
After all, colors are one of the most important methods to get the desired effect with your data visualization.
2. Leverage dark and light when necessary
Sometimes your chart design will require a combination that is considered unsuitable for those who are color blind. In cases where you must use combinations like red and green, it’s highly recommended that you leverage a dark vs. light combination.
What you may not know is that people with CVD do not have a problem with the color value, but with the color hue. Therefore, if you present your information in light and dark colors, color blind people will be able to distinguish between the two, even if they see them both as brown.
Choosing a different color value is your sure way of delivering the information properly. Almost everyone in the world can differentiate between colors that are very light and very dark, so if you have to use a combination of red and green, try using really light green and very dark red.
3. Think of alternatives for distinguishing information
Aside from using different color values, you can always think of alternatives that help you distinguish the information.
People with CVD have troubles with distinguishing certain colors, but can perceive the information if it’s visualized using things such as icons, labels, directional arrows or other indicators that are not closely related to coloring.
When you use colors that present an issue with one or more types of CVD, it is best to add one of these alternatives to the chart’s data visualization. In this way, you could still use the combination of colors you want and people will still be able to see the emphasized things and differences you want to present.
Create multiple versions of the same chart
Another option is to create two versions of your charts: one with your original color scheme and a second version with a color blind friendly palette. That way, you will still be able to create an eye-catching design, while also ensuring that anyone can see read the chart.
That’s not all. There are also many plugins and programs that can help you optimize your charts for the color blind. Try using plugins such as “No Coffee” on Chrome or Color Brewer as a free tool.
Are you still unsure about using color blind friendly palettes?
If you think a color blind friendly palette damages the design of your chart, remember these two key tips:
- Use contrasting dark and light colors.
- Use patterns and symbols.
If you make graphs and charts with the goal of sharing information, you can easily enable complete comprehension from color blind readers. The only thing you have to do is put in a conscious effort when using the colors for your charts.