How to Design for Color Blindness
Knowledge Share | Industry Savvy

How to Design for Color Blindness

on / by Robyn Collinge

Color blindness or color vision deficiency (CVD) affects around 1 in 12 men and 1 in 200 women worldwide. This means that for every 100 users that visit your website or app, up to 8 people could actually experience the content much differently that you’d expect. But how do you ensure that your user experience appeals equally to these visitors? We’re here to lend a helping hand. So, before you run to your design team in a panic, take a look at our roundup of top things to consider when designing a UX for color accessibility.

First up, what exactly is color blindness?

Most color blind people are able to see things just as clearly as the rest of the population, the difference is their inability to distinguish red, green, or blue light. The deficiency is the result of a mutation in the X-chromosome – meaning women are more likely to be carriers than sufferers – and it can manifest in 3 main ways.

The most common is red/green color blindness, where sufferers mix up all colors which have red or green as part of the whole color. Those affected by Protan color blindness are less sensitive to red light, whilst sufferers of Deuteranopia have the same problem with green. For example, a person with Protanopia will confuse blue and purple because they can’t recognize the red element of the color purple. The third type of color deficiency, Tritanopia, is the least common and refers to sufferers who struggle to distinguish blue or yellow light. The image below shows what the rainbow may look like to individuals with each of these forms of color blindness.

colorblind_01_03

So, how can I design for better color accessibility?

You might be thinking: “why should I bother designing for such a small group of users?” But generally, the elements that are favorable for colorblind users are actually considered to be good design practices in the wider sense. So if your site is well designed, it should already be accessible to all users.

Designing for accessibility doesn’t mean that the aesthetic integrity of your design needs to suffer. With that in mind, here are the top five elements you should be focusing on for a colorblind-friendly UX:

1. Use both colors and symbols

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.

Screen Shot 2017-01-17 at 16.18.50

Fun fact: Facebook’s logo and notorious blue color scheme was specifically chosen because Mark Zuckerberg is red-green color blind and sees blue the best.

2. Keep it minimal

You should limit the color palette you use for your website; the fewer colors you use in your design, the fewer instances there will be for confusion.

Screen Shot 2017-01-17 at 16.32.27

Not only is minimalistic design a timeless and aesthetically pleasing trend, it’s also useful when you’re designing for color accessibility.

3. Use patterns and textures to show contrast

Try to use different textures, as opposed to multiple colors, for elements that require emphasis. 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.

graphs_normal-large-opt

4. Be careful with contrasting colors and hues

Instead of relying on black and white as your only contrasting colors; try to use a range of clearly contrasting colors and hues in your design. For example, the game Word Feud uses four colors for its tiles that can be easily distinguished by those with or without color vision deficiency.

Screen Shot 2017-01-17 at 16.56.22 (2)

5. Avoid bad color combos

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. That being said, here’s a few color combinations to avoid because they’re a potential nightmare to color blind users:

  • Green & Red
  • Green & Brown
  • Blue & Purple
  • Green & Blue
  • Light Green & Yellow
  • Blue & Grey
  • Green & Grey
  • Green & Black

Side note: how do you know if you’re color blind?

Well… Some people go years without knowing they’re color blind as the effects can go relatively unnoticed unless someone else points them out. The image below is commonly used to test for color blindness – give it a go! (You can find a link to the full test at the bottom of this article.)

red-green-color-blind-isihara-test-rgthinkcreative

Still not sure?

  1. Ishihara Color Blindness Test: You can take the 38 plate based test and get feedback as well.
  2. Color Blind Check: an Android App created by Colorblindor where you can test whether you are color blind in ±60 seconds.
  3. Coblis: Color Blindness Simulator: here you can upload an image and take a look at what it’d look like through the eyes of people with different types of color blindness.
  4. Mobile Apps: here’s 3 Android and iOS apps specifically developed to help color blind users.

Conclusion

Generally, UX designers should create websites that are accessible and user-friendly to all. Unfortunately there isn’t a one-size-fits-all solution when designing for color blindness specifically, but there are a few essential UX design principles to bear in mind that will certainly help:

  1. Don’t only rely on color to convey a message
  2. Keep your color palette limited to 2 or 3 colors
  3. Use texture and patterns to show contrast
  4. Carefully select any contrasting colors and shades
  5. Avoid using bad color combinations

Which elements do you focus on when designing for color blindness? Please share your insights in the comments below or tweet us @usabilla!




UX Fundamentals: The Concepts, Process and Proving the Value

Article by

Robyn Collinge

As Usabilla's Copywriter, Robyn brings nice words together - like peanut butter, napping, and Sunday brunch.

Share your thoughts

  • Yes, and. Si , ed inoltre

    Thanks for sharing this article and advice for designing

  • Thanks for the great article, When doing a design from scratch, I will often look at pre-existing palettes for inspiration. I will also use an eyedropper tool on the organization’s logo for further inspiration. If the organization has a style guide that includes specific organizational colors, then that’s even better. check out my work here https://www.logoglaze.com/stationery/

  • The color blind have the inability to clearly distinguish between different colors, they tend to see colors in a limited range of hues. Because of this, the color blind have trouble with a lot of websites, signs, games or anything else involving color…. Thanks for sharing this article and advice

  • Lexi Pivovarova

    Why don’t we make more use of colors that people with poor color discrimination can see? We know they can see several shades of blue, gold, yellow, brown, plus black and white. Why not make those the dominant colors in a graphic that has to be used by everyone? But I find a lot of resistance to this among designers.

  • Falcon

    Just one thing I created a better quality image as I really hate low quality images it ruins the mood of the article. Here I created a high quality version:

    https://uploads.disquscdn.com/images/88aff3beab8996a483d981bf71f9306bc5f97b944ed572736a75b9d66e3b83bb.png

  • Falcon

    Just one thing I created a better quality image as I really hate low quality images it ruins the mood of the article. Here I created a high quality version: https://uploads.disquscdn.com/images/a359306042c36b856facb5c4ed4784be3946c77394dba73601a2ce294c3a66bf.png

  • I am a colorblind web developer. I just look at hex values and use services like adobe kuler so my colors are not to horrible :p It hasn’t gotten in my way in terms of getting new clients!

Pin It on Pinterest