How To Design For Colorblind Users

Did you know that 4.5% of the entire population is colorblind? If your audience is mostly male this increases to 8%. Designing for colorblind people can be easily forgotten because most designers aren’t colorblind.

In this post I will share my experience as a colorblind user and colorblind designer to help you make better color-related decisions for your projects.

TYPES OF COLOR BLINDNESS

Color blindness is really hard to describe if you don't have it; there are different types and severity of color blindness. The colorblind people don’t see the world in black and white, they can see color, but they have a narrowed color perception. Colors lie closer to each other and are not as vibrant or bright as someone who isn’t colorblind would see it.

Deutan color blindness is a type of red-green color blindness in which the green cones in the eye detect too much red light and not enough green light. As a result red, yellow, green, and brown can appear similar, especially in low light.

A person with protan type color blindness tends to see greens, yellows, oranges, reds, and browns as being more similar shades of color than normal, especially in low light. A very common problem is that purple colors look more like blue.

The blue-weak (Tritanomaly) and blue-blind (Tritanopia) colorblind have problems seeing the color blue.

Rod monochromacy (RM), also called congenital complete achromatopsia or total color blindness, is a rare and extremely severe form of an autosomal recessively inherited retinal disorder resulting in severe visual handicap.

For more information about types of colorblindness have a look at this blog post See From The Eyes Of A Colorblind

So The Question Is How You Can Design For People That Can't See Red, Have Problem With Purple, Blue Or Yellow?

HOW I DESIGN FOR 'NORMAL VISION' CLIENTS AS A COLORBLIND DESIGNER?

As I explained above I can see most of the colors and only have difficulty with few shades and hues. Most of my projects are done on the computer and it makes it easier to work with color codes and color picker. After 11 years of experience in different color-related fields such as Interior design, graphic design and advertising, I have my own style and tricks that help me to handle any types of projects.

Most of the time a client already has a couple of colors in mind. If you are colorblind designer then you can use tools and websites to help you determine what other colors might work well with it. You should know about color theory and color schemes while you work with color wheel.

It is rare that you would be messing with two different colors that will cause an issue together. However, if a client gives me something that isn't color blind friendly - I am usually the first person to tell them about the issue. When you can say "Actually, we should consider different colors or shades because this red text on green background will cause a contrast issue for people with deuteranomaly or protanomaly color blindness." As you can imagine, it helps you sound like one hell of an expert on design to know such details.

Designing for colorblind people is not that hard, tools like ColorSchemeDesigner have a color blind friendly mode that simply won't let you pick a palette that's inaccessible. I really recommend using these on any product.

DESIGN FOR COLORBLIND USERS

Use Contrast Wisely

Using a good contrast between the color of text and background is one of the most important factors which can draw your eye towards an important section of your website, app or your product. In addition, achieving an effective contrast can make the text easier to read.

Colorblind individuals are able to identify bright colors more easily than dim hues. Designers can use vibrant, dark colors to make it hassle-free for individuals with color deficiencies to read the text. So, play smartly with colors in dark and light combinations to maintain a perfect contrast ratio. But make sure to stick to colors that perfectly align with your overall brand guidelines.

Here are some color combinations that you should NOT use while choosing a color palette for your website.

Green & Red

Green & Brown

Blue & Purple

Light Green & Yellow

Blue & Grey

Green & Grey

Grey and Yellow

To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size. Have in mind that reducing the background opacity increases the contrast, making the text easier to read.

WEBSITE DESIGN:

Colorblind face great deal of difficulty in navigating through a website not properly designed for facilitating all sort of audiences. Major elements which can be improved in designing for colorblind audiences are mostly related to making your website information more vivid and easy navigation.

Here I am listing down some of the tips website designers can utilize for making their website optimized for colorblind audiences too.

1. Provide text based guidelines. In choosing the color for the product, give written guidance in front of color so that colorblind users can easily choose between colors. Use Clear Color Names and Useful product descriptions one of the most common hitches that colorblind individuals have to face is identifying the actual color of a product on an e-commerce website.

If you are running an e-commerce store that sells t-shirts and if you only show an image of the shirt, it may be a bit difficult for a person with color vision deficiency to identify which color the t-shirt really is.

2. Use the color search filters Incorporating an effective color search filter with clearly defined labels on your website makes it hassle-free for people with protanopia to conduct a product search. like Amazon website.

3. Give links of your website on clickable buttons for helping colorblind users in easily spotting a link, rather than searching through content and waiting when the cursor gets changed into the pointer.

4. Use clear contrast combinations for making it easier to spot the significant difference.

5. Give option to use your website in a gray-scale mode too, excellent example here would be Google maps which are shown in Gray scale but they look equally appealing, thing here to keep in mind is to not reduce appeal of the website.

6. Use colorblind-friendly graph with pattern on the colors.

Sources; 1, 2, 3

These are some of the tips web designers can utilize to make their business website equally useful for 100% of the audiences.

TEST YOUR WEBSITE

There are tools available to help you design for colorblind people:

Colorblind Web Page Filter: If you want to test a website for its colorblind compatibility, try the Toptal Color-Blind Web Page Filter. The website, while sometimes slow, is effective at showing you what web pages look like through the eyes of others. Just give it a URL, choose the coverage filter, and click Fetch and Filter!.

The Best Color-Blind Simulator For Images: If you're designing an image and you're wondering how color-blind people will see it, try the Coblis (Color-Blind Simulator) website. Coblis is a web tool that makes it easy and quick to upload an image and test it against different color-deficiency examples.