Colourblindness in design

Question

I'm doing a little research to see how many people are affected by colourblindness to see if it is useful for our company to put some extra attention into our designs for those who are colourblind.

I've come to the conclusion that it can be important to avoid red-green hues, since most colourblind people have a weakness for that hue range(8% of the population!).

With that in account; I'd like to hear from you how you deal with designing with colourblindness in mind. What are do's and don'ts with this subject?

I, personally, believe that not every website should have a complete colourblind-safe environment, as long as it is not about product-breaking functionalities.

Answer 1

...to see if it is useful for our company to put some extra attention into our designs for those who are colourblind.

It's not just colour-blind users who can't see certain colour combinations - actual blind people can't either, so you need to ensure data isn't represented purely visually.

Webaim have some useful info on this topic that covers off the different types of colourblindness - http://webaim.org/articles/visual/colorblind. The most important thing to take from this article though - don't rely on colour-only when representing any information on screen.

However, the main type of colour blindness is red-green, although there are a variety of other types, as outlined by Webaim:

Red-Green Colour Blindness:

The most common broad category of color-blindness is often called red-green color-blindness, but this does not mean that these people cannot see reds or greens. They simply have a harder time differentiating between them. Not all reds and greens are indistinguishable. It would be easy for someone with a red-green deficiency to tell the difference between a light green and a dark red, for example. A lot depends—at least in part—on how dark the colors are. If the red is approximately as dark as the green, there is a greater likelihood that the colors will be confused.

Other Deficiencies

• Tritanopia (blue deficiencies)

  Insensitivity to short wavelengths (the blues)

• Rod monochromacy or achromacy (no color)

  This group constitutes an extremely small minority among people who are color-blind. The cones of the eye are non-functional, so the rods (receptors which can only differentiate between light and dark) are the only available source of visual information. Individuals with achromacy see no color at all. Theirs is a world of black, white, and shades of gray. They often have poor visual acuity and have an aversion to bright light. This is the only group for which "color-blindness" is a label that fits, since all other groups have the ability to see some color.

Challenges and Solutions

• Reds and greens are often indistinguishable. This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the graphic or provide an additional means of obtaining the same information. Oftentimes the most appropriate way to do this is to provide an explanation in the text itself.
• Other colors may be indistinguishable. Same as above.

It's more of a contrast issue that specific colour issue in general though. Ensure your colours are of sufficient contrast to pass W3C WCAG guidelines. As I've paraphrased much of webaim here I might as well continue in the same vein:

From WebAims page on colour contrasts:

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

So in general: You can use colour for decoration and styling with almost no issues. But when it comes to representing data or other information then you can use colour provided it passes contrast ratios and it isn't just colour that you're using to get the information across.

Answer 2

Definitely avoid pairing red and green together on your website. It'll give low contrast between the two colors because color blind users will see them both as yellow. Why You Should Never Pair Green and Red Together on the Web