A Better UI for Color Blindness

Color plays an essential role in UI design. When applied properly, color improves user experiences, influences purchasing decisions, and strengthens brand identity. But to use color in a way that’s equally effective for color blind individuals takes a little extra knowledge and skill. Roughly every 1 in 12 men, and 1 in 200 women, are color blind. While those who are color blind see things as clearly as everyone else, they can’t fully discern red, green, and blue light. So, let’s look at seven ways you can make your site more accessible, and the experience more satisfying, for color blind customers.

1. Use Patterns and Textures
   It’s easier for color vision deficient users to distinguish patterns and textures. So, incorporate them into your designs and diagrams whenever possible. You can add text labels, as well, to make elements even easier to discern.
2. Combine Colors with Symbols
   Don’t rely solely on color to communicate errors or convey information through your UI. Using colored icons and symbols instead will make errors or highlights equally apparent to all users.
3. Apply Text Labels
   Apply text labels to color filters and swatches to improve accessibility for color blind users. Descriptive text will help color blind readers differentiate similarly colored or shaded areas.
4. Underline Links
   It’s a good idea to always add an underline to text links. This makes it easier to immediately tell regular text and anchor text apart. It also makes it unnecessary to hover over text to find links.
5. Avoid Certain Color Combos
   Color blind viewers often struggle with certain color combinations. Steer clear of these combinations: green/red, green/blue, green/brown, green/black, green/gray, blue/gray, light green/yellow, blue/purple.
6. Distinguish Primary Buttons
   Designers frequently rely on color to make primary buttons stand out. Instead, differentiate primary and secondary buttons by using size, placement, contrast, or design elements, such as borders, icons, or font weight.
7. Mark Required Fields
   When viewing online forms, color blind readers can’t always tell a required field from an optional field. Label required fields with an asterisk (*), with words (“Required” or “Optional”), or simply remove optional fields.

In the end, both your site and your organization will benefit. A UI designed with color blind users in mind means better accessibility, more traffic and greater customer satisfaction.

Based on Designing UI with Color Blind Users in Mind from secretstache.com.