How To Design For Color Blindness

Roughly 4% of people worldwide experience some form of color blindness or color vision deficiency (CVD). More than 300 million people all around the world experience CVD (including the author of this article), which is close to the entire population of the United States. CVD is more common than you might think, which means that designing for color blindness is a must. It’s good for your customers, good for your team mates, and it just makes sense. In this article we’ll examine some of the basics of CVD and share ways to make your designs more accessible to the color-blind population.

A Quick Science Lesson

Our eyes detect light primarily through two types of cells found in the retina: rods and cones. Rods are very sensitive, and help us determine the intensity of a light source. Cones are only triggered by stronger light sources; they help us detect light of different wavelengths. And this is where things get fun.

There are three different types of cone cells, classified as short (S), medium (M), and long (L). These designations correspond to wavelengths of light with the colors blue, green, and red. The chart below illustrates the relative sensitivity of S, M, and L cone cells to different wavelengths of light for a person with normal vision.

Adapted from Figure 2 on this site.

Whatever colors we see are based upon the ratios of light detected by S, M, and L cones. Though the chart above approximates how 96% of the global population detects different colors, everyone interprets these ratios slightly differently. Where these ratios differ dramatically from the norm is how we identify color blindness.

We’ll let the team at We Are Colorblind explain:

“The tree types of cones translate into tree main types of color blindness: Deuteran (green), Protan (red), and Tritan (blue).

“In each of these cases, the affected cones can either be mutated or defective. A mutated cone causes a slight shift and a defective cone causes bigger shift in the color perception. This results in a total of six possible types of color blindness.

“The Deuteran (green) and Protan (red) inefficiencies are the most common types of color blindness. Blue-type color blindness is possible, but extremely rare.”

This chart illustrates the frequencies of different types of color blindness across the global population (adapted from We Are Colorblind):

But what does it look like if your green cones don’t perform as expected? And what happens if you don’t have enough red cones to detect longer wavelengths of light? Watch this animation for another way to visualize these data:

Red-green color blindness is primarily caused by a defective X-chromosome, which means that men are much more likely to experience CVD. Up to 10% of men are color-blind, compared to only 0.5% of women. This is only a brief introduction to the fascinating biology of CVD. If you want to learn more, this site is a great place to start. And even a cursory glance at the research will reveal the group with the highest incidence of color blindness is white men. This has implications for the design industry, as we will see in just a bit.

There’s one more thing that needs to be mentioned on this topic. The vast majority of color-blind people can see some color, since in many cases only one of their three types of cone cells is affected. The partial or complete absence of color vision is known as Achromatopsia, which affects roughly 1 in 30,000 people. People with complete Achromatopsia can only detect black, white, shades of grey, and variations in contrast.

Great Design Begins With Better Awareness

“To know thyself is the beginning of wisdom.” Socrates is said to have shared this pearl over 2400 years ago. And knowledge of oneself includes one’s biases and disabilities, in addition to one’s goals and desires. Wisdom begins with awareness, and if we want to be successful in design or business, we must also know our audience.

What does this have to do with color blindness? If we want to be better designers, we have to understand what it’s like to be color-blind. So, we have to ask: are you color-blind?

An easy way to test for red-green color blindness is to take the Ishihara color plates test. In this test, individuals with normal vision will see numbers and patterns that are different from what color-blind people will see. The Ishihara test is a good start, though please keep in mind it does not test for blue-type color blindness or Achromatopsia. If you prefer an official diagnosis, please consult an ophthalmologist.

Example Plates From The Ishihara Color Blindness Test

What did you discover from the Ishihara test? If you think you’re color-blind, that doesn’t mean you can’t work in design. Far from it! Today there are many resources that can help you create beautiful, clear designs for everyone.

If the test above reveals that you have normal vision, you can understand what it’s like for someone with CVD by using a Color-Blind Simulator. Chrome users may benefit from the Colorblindly extension, while Safari users can download Color Oracle. These tools can help you combine colors in the right ways, and with enough contrast, so you can make designs that everyone can appreciate.

Before we share some simple tips on designing for color blindness, we need to discuss it within the larger context of inclusivity. As we saw above, the group with the highest incidence of color blindness is white men. And since the design industry is overwhelmingly white, designers must be extra sensitive about how their vision might differ from their colleagues, their clients, and their intended audience.

Design will never be inclusive if we do not seek to understand and address our own biases and blind spots. In the next section we’ll talk about how to make your designs more accessible for the color-blind population.

4 Simple Steps To Accommodate Color Blindness In Your Designs

If you want to make your website, app, or branding more accommodating for color-blind users, you need to answer several important questions.

If you’re starting from scratch, you can choose from among many different 8- and 15-color palettes for color blindness. These palettes will show you some of the best contrasting colors for people with color blindness. View some of the most popular 8- and 15-color palettes here, here, and here.

But what if you can’t choose new brand colors? And what if your customers have already selected theirs? In this case, there are several other ways we can approach this design challenge.

If Content is King and Context is God, then Contrast is Key. We can’t say it any better than InVision:

 "The more contrast, the better the colorblind can see the difference between the two items."

Think of every way you can use contrast in your designs to improve color-blind accessibility. Use bright colors instead of pale variations. When you need to use two colors next to each other, choose colors that are as different as possible. And when you consider color blindness and web design, you have to think about how to maximize contrast among dynamic elements. Which colors do you use for hyperlinks and buttons? And how do these colors change when a site visitor hovers their cursor over the element? In these situations, you may need to highlight the element by adding a colored border.

When we use color in our designs, we enrich our communication. But just as endless, dense paragraphs of unadorned text can be challenging for our audience, using colors alone to convey information can be treacherous for those of us with CVD. Your audience will have a much easier time if you combine colors with text, icons, and other design elements to tell a story. Relying on color alone is just one of many pitfalls to avoid.

Your brand voice is way more than the colors you choose. You can also convey tone with the right font. And if you want to make your messaging as inclusive as possible, you need to consider your font selection along with color.

If you choose a thicker, bolder typeface, your designs will be easier for everyone to read. This is because a larger number of cone cells will be able to detect light from those letters. If you go the opposite way, a much smaller number of cone cells will be triggered by light from those words. And legibility gets even worse if you use a small font size.

You can see what we mean in this simple chart. On the top we show a familiar sentence set in Times New Roman 10 pt type, colored yellow. On the bottom we show the same sentence set in bold Verdana, 25 pt type, colored navy.

This illustrates the importance of font selection in creating designs that are more legible for color-blind people. And once you start making your designs more accessible for one group, you might find they benefit other groups as well. As it turns out, many font characteristics that improve legibility for color-blind people are also good for people with dyslexia.

Where Do We Go From Here?

As awareness of color blindness in design continues to grow, we can look forward to more inclusivity in design for everyone to enjoy. And the only way to improve accessibility is with continued education. Please share the color-blind test and color-blind simulator with your teammates. Test your favorite designs with the color-blind simulator and see how you and your team can improve. In an era of instant communication and rapidly growing access to information, brands cannot afford to ignore people with CVD.

Understanding color blindness and adjusting our designs accordingly is just one step towards greater inclusion and accessibility. Continue your journey by exploring and supporting BIPOC type designers.