Designing for Users Who are Color Blind

As designers, we literally have to consider everything when we are working on a project. Who will use your application? What is their level of technical skill? What problems is your app solving for them? Do they have disabilities you need to take into consideration? Often, it is this last item that gets overlooked.

Color Blindness

You probably know, or have at least met, someone that is color blind. Color blindness affects around 1 in 12 men and 1 in 200 women worldwide. So for every 100 users that visit your web site or download your app, statistically 8 of them are color blind. If you don’t take this into account when designing, these users could experience your content in ways you never intended. Try out one of these apps and see how your app or site stacks up.

ColorBlindness SimulateCorrect- Android
Chromatic Vision Simulator- iOS

It’s Not Black and White

Being color blind doesn’t mean seeing the world in black and white. It is the decreased ability to see the complete range of colors or tell differences between them. If a website or app leans heavily on the use of color, you can understand how a person who is color blind could have difficulty deciphering and navigating it. So, what are some ways to make your design more color blind friendly?


This is just a good design practice in general. An icon can really help communicate your point to the user. If you have an error message that is red, it would be hard for a person who is color blind to see. Here it would be helpful to have an error icon.


The colors you choose are important in any design. However, it is particularly important when designing for color blind users. There are some color combos that can be particularly tricky. Here are a few you should avoid:

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

These colors combos are pretty poor to begin with, so I would just avoid them all together. Take care when selecting contrasting colors and shades of color. If they make your eyes vibrate, they are probably not a good combination for people who are color blind.

Less is More

An easy way to make wise color choices is to keep it minimal. Minimal is always the best design route to go anyway. It’s a trend that will stick around for a while, so you won’t need to redo your website or app every season. Keeping it to 2 colors, maybe 3 if you really need it, can make it much easier for a color blind user.

Many of the guidelines for designing for people who are color blind are also best practices for any design. It shouldn’t be a huge disturbance to your design process to design in a way that benefits people who are color blind. After all, creating an amazing user experience is part of good design!


Need assistance with your design? Contact us today.

Trent Nicholson
Trent Nicholson