How to Design for Color Blindness

Around 8–10% of males and 0.5% of females have some form of color blindness. This means that for every 100 visitors to your site, up to 10 of those people see colors differently than you do. So what can you do to ensure your content is accessible for everyone? There’s a lot of conflicting information available on how best to design for color blindness, so we’ve come up with a condensed list of the main things you should consider when designing UX for color accessibility.

What is Color Blindness?

Color blindness is the inability to distinguish between certain shades in the color spectrum and affects more men than women because it’s the result of a mutation in the X-chromosome. There are 3 main types of color blindness: deuteran (green), protan (red) and tritan (blue). The most common form is of the deuteran spectrum, protan is the second, and tritan is the least common. The image below shows what the rainbow may look like to individuals with different forms of color blindness.

There are tests available (links are available below) and examples showing how color blind users see things; however, it’s not possible to be 100% sure.

How Can You Design for Better Color Accessibility?

You might be thinking: “why should I even bother designing for such a small group of users?” But generally, the elements that are favorable for color blind users are considered to be good design in the wider sense. So if your site is well designed, it should already be accessible to all users.

Designing for accessibility doesn’t mean that the aesthetic integrity of your design needs to suffer. Here are 5 basic ideas for you to focus on when designing for color accessibility:

1. Use Both Colors and Symbols

You shouldn’t rely on color alone to convey a message; for example, certain types of color blindness might make it difficult or even impossible to see common red error messages. One approach is to use both colors and symbols where users’ attention is required. A good example of this is Facebook’s form fields and the error messaging attached.

Interesting fact: Facebook’s logo and notorious blue color scheme was specifically chosen since Mark Zuckerberg is red-green color blind and sees blue the best.“Blue is the richest color for me. I can see all of blue.”

2. Use Minimalism

You should limit the color palette you use for your website; the fewer colors you use in your design, the more accessible it’ll be for users with color blindness. Not only is minimalistic design a trend, it’s useful when you’re creating color accessible designs.

3. Use Pattern and Texture to Show Contrast

You should use contrasting patterns or textures on elements to show emphasis rather than multiple colors. It might be difficult for color blind users to distinguish between graphs for example, so it is better to use clearly different patterns when you have a limited color palette.

This table is a good example of using pattern to show contrast.

4. Use Contrasting Colors and Hues

You shouldn’t rely on using black and white as the only contrasting colors; you should use a range of clearly contrasting colors and hues in your designs. For example, when you’re including clickable text it’s better to use different hues to show contrast.

The page shown above is an example of applying the contrast concept well because it’d be clear to color blind users which item they currently have selected.

5. Avoid Bad Color Combos

You should be color-smart when picking your color combinations. Since color blindness affects people in different ways, it’s difficult to determine which colors are ‘safe’ to use in web design. Here are a few color combinations to avoid because they’re a potential nightmare to color blind users:

• Green & Red
• Green & Brown
• Blue & Purple
• Green & Blue
• Light Green & Yellow
• Blue & Grey
• Green & Grey
• Green & Black

Using Color Content Visualiser you can find color accessible color combinations for your designs.

How do you know if you’re color blind?

Well… Some people go years without knowing they’re color blind as the effects can go relatively unnoticed unless someone points them out. The image below is commonly used to test for color blindness — give it a go! (You can find a link to the full test at the bottom of this article.)

Still not sure?

1. Ishihara Color Blindness Test: You can take the 38 plate based test and get feedback as well.
2. Color Blind Check: an Android App created by Colorblindor where you can test whether you are color blind in ±60 seconds.
3. Coblis- Color Blindness Simulator: here you can upload an image and take a look at what it’d look like through the eyes of people with different types of color blindness.
4. Mobile Apps: here’s 3 Android and iOS apps specifically developed to help color blind users.

Conclusion

Generally, UX designers should create websites that are accessible and user-friendly to all users. Unfortunately there isn’t a one-size solution when designing for color blindness specifically but there are a few essential UX design principles to bear in mind that will certainly help:

1. Don’t only rely on color to convey a message
2. Keep your color palette limited to 2 or 3 colors
3. Use texture and patterns to show contrast
4. Use contrasting colors and shades to show clickable text
5. Avoid using bad color combinations like green and red, green and blue or blue and grey etc.