According to a report, approximately 253 million people live with vision impairment or are color blind, out of which 36 million are blind, and 217 million have medium to severe vision impairment. What is color blindness? Color blindness is a condition in which individuals often mistake shades or can’t distinguish colors at all. Majorly, this deficiency is seen in men; every twelfth man of the world precisely; women are at a lesser risk. 

Most color-blind people can see things clearly; just as any common person would do. The problem is that they are not able to distinguish between red, green, or blue light. The mutation in the X-chromosome leads to this type of deficiency. This means, women are more likely to carry the deficiency rather than suffer from it.

The most commonly noticed deficiency is red-green color blindness. A person facing this difficulty mixes up all colors which have red or green as part of the whole color. People who are impacted by Protan color blindness are less sensitive to red light. On the other hand, people affected by Deuteranopia have the same problem with green color. 

Another complication is Protanopia, which confuses people between blue and purple. that’s because they can’t recognize the red element of the color purple. Tritanopia refers to sufferers who struggle to distinguish blue or yellow light; this is the least common type of color blindness.

People experience the content on websites and other platforms much differently than you expect. Therefore, it is important to ensure that your user experience appeals equally to these visitors. If you take care of some basic fundamentals of designing and usage of colors, you can make your UI more accessible to all users. Here are the top things to consider when designing a UI for color accessibility.

1. Use Symbols Along With Colors

Color should not be the only way to convey a message. People affected by a particular type of color blindness face difficulties in identifying red color. It can be sometimes even impossible for them to see common red error messages. One of the ways to address this issue is to use both colors and symbols in attention-seeking areas. One of the best examples could be Facebook’s form fields and the error messaging attached.

2. Always Use Text Labels

Adding text labels to color filters and swatches improve accessibility for color-blind users. Based on the type of color blindness, users may face difficulty in differentiating between different colors, or at their shades, without some sort of descriptive text. Adding text labels to color filters not only improves accessibility for people with color blindness, but also for people with normal vision. Some of the most difficult to distinguish colors on a monitor are white, off-white, and light grey 

3. Avoid Red and Green 

These two colors in combination can be problematic. People with strong CVD (strong meaning a more severe condition of CVD) would see both red and green as brown. On the other hand, people with weak CVD can see strong red and green colors like red and green. But, this can still be problematic when the colors are weak or blended together.

Keep in mind that being able to tell these colors apart is only an issue if color is the only encoding method used to make a distinct comparison. For example, a good number versus a bad number in a table, or one line versus another line in the same line chart. 

Certain color combinations aren’t ideal for color-blind users either because they have low contrast ratios or because they’re difficult to differentiate between. Here’s a list of color combinations that you should avoid using in your interface designs wherever possible:

1. Green-red
2. Green-blue
3. Green-brown
4. Green-black
5. Green-grey
6. Blue-grey
7. Light green-yellow
8. Blue-purple

4. Underline Links

A lot of the time we use font color or font weight to denote links. While it may be possible for someone with deuteranomaly, protanopia, or tritanopia to distinguish anchor text from regular text, it’s certainly not ideal due to the low contrast ratio.

Someone with monochromacy wouldn’t be able to differentiate between text and anchor text at all and would have to hover over the text to see if it their cursor changes to a pointer. That is why it’s a good idea to add an underline to text links. This makes it easy to immediately tell regular text and anchor text apart.

5. Make Primary Buttons Standout

Many times, designers rely on color to make primary buttons stand out. The problem with this is that the color you use may be difficult for color-blind users to perceive. Here’s what you could do instead:

• Increase the size of your primary button.
• Try out different placement combinations.
• Increase in contrast between primary and secondary buttons.
• Use borders, icons, or font-weight to differentiate primary and secondary buttons.

6. Use Patterns and Textures

Color differences are incredibly important with data visualization e.g., graphs and pie charts. Choosing colors that have a low contrast ratio can make your chart difficult to interpret for color-blind users. Here’s what you should do instead:

• Use patterns and textures to make it easy for users to differentiate different segments.
• Add text labels to segments to make them even easier to understand.

Conclusion

Designing UI for color-blind users will help you improve your site’s accessibility for users with normal vision, as well. Want to make sure your website is designed colorblind-friendly? Talk to our experts.

Need to know the UI Design tools for 2020? Click Here