← Back to Blog

Colorful (and accessible) Design

TL;DR Make sure EVERYONE can actually see your snazzy colorful UI

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency and depending on the popularity of your app it means potentially THOUSANDS of users. No that the user count necessarily matters, because it's cool to care about making sure your application (big or small) can be used by anyone and everyone.

Colorblind users can usually see colors (although some can't see color at all), but certain color pairs look nearly identical. When you build an interface that relies only on those pairs to communicate meaning, you're excluding those people.

Common Problematic Color Combinations

Red vs. Green (Protanopia/Deuteranopia)

This is the most common form of colorblindness.

Color Hex What it potentially looks like
Red #FF0000 Dark brownish-gray
Green #00AA00 Almost the same dark brownish-gray
Orange #FF8800 Dull yellow-brown
Bright green #44FF44 Pale yellow or beige

For example: A form with a red #FF0000 error message and a green #00AA00 success message. To someone with deuteranopia, both read as muddy olive-gray. To help mitigate any confusion, select either different colors or (better) add an icon or a text label. I recently learned about Colorsym which aims to solve this exact issue and I'm planning on implementing something similar on this site.

Blue vs. Purple or Yellow vs. Pink (Tritanopia)

Less common but just as important.

Color Hex What it potentially looks like
Blue #0066CC Muted blue
Purple #6633CC Almost identical muted blue

For example: Visited links are purple #6633CC and unvisited links are blue #0066CC. For some users, there's no distinguishable difference. This is why you should underline links. Don't rely on color alone to show visited vs. unvisited; use a different style like underline weight, dotted vs. solid, or a small indicator.

This is closely related to tritanopia and most people with one also suffer from the other.

Color Hex What it potentially looks like
White #FFFFFF White
Light yellow #FFFFAA Nearly white with a faint tint
Yellow warning bg #FFF3CD Barely off-white

For example: A warning banner with yellow background #FFF3CD and dark text. for some users that yellow background essentially becomes white and loses any attention-grabbing "warning" effect entirely. Add a high contrast border or an icon. The border helps distinguish the banner as its own entity and there are many icons that have come to be associated with warnings or things that require immediate attention.

Less talked about and least common, total color blindness (Monochromacy)

This means the user can ONLY see shades of gray. It affects 1 out of around every 30,000 people so it's extremely uncommon, but like all of the others it is still very important to consider. Thankfully, if you follow the above suggestions for mitigating other forms og color blindness, monochromatics will likely be able to use your application just fine.

Helpful Resources

  • Travis