UI Design for Color Blind Users

By Scarlett Payne | December 9, 2020 USABILITY

Understanding Color Blindness

Most people are trichromatic: they see color as a combination of greens, reds, and blues. Color vision deficiency (CVD) comes from being unable to see one or more of these colors.

Why Designing for Color Blindness Matters

• 1 in 12 men and 1 in 200 women are color blind. • Everyone deserves equal access to the internet. • Color can influence a user’s: - Purchase decisions - Emotional response - Overall user experience

How to Design for Color Blind Users

Use Symbols & Labels Distinguish info conveyed with color in data visualization or when guiding users. Rethink CTA Buttons Use size, contrast, weighted borders, weighted fonts, symbolic icons, and hover effects. Underline Links Underline links to make them more visible.

How to Design for Color Blind Users

Consider Minimalism The fewer colors there are, the less chance there is for confusion. Simulators Use color blind simulators, like Oracle, to see designs the way a color blind user would.

Tips for Choosing Colors

• Emphasize the contrast between foregrounds and backgrounds. • Don’t use hues near each other on the color wheel unless there’s a large difference in lightness. • Avoid using colors of similar lightness, regardless of hue or saturation. • Increase the saturation of hues.

Color combos to be wary of

- Red and green - Green and blue - Green and brown - Green and gray - Green and black - Blue and gray - Blue and purple - Yellow and light green

Make Your Website Accessible

Designing for color blindness ensures that you provide a user experience your entire audience can navigate and enjoy. For them, it means a brand they can rely on; for you, it means successful conversions.