Color Me Impressed: Design and Color Blindness

Do you know how many of your customers and prospects are color blind? Estimates vary, but it’s thought that color blindness affects between 5% and 10% of the male population (it’s more common in men). In the USA alone, some 10,000,000 men are unable to see all colors correctly. Whichever country you’re in, a significant percentage of your target audience may have difficulty appreciating or even understanding your company’s materials, due to the colors used.

There are several types of color blindness. Total color blindness (monochromacy), which is comparable to viewing everything as if it were a black-and-white movie, is fairly rare. Partial color blindness is more common, usually creating difficulties in distinguishing between reds and greens, or between blues and yellows.

However, these are very broad definitions. For instance, someone with red-green issues may also have difficulty distinguishing between certain hues of dark blue and purple, and/or yellow and light green, and/or dark green and brown. These examples are based solely on my own partial color blindness; others may have problems with different colors.

So, how can you ensure your message is clear and legible to as many people as possible?

Designing and Formatting Considerations for Color Blindness

When creating or reviewing a design, consider how it will appear to color blind readers. For a quick check, view the design in grayscale (if the design software allows it) or simply print it in black and white.

But if you want to be more thorough, there are plenty of online tools to help you understand how your materials will appear to these readers; many of which can be found via colblindor.com, a useful site with many handy resources and articles on the topic.

Upon seeing simulated ‘color blind’ views of your design, you may immediately notice areas of concern. If not, here are some items to look out for:

Contrast

In order for any message to be clear, it needs sufficient contrast. Designs that seem to offer enough contrast to readers with normal vision may not necessarily be easy for others to read. The need for contrast extends beyond concerns about color blindness; inadequate contrast can make reading difficult for readers with other vision problems, such as shortsightedness.

For ease of reading, it’s best to place black text on a white or very pale colored background. The inverse (light text on a black background) is not always as effective; much depends on the text size and font weight. Generally, a monochrome approach to text will work for color blind readers, but you’re advised to double-check anything that involves a more ‘adventurous’ color palette.

Contrast is also a consideration in any important graphical elements that do not contain text. For instance, line graphs often employ colored trajectories to indicate different patterns. If some readers cannot tell which trajectory is which, because certain colors look so similar to their eyes, the impact of the graph is lost or greatly reduced. Here, it is better to use colors that are clearly distinguishable to readers with both red-green and blue-yellow color blindness, although even this won’t help totally color blind readers (see Color Keys and Legends below).

By the way, bear in mind that your readers don’t necessarily have the same contrast settings on their device screens as you. Also, if your materials could be displayed on a projector, the technical limitations of the projector may result in a poor reproduction of the colors and contrast.

Use of Color for Emphasis

Many people are in the habit of emphasizing important phrases by coloring them differently, to help them stand apart from the surrounding text. However, not everyone is able to perceive the difference between the text colors, so the intended emphasis is lost on those readers. I’ve occasionally been given text to format for a web page, in which important changes were indicated in red. I had to send them back—it was too difficult to distinguish the red text from the black.

So, rather than relying on color to convey emphasis, consider the use of techniques that make your text visibly different in some other way, such as bolding or italicizing. In HTML, the <em> tag should be used for emphasis, so the importance of the phrase is not lost on users of screen readers. Similarly, <strong> tags will suggest to search crawlers that a phrase is important. You can of course use both tags to make your text both accessible and SEO-friendly, using CSS where necessary to ensure the tagged phrases also look different on the page.

Color Keys and Legends

I recently saw a pie chart divided into around 12 sections, each section in a different color. Given the number of colors required, it was perhaps inevitable that some colors would look similar to color blind readers. The chart’s legend paired the section colors with other information, explaining what each section represented. Unfortunately, for a color blind reader, it would have been impossible to match those pairings without opening a program like Photoshop in order to compare the hexadecimal values of each section with the legend colors. Not exactly user-friendly.

If you have many items to represent in a chart, and cannot find enough distinct colors to make the chart work for color blind readers, there are other options you can explore:

• Use a mix of colors and patterns—Consider using solid color for some sections and patterns for other sections, e.g., stripes, dots, etc.
• Use a mix of colors and text—Create a chart large enough to accommodate text in the actual sections, so a legend is either not necessary or becomes easier to understand. For instance, if a section should represent the percentage of vehicle sales that were Ford vehicles, that section could be labeled “Ford: 20%.” If you need to include more information, the legend could then expand on the section’s label, e.g., “Ford – includes cars and trucks.” This would be preferable to simply color-coding the Ford section and hoping readers can make the connection using color alone.
• Use a different kind of chart—If the options above are either impractical or unacceptable for aesthetic or branding reasons, try representing the data in a different format, in which either patterns or text will work better. If a pie chart isn’t working, try a bar chart, perhaps using horizontal bars if that makes it easier to add (and read) text in each bar.

Basically, it may sometimes be necessary to think outside the box to find a good solution that works for everyone, but if it means more people will understand your message, it’s always worthwhile.