Color design for your audience

We use color to communicate a message to our audience. Failure to understand Color Vision Deficiency  (CVD) means that about 9% of our audience doesn't receive the message. This applies to all media, whether it be print, slides, Web pages, games, videos, or smartphone applications. it applies to all communicators, including teachers and graphic designers.

For this article, the focus is on background and text colors. To illustrate the impact of color choices, I used the Text Color activity of my Colorblind Simulator app. Since the True Color standard for RGB supports over a million colors, the colors used are from the Material Design Colors palette for Android. The text color activity, itself, supports all colors. However, copying and pasting from a color palette simplified entry of text colors. The demo uses black as the background color.

The first test used Red 500 as a text color. The following screen capture shows the results for normal vision. A contrast ratio of 4.52, while not high, is above the minimum 0f 4.0. What happens when we look at protanopia (red), deuteranopia (green), tritanopia (blue), and monochromatic vision?

Individuals with protanopia won't be able to read the text, as the contrast ration is only 1.93, as shown below:

The results for deuteranopia illustrate the problems for those with the most common form of CVD. While the W3C contrast ratio is greater than 3, it is still presents problems for those with poor vision. 

Individuals with tritanopia (blue) color blindness have almost the same contrast ratio as normal vision for this color combination. 

While monochromatic vision is vary rare, there are individual for which their world consists of shades of grey. Converting a color to its nearest grayscale value provides an approximation of what they see.

Instead of using Material Red 500, the following tests use Material Yellow 500 as the text colors. Starting with normal vision, there is a dramatic improvement in contrast ratio.

While the contrast ratio drops from 17.20 to 16.74, those with protanopia would not have a problem reading the text.

While deuteranopia (green) color blindness reduces the contrast ratio to 16.19, the text is still easily readable.

Although individuals do not see the color as yellow, a contrast ratio of 15.03 makes the text easily readable.

With a contrast ratio of 16.52, even individuals with monochromatic vision can easily read the text.

As long as color does not carry special information, using colors for background and text colors is not an issue. What color an individual sees is not an issue. The issue is having a contrast ratio that makes the text easy to read. While the W3C guidelines define 3.0 as a minimum value, contrast ratios above 7.0 are much easier to read. White background and black text produce the highest contrast ratio of 21. Some individuals have a problem reading text with very high contrast ratios. To reach the maximum number of members in an audience, I recommend a contrast ratio between 7 and 18.

To accommodate visually impaired individuals, color cannot be the sole carrier of information. Graphs and bar charts need to be labeled, along with a detailed verbal description. Graphs can use different line types. These techniques do not preclude the use of color, they just provide alternate methods of communication. Afterall, the ultimate goal is effective communication to an audience.