It is estimated that one in 12 men (8%) suffers from some form of colour blindness, compared with only one in 200 women. This is a significant portion of the population, but we often forget about them when designing websites and user interfaces.

In order to consider the user experience and accessibility of each project, we should use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our programs more useful, and consider the feelings of color-blind users so that they are not frustrated.

What is color recognition disorder?

There are many types of color recognition disorder (color blindness), varying in severity.

There is a common misconception that people with color recognition disorder (color blindness) can only see black and white. Even if this may be true, monochromia (also known as total color blindness) is very rare, affecting an estimated one in 33,000 people. This severe visual impairment causes people to see things in shades of gray.

One important factor to keep in mind is that for most people with color recognition disorder (color blindness), it’s not difficult to distinguish between different colors. What really causes problems is the difference in brightness and shade between similar colors

Normal vision and monochromatic blindness, red color blindness, green color blindness

The more common condition, red-green identification disorder (color blindness), is divided into two groups.

People with red amblyopia (Protanomaly) are less sensitive to red light, and red, orange and yellow hues tend to be green and appear less saturated. People with Deuteranomaly have a low sensitivity to green light and have difficulty distinguishing between blue, yellow, and purple, as well as red, blue, and green.

Due to the high proportion of the population with visual impairment, users with color recognition impairment (color blindness) are a serious problem. For example, if users can’t distinguish between a series of ICONS due to color conflicts and lack of contrast, they will get frustrated and find another web page or application service to replace your web page.

How to design for People with Color recognition Disability (Color blindness)

Even though color recognition disorder (color blindness) can be quite confusing to users, it can be easily overcome. If you are aware of the problem, you are half the battle.

Use contrasting colors

Even people with monochromatic dysphoria (color blindness) still have a sense of contrast — the difference in proportion between light and dark.

To ensure that your site is more readable for the visually impaired, you must ensure that your content contrasts sharply with the background. For example, black text on a white background has high contrast and readability, while yellow text on a white background has low contrast and is almost unreadable even to a person with full color vision.

Use different shades of light rather than multiple colors

Monochromatic color schemes (not to be confused with total or monochromatic blindness) use different shades of one color rather than many different colors. This will effectively reduce users’ frustration with color and is a good way to incorporate color contrast into your design.

Experience color blindness in design

Choose color combinations carefully

The chart below lists color combinations that should be avoided

Use texture instead of color

When designing things like graphics and charts, consider using textures or visual patterns to help distinguish between the two colors.

For example, the pie chart below.

Red-blind users are likely to have difficulty distinguishing between different areas due to similar colors. However, if we add a few simple textures or patterns, the chart becomes 100% more readable

Avoid using color as a cue alone

When designing elements such as forms and complex interfaces, you shouldn’t just use color as a hint.

For example in the chart below, the one on the left uses only color as a hint leading to incorrect manipulation. People with full color vision can see that the mailbox field has turned red, indicating some kind of error. For people with green recognition disorder (color blindness), green in the correct field is indistinguishable from red in the wrong field.

The best way to solve this problem is to use some kind of icon, symbol, or label to indicate the error, as shown below.

conclusion

You should not use separate color cues to indicate something important unless you are sure that people with color recognition disorder (color blindness) can distinguish between the colors you have chosen. If possible, use ICONS, text, shapes, textures, or other visual cues and strong contrast colors to convey information to the user.

There are many ways to test accessibility, but these tools are not always completely accurate, and ultimately the best way to see if the design fits is to perform real user experience testing.