Designing for Color Blindness — for Better Products for Everyone

I have run across beautiful ui & visualizations that I simply can’t use because I happen to have some minor color vision deficiency. Curse you, Bejeweled!

Take this graph on Simple:

I cannot quickly tell what I earned vs. spent in this graph rendering the graph useless.

Good design shouldn’t just rely on color to convey information. While it might be tempting to find particular color combinations that work for the majority of users, it’s still a hack. It’s better to use shapes and patterns and rely on color as a secondary feature.

Here, I’ll just add some filled circles to drastically increase the readability of the Simple graph. Tada!

I hope the dots are in the right places!

Short Primer on Color Vision
Most humans have three types of cone photoreceptors to detect color (there are also rode-shaped photoreceptors for night vision).

Each type of cones is sensitive to short-wavelengths, medium-wavelengths, or long-wavelengths of the visible spectrum. You are able see the whole color range because your brain takes these three signals and mixes them so you can see a specific color. However, having a mutated or missing cone type is what causes color vision deficiency and my terrible scores on Bejeweled. 😕

Using shapes & patterns to convey information is better than just relying on colors to differentiate. Colors are fun and should be used as a secondary indicator of information.

The happy ending!
After contacting Simple, they updated their graph — with patterns. Now I can see how little money I have!

Follow me @thepinwale on Twitter

Originally published at

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.