Color Blindness:Impact on Design

Color blindness is a very common condition in people. It’s the inability of some individuals to recognize the difference in color due to the malfunction of their color photopigments. How common is this problem? Here are some statistics on designing for color blindness:

An estimated 253 million people live with vision impairment: 36 million are blind and 217 million have moderate to severe vision
impairment.

Color is one of the most important elements of design. Worldwide, colors are used to depict several things – emotions, importance, progress, concern, and so on. However, humans don’t experience the exact same color vision. Color is an outcome of the brain translating light received by our retinal cones. This makes us see colors in different ways.

What I see as red may not be perceived the same way as you see. Sometimes, this situation is more tragic. Defects in the cones can lead to extreme defects in color vision, that makes some people mistake shades or altogether lose the ability to differentiate colors.

There are several reasons that can lead to this situation. The most common color blindness happens with the loss or limited function of the red or green cone photopigments. For example, in the case of deuteranopia, where the green cone cells are not functioning, there will be no vision of a green and its constituent colors.

Similarly, with protanopia where the red cones stop working. Blue-yellow blindness is rarer than red-green. But the rarest type is complete color blindness or monochromacy. Monochromatic people differentiate color only through brightness. Their world is all in black and white. And this creates a unique problem for User Interface design.

Looking at the numbers of people who experience color blindness, this becomes a very important aspect when designing products. If this is not considered, it may render a lot of products completely unusable to color-blind users, which means a substantial loss for the business and discomfort to people. Here a nervous designer cowers, “I need to design a site from scratch in one week,” the designer says. “and you give me another problem to solve? I don’t have time for this!” Don’t worry, it’s not so bad.

Here are some simple and easy-to-follow ground rules.

Colorblind people are not able to distinguish tones (red, yellow, blue, green, etc.). But they see the same image as people with normal vision.

Comparison of the perception by a human with a regular vision versus a human with protanopia. The red completely disappears in the photo on the right.

When designing UI this leads to a bunch of problems – unreadable text, unnoticeable buttons, etc.

You can’t trust colors

Color isn’t omnipotent, you shouldn’t expect that it can solve all of your problems alone. But a proper base color is able to beautify UI and improve UX.

Statistically speaking most people with a moderate form of red/green color blindness will only be able to identify accurately 5 or so colored pencils from a standard box of 24 pencil crayons.

Any color designation can be supplemented with a caption or an icon so that the object preserves its function no matter what happens with colors. For example, because protanopia leads to an inability to see red color, it becomes difficult to correct form if the designer uses only red to indicate mistakes. A better solution is to supplement color with a caption or an icon.

Use patterns or texture to show the contrast

Too many patterns and texture bring a lot of noise, so it’s better to use too much. Slack, for example, offers users special accessible themes that change all colors of the user interface.

Do not have color names appear on hovering because that does not really solve the problem while using it from a mobile device. The best way of representation is as below:

This maintains a fine balance between giving only colors for selecting AND not leaving the users to take a minute to relate to the color by giving only the name.

Use patterns

Sometimes it’s a good idea to add patterns and textures to emphasize the contrast between objects.

Make it look good in the grayscale

Try out your design on a grayscale. If everything is visible distinctly in grayscale, there is a pretty good chance it will work for the color-blind users.

One of the best examples of this is Google Maps. Despite using red and green for busy and no traffic, use colors of pretty different hues, allowing color blind people to see the differences pretty well.

Avoid the complete no-no color combos

Be color-smart when picking your 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 that should be a complete no-no while choosing the pallet:

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

Finally, design for all

Creating an accessible user interface doesn’t require a lot of additional time. Empathizing with end-users and their way of consuming information, can, in turn, help us to create a final product that’s fully accessible & usable.