Design for the Colorblind and Improve your Design for Everyone
To design for the colorblind in mind is important because bout 4% of the population has some form of color blindness. One in 12 men and 1 in 200 women are color blind and face challenges with a lot of online products like websites, apps, games, and webshops in their daily life.
Thankfully, designing for the colorblind doesn’t have to be difficult. And best of all, designing with the colorblind in mind will also improve your design for everyone.
How does color blindness work?
To see, we need light to hit the retina at the back of our eyes. The retina is made up of photoreceptors: rods and cones. The rods are sensitive to light while the cones pick up color.
Each of the cones is carrying one out of three different photopigments—red, green, and blue—and reacts differently to colored light. Mixing together the information of those three different types of cones makes up our color vision.
When one type of cones malfunctions, the color this cone would normally absorb is altered. This changes your color perception, resulting in what we call color blindness.
The three types of cones translate into three main types of color blindness: Deuteran (green), Protan (red), and Tritan (blue).
What do the colorblind see?
First of all, the colorblind do see color. Green is still green and red stays red, but not as vibrant or bright as someone who’s not color blind would see it.
For the colorblind, colors lie closer to each other and tend to blend together more.
Because of their reduced color perception, the colorblind face challenges with a lot of online products like websites, apps, games, and webshops. You can find examples of these challenges on wearecolorblind.com/examples.
Designing for the colorblind
There’s a big difference between not being able to distinguish between two colors and not being able to use an interface because you can’t distinguish between two colors. The difference is design, someone designed the interface to rely on color alone.
As designers, we should take into account that there are many people that don’t see the way most people do. Thankfully, designing for the colorblind doesn’t have to be difficult. There are a couple of simple principles you can use to make your design much more accessible.
Two simple rules about contrast and color
First, good contrast helps a lot. The more contrast, the better the colorblind can see the difference between the two items.
Second, never use color alone to convey information or indicate action. Always provide alternatives in the form of text, icons, or other indicators.
These two simple rules should be easy to follow and will greatly benefit the more than 300 million colorblind people out there.
Designing for the colorblind will reward everyone
Including the colorblind into your process is great, but as designers, we should take into account that there are many more people that don’t see or interact the way most people do.
A good design is inclusive and works for everyone in every situation.
And right now, there are many different situations. We are no longer just using our websites from behind a desk, with the curtains drawn, reading from a big, well-lit screen. We use phones and tablets outside of these rooms with perfect conditions.
People walk around, navigating on their phone with sunlight reflecting on their screen. On a moving train, we try to keep the focus on the finger-smudged screens of our shaking tablets. Or be in a hurry to text someone back with just 2% battery left. And then there’s those with cracks in their screens–so big, but miraculously still working.
Good design principles make sure a website or app can be used for everyone in all situations. And you can even make great designs just a few hues.
