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.


...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.

  • Thanks for your input. I agree with the fact that it doesn't matter all that much for decoration but does for product-breaking elements such as status colours on data(red, orange, green). – SlaKrop Apr 9 '14 at 8:56
  • @SlaKrop: Exactly. Colour can be used as an enhancement to the information. But colour itself isn't the information. – JonW Apr 9 '14 at 9:53
  • I'm confused, are you suggesting that websites should be blind friendly? Sounds like something the browser should be responsible for. – Gusdor Apr 9 '14 at 12:18
  • 1
    @Gusdor: Well just build using agreed web standards. Screenreaders don't need any special treatment, just follow w3c standards and screenreaders should just read them accordingly. There is also the Web Contents Accessibility Guidelines for more accessibility-specific advice. But in general; follow standards and mark up your content correctly. – JonW Apr 9 '14 at 12:57
  • 2
    @DavidMulder: Screenreaders are also used to navigate sites, not just read them. For instance pressing H to jump from header to header. Just reading out everything in a linear fashion is not what users really want. (When you visually read a site do you read everything? Logo, navigation item etc on every page? No, you jump to where you actually want to start reading. Same with visually-impaired users with screenreaders). I'd be surprised if new systems that just read everything are that popular. – JonW Apr 9 '14 at 13:25

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

  • 4
    Hello, @hardma. Welcome to UX! This answer is in danger of being deleted. To salvage it, please go into that link and pull out some quotes to make this a complete answer that is independent of the link. Many links become broken and render answers useless. – Code Maverick Apr 9 '14 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.