Designing for color-blind users

Color-blindness or Color Vision Deficiency is very common–approximately 8% of men worldwide and 0.5% of women. So if you have said 1000 users of your website or application then 80 users might see your product in a different way than you expect them to.

Color-blind, though not a huge vision impairment, it still affects the way a user experience the world around them and being in a field that focuses on user experience, it makes me feel awful. According to me, and I guess you will also agree, color add the essence to the visuals. Colors are what pleases our eyes, dominates our mood, and makes us wonder.

 

As a user-interface designer, it is our aim to make sure that every user experiences a product to its fullest. Though it is a small number to consider if you design an interface for color-blindness then it will also work great for people with no color-deficiency. Also, it is good practice to design products considering accessibility issues.

Types of color-blindness:

 

  • Protanopia: People are less sensitive to red color.

  • Deuteranopia: People are less sensitive to green color.

  • Tritanopia: People get confused between blue and yellow color.

  • Achromatopsia: People cannot see colors, they perceive the world in black and white shades.

When you are designing an interface you need to consider all the people, which means you need to consider all types of color-blindness. If you are thinking that considering all types of color-blindness may restrict the use of color palettes in your design then your concern might be legit but that’s where UI/UX experts come into the picture.

Below are some images I found on color blindness:

Designing Tips for color blindness:

1. Avoid come color combination:

There are some combinations that are hard for color-blind people to see. So the designer should avoid building an interface using such color combinations. We always, ALWAYS stay away from these combinations.

To color combination we avoid are:​

  • Green - Red

  • Green - Brown

  • Blue - Purple

  • Green - Blue

  • Light Green - Yellow

  • Blue - Grey

  • Green - Grey

  • Green - Black

2. Icons and colors:

 

A designer should not only focus on the color or function of the buttons but also focus on icons to represent the button’s function, a way to indicate what the button does. It is good practice to choose icons that are universally accepted for a function. So just in case, if the user cannot see the color, he should still be able to figure out what the function of the button is.

For example, Icons for Play-Stop-Pause has universally accepted icons. The designer should focus on icons first and then think about colors. One can experiment with their color palette and give a little color pop here by giving above three buttons different colors. As long as you stay consistent with the internal and external consistency and do not experiment to an extent that the colors hurt your eyes, you will be fine.

Another very common and great example of icons & color is the stop-walk signal. When the pedestrian is supposed to stop there is a universally understood and accepted symbol of a  hand to represent that it's a stop signal and a man in green/white color walking to symbolize walking.

3. Colors of different brightness:

 

If the user is color blind and if the colors are of the same brightness it becomes difficult for the user to distinguish between the colors. The colors when seen by a color-blind person change its property. Let's consider a person who has Achromatopsia, he will see all the colors of the same shades if they have the same hue, so choose a color palette in a way that when you change them into gray-scale they form a monochromatic color palette and no two-color has same shade in gray-scale. Below is the image of colors with the same brightness. The left side color palette shows how normal vision people see color and the right side shows how color blind people view colors.

4. Use Texture along with colors:

 

When using different colors or shades of color, the designer must also use different kinds of textures to show the difference between the two items. Below is the picture of how a person perceives a graph and how a color blind person does. You can see how the graph ends up being of the same shade for a color-blind person still it is distinguished with the help of texture
 

5. Contrast for Background and Text:

 

Whether using an image or a solid color for the background, the designer should make sure they are of completely different shades or maybe have a huge contrast difference so that it is easier for any color-blind user to differentiate text from its background. 

Conclusion: 

These tips mentioned above are not compulsory but it is considered as a good practice and is very useful for color-blindness accessibility. Websites, applications, or any other interfaces are not just meant to look beautiful, they are meant to be useful.