Designing for Color Blindness

Kurniawan Rakhmadi
Binar Academy
Published in
3 min readJun 17, 2019
Photo by Denise Chan on Unsplash

Extra large landing page banner, futuristic font, bombarded with color contrast, or stupid fine ass gradient is like a Khuldi fruit for the designer. These things are commonly used by a designer for esthetic purpose. But that was cool tho. I don’t deny that. :)

Users are not all the same person. Sometimes you got old lady, young man, maybe you got people with dyslexia, or maybe you got people with colorblindness.

You might be thinking: “why should I bother designing for such a small group of users?”

So what we can do to help them with our job as a designer? Lets we just pretend to be superheroes like Ironman or the neighborhood Spiderman but in designer ways.

1. Use both colors and symbols

Facebook using symbols and red error messages

You shouldn’t rely on color alone to convey a message. for example, certain types of color blindness might make it difficult or even impossible to see common red error messages. One approach is to use both colors and symbols where users’ attention is required. A good example of this is Facebook’s form fields and the error messaging attached.

2. Text Readability

Contrast checker from contrastchecker.com

Don’t make your user suffer. To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color, and text size. You can check it with contrast checker on the internet.

3. Use patterns and textures to show the contrast

Graphs viewed with normal vision
Graphs viewed with protanopia

Try to add different texture in each your color pallette. For example, it might be difficult for color blind users to interpret graphs and charts. In this case, it’s better to use contrasting patterns and, where possible, place text instead.

4. Be careful to use text overlay

Text overlay is tricky. Sometimes the text has the same contrast with the background that such pain in the ass. You can reduce your background exposure or add a darker overlay.

5. Avoid bad color combinations

Colour combinations as seen with Protanopia.

You need to be smart when picking out your color combinations. Since color blindness affects people in different ways, it’s difficult to determine which colors are ‘safe’ to use in web design.

“People ignore design that ignores people.” — Frank Chimero

Websites aren’t just meant to look good. They are meant to be easy to use for everyone, including people who are color-blind. Generally, UX designers should create websites that are accessible and user-friendly to all.

--

--