How to improve web accessibility by design for Color Blindness

Kanchana Godage
3 min readMar 15, 2020

--

When you design, have you ever think about the color blinded people who live around the world? I think your answer is “YES”, that’s why you’re here to read this blog. Worldwide, there are approximately 300 million people with colorblindness, almost the same number of people as the entire population of the USA! As a percentage, we can say 8% of men and 0.5% of women are colorblind. Here I’m gonna show why designing for color blindness is so important and how you can improve web accessibility experience of color blinded people and stay safe from getting a fine. Something which can often benefit people with normal vision too.

Avoid the following color combinations

Color blindness affects people in different ways. So It’s hard to point out which colors to use or not to use. But these few color combinations are really hard on color blinded people

  • Blue & Gray
  • Blue & Purple
  • Green & Black
  • Green & Gray
  • Green & Red
  • Green & Brown
  • Green & Blue
  • Light Green & Yellow
Diamond Diaries Saga
Diamond Diaries Saga uses different colors and shapes but fails to be accessible to the colorblind.

How to select color combinations then

Colorblind people don’t need a Black and White web site. They need to identify different elements. One of the best ways to do that is to maintain the contrast ratio of colors.

Every designer knows what is the color wheel. An easy way to select color combinations is by choosing colors in the shades of opposite colors on the color wheel.

Make it Monochrome

You can easily use multiple shades of a single color rather than using multiple colors in your design.

Show contrast by using Patterns and Textures

Try using texture in addition to color to differentiate between objects. The image below demonstrates how people with different vision would see this.

Trello introduced a “Colorblind Friendly Mode” improve their accessibility
Dichromatic view

Use Colors, Labels, and Symbols

Colors are not the sole medium to convey information. If you use colors to show errors in the fields when designing a form, how colorblind people see the error?

Hard on colorblind people
Easy on colorblind people

Conclusion

Designing for the colorblind is not easy. I write this article to cover the majority of the problem those people experience. People with color-blindness are not the only ones who will benefit from these techniques.

Ultimately, websites aren’t just meant to look good, they are meant to be easy to use for everyone, including people who are color-blind. If it’s looking good that is great.

If you’re colorblind, share your experiences with us here 👇

--

--

Kanchana Godage

Digital Marketer • Interaction Designer • Product Designer