Here’s a quote from Josef Albers:
In visual perception a colour is almost never seen as it really is[…] This fact makes colour the most relative medium in art.Josef Albers, Interaction of Color, 1963
Albers was a German abstract painter and teacher, and published a very famous course on colour theory in 1963. Colour is very relative — not just in the way that it appears differently across different devices due to screen quality and colour management, but it can also be seen differently by different people — something we really need to be more mindful of when designing.
What is colour blindness?
Colour blindness very rarely means that you can’t see any colour at all, or that people see things in greyscale. It’s actually a decreased ability to see colour, or a decreased ability to tell colours apart from one another.
How does it happen?
Inside the typical human retina, there are two types of receptor cells — rods and cones. Rods are the cells that allow us to see dark and light, and shape and movement. Cones are the cells that allow us to perceive colour. There are three types of cones, each responsible for absorbing blue, red, and green wavelengths in the spectrum.
Problems with colour vision occur when one or more of these types of cones are defective or absent entirely, and these problems can either be inherited through genetics, or acquired through trauma, exposure to ultraviolet light, degeneration with age, an effect of diabetes, or other factors.
Colour blindness is a sex-linked trait and it’s much more common in men than in women. The most common type of colour blindness is called deuteranomaly which occurs in 7% of males, but only 0.5% of females. That’s a pretty significant portion of the population if you really stop and think about it — we can’t ignore this demographic.
What does it look like?
People with the most common types of colour blindness, like protanopia and deuteranopia, have difficulty discriminating between red and green hues. There are also forms of colour blindness like tritanopia, which affects perception of blue and yellow hues. Below, you can see what a colour wheel might look like to these different people.
What can we do?
Here are some things you can do to make your websites and apps more accessible to people with all types of colour blindness.
Include colour names and show examples
One of the most common annoyances I’ve heard from people who are colour-blind is that they often have difficulty purchasing clothing and they will sometimes need to ask another person for a second opinion on what the colour of the clothing might actually be. While it’s easier to shop online than in a physical store, there are still accessibility issues to consider on shopping websites.
Let’s say you’ve got a website that sells T-shirts. If you only show a photo of the shirt, it may be impossible for a person to tell what colour the shirt really is. For clarification, be sure to reference the name of the colour in the description of the product.
United Pixelworkers does a great job of following this rule. The St. John’s T-shirt has a quirky palette inspired by the unofficial pink, white and green Newfoundland flag, and I can imagine many people not liking it.
Another common problem occurs when a colour filter has been added to a product search. Here’s an example from a clothing website with unlabelled colour swatches, and how that might look to someone with deuteranopia-type colour blindness.
The colour search filter below, from the H&M website, is much better since it uses names instead.
At first glance, Urban Outfitters also uses unlabelled colour swatches on product pages (below), but on closer inspection, the colour name is displayed on hover. This isn’t an ideal solution, because although it’ll work on a desktop browser, it won’t work on a touchscreen device where hovering isn’t an option.
Using overly fancy colour names, like the ones you might find labelling high-end interior paint can be just as confusing as not using a colour name at all. Names like grape instead of purple don’t really give the viewer any useful information about what the colour actually is on a colour wheel. Is grape supposed to be purple, or could it refer to red grapes or even green? Stick with hue names as much as possible.
Avoid colour-specific instructions
When designing forms, avoid labelling required fields only with coloured text. It’s safer to use a symbol cue like the asterisk which is colour-independent.
A similar example would be directing a user to click a green button to purchase a product. Label your buttons clearly and reference them in the site copy by function, not colour, to avoid confusion.
Don’t rely on colour coding
Designing accessible maps and infographics can be much more challenging.
Don’t rely on colour coding alone — try to use a combination of colour and texture or pattern, along with precise labels, and reflect this in the key or legend. Combine a blue background with a crosshatched pattern, or a pink background with a stippled dot — your users will always have two pieces of information to work with.
The map of the London subway system is an iconic image not just in London, but around the world. Unfortunately, it contains some colours that are indistinguishable from each other to a person with a vision problem. This is true not only for the London underground, but also for any other wayfinding system that relies on colour coding as the only key in a legend.
There are printable versions of the map available online in black and white, using patterns and shades of black and grey that are distinguishable, but the point is that there would be no need for such a map if it were designed with accessibility in mind from the beginning. And, if you’re a person who has a physical disability as well as a vision problem, the “Step-Free” guide map which shows stations is based on the original coloured map.
Provide alternatives and customization
While it’s best to consider these issues and design your app to be accessible by default, sometimes this might not be possible. Providing alternative styles or allowing users to edit their own colours is a feature to keep in mind.
The developers of the game Faster Than Light created an alternate colour-blind mode and asked for public feedback to make sure that it passed the test. Not much needed to be done, but you can see they added stripes to the red zones and changed some outlines to blue.
iChat is also a good example. Although by default it uses coloured bubbles to indicate a user’s status (available for chat, away or idle, or busy), included in the preferences is a “User Shapes to Indicate Status” option, which changes the shape of the standard circles to green circles, yellow triangles and red squares.
Pay attention to contrast
Colours that are similar in value but different in hue may be easy to distinguish between for a user with good vision, but a person who suffers from colour blindness may not be able to tell them apart at all. Proofing your work in greyscale is a quick way to tell if there’s enough contrast between the most important information in your design.
Check with a simulator
There are many tools out there for simulating different types of colour blindness, and it’s worth checking your design to catch any potential problems up front.
One is called Sim Daltonism and it’s available for Mac OS X. It’ll show a pop-up preview next to your cursor and you can choose which type of colour blindness you want to test from a drop-down menu.
You can also proof for the two most common types of colour blindness right in Photoshop or Illustrator (CS4 and later) while you’re designing.
The colour contrast check tool from designer and developer Jonathan Snook gives you the option to enter a colour code for a background, and a colour code for text, and it’ll tell you if the colour contrast ratio meets the Web Content Accessibility Guidelines 2.0. You can use the built-in sliders to adjust your colours until they meet the compliant contrast ratios. This is a great tool to test your palette before going live.
For live websites, you can use the accessibility tool called WAVE, which also has a contrast checker. It’s important to keep in mind, though, that while WAVE can identify contrast errors in text, other things can slip through, so a site that passes the test does not automatically mean it’s accessible in reality.
For example, the contrast checker here doesn’t notice that our red link in the introduction isn’t underlined, and therefore could blend into the surrounding paragraph text.
I know that once I started getting into the habit of checking my work in a simulator, I became more mindful of any potential problem areas and it was easier to avoid them up front. It’s also made me question everything I see around me and it sends red flags off in my head if I think it’s a serious colour blindness fail. Understanding that colour is relative in the planning stages and following these tips will help us make more accessible design for all.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
04/12/2012
I have strong protanomaly. This means I struggle to see red. Imagine if you turn down the red channel in Photoshop: reds turn grey or black; brown and yellow turn green; purple goes blue and pink becomes grey.
Despite this, I find that design suggestions catering for colour blind people are often over-stated. I rarely come across an issue on the web where my colour-blindess causes a problem.
That said you have done a brilliant job in identifying some the often overlooked areas. Put simply, problems only arise in two circumstances:
# when I need to know what the colour actually is
# when I need to spot a difference between two colours
The first – colour labelling – crops up often when trying to buy clothes. It is very useful to know if I’m about to buy a pink t-shirt I thought was grey.
The second usually crops up when things are marked red and I am required to distinguish them from the black. I hate that. Similarly applies to charts and maps, but rarely. Ironically red is rarely a problem – the biggest issue is telling apart orange/green and yellow/green.
It’s also worth noting that, while you need to provide a method other than colour to distinguish things such as links, that other method can very often be context. For a list of links (eg. nav) may often look like a list of links, and may even be labelled as such, so I don’t need to know what colour they are to know what they do.
Thanks again for pointing out and illustrating the bits of design which do need attention – particularly that problems can often be overcome using words.
Vote Helpful or Unhelpful
04/12/2012
Very good article. WCAG 2.0 has specific guidance for non-underlined links. Because color is the only mechanism used to identify the link, the guidelines require that the link have a 3:1 contrast difference from the surrounding non-link text, and that the link become underlined (or have some other non-color designator) on both mouse hover and keyboard focus.
WAVE currently only checks contrast issues between foreground text and background. The example you use clearly passes (the maroon text has sufficient contrast to the background). But this does make me think that we could add logic to test the 3:1 text to text contrast ratio for non-underlined links, as well as flag lack of hover/focus styles. Your example is only around 1.9:1 (maroon text to black text).
Vote Helpful or Unhelpful
10/12/2012
“much better since it uses names instead” – no, that just gives it a different set of benefits and drawbacks.
It would be better if it used names as well as colors.
Vote Helpful or Unhelpful
04/12/2012
Color Oracle is a Mac app that lets you simulate (and save screenshots) of anything on your screen and works extremely well. You can browse entire pages/apps, use native programs, etc.
http://colororacle.org/
Vote Helpful or Unhelpful
04/12/2012
Thank you for this great article.
I use CCA, i think it is a great tool as you can check contrast ratio and some type of colour blindness in one, and it is available for mac and for windows.
Another very useful tool is Lea Verou’s contrast ratio analyser, it works with semi-transparent backgrounds too.
http://www.paciellogroup.com/resources/contrastAnalyser
http://leaverou.github.com/contrast-ratio/
Vote Helpful or Unhelpful
04/12/2012
Geri,
I really enjoyed reading this article – will pass it on :) It’s always good to be reminded about the importance of using colour, shape and text for better accessibility of information.
One tool I found useful in addition to the ones you mentioned: http://www.checkmycolours.com/
Thanks again :)
Vote Helpful or Unhelpful
04/12/2012
Bruno: Absolutely, and thanks for asking!
Richard: Thanks for the feedback! I’ve spoken to a few folks who are colour blind and of course, many people have varying degrees of it. Love your comments on how a lack of words are one of the more problematic areas.
Vote Helpful or Unhelpful
04/12/2012
I like the idea of sorting colours for tshirt shops by text, but I’ve come across cases where there’s 8 different kinds of green or blue and clicking becomes a guessing game. You need to keep your undisabled customers happy as well.
I’d like to point out that the example picture for colour-specific instructions would probably work fine for any sort of colourblindness, as the black of the regular text is easy to tell apart from the red text. Even if you can’t be sure it’s red text, it’s the only text that looks different from black. If you’d use more colors, it would be harder to tell things apart. That said, the asterix is indeed a better solution.
Vote Helpful or Unhelpful
04/12/2012
Thanks for raising awareness! Being one of those visually impaired I ended up writing a small Mac App called “ColorBlind” to help identify what’s on the screen when colour accessibility is not how it should be. It’s available on the Mac App Store.
Vote Helpful or Unhelpful
19/12/2012
Fascinating stuff and some very useful tools. Thanks Geri!
Vote Helpful or Unhelpful
04/12/2012
Great great great. I have been relying on color-coding in my design work for years, didn’t even consider how accessible my work has been for color-blindness. Thanks for bringing this to light!
Vote Helpful or Unhelpful
04/12/2012
this is one of few good uses of my “color blindness”, Im quite certain that I wont design anything that will render unusable to users with visual impairment :).
Vote Helpful or Unhelpful
06/12/2012
Coding with screen-readers and such in mind is often brought up and drilled in our minds, but I don’t see color accessibility mentioned much. And when it is, that’s just it, it’s mentioned. Thanks for giving this a deserving discussion! I’ll be looking at things differently now.
Vote Helpful or Unhelpful
04/12/2012
I can’t find the actual website for this so some dudes blog post will have to do, but this looks like an interesting way of tackling colour issues – http://www.andrewkeir.com/colour-for-the-colour-blind/
Vote Helpful or Unhelpful
07/12/2012
Hey Geri,
Great job on the article. Patterns are definitely a big help when color is the main reliance -especially trying to get home on the el train.
Tom van Beveren runs a great site jam packed with goodies that help to benefit the grayscale zombies.
http://wearecolorblind.com
Vote Helpful or Unhelpful
05/12/2012
My favourite colour contrast analysing tool is the <a href=“https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/”>Firefox extension</a> from Juicy Studio.
Vote Helpful or Unhelpful
04/12/2012
Well done Geri, really well researched and nicely presented article.
I’ll be referring to this a lot, thanks
Vote Helpful or Unhelpful
04/12/2012
I was not much aware of this “color” issue in web design. A very good read for me.
I specially like the easy solution with multiple color display, given in ecommerce sites; will be helpful for other sites too.
Vote Helpful or Unhelpful
04/12/2012
Thanks for this article !
You might like http://www.dasplankton.de/ContrastA/ to select colours that are accessible. ;)
Vote Helpful or Unhelpful
04/12/2012
Excellent article, I was convinced that the sites have to be highly contrasted. Thanks to you I realize that this is not enough. The simulator for Mac is an indispensable tool and very educational.
Small note: Even Google Images not use labels when you have to choose a color.
Vote Helpful or Unhelpful
04/12/2012
I feel like I have been waiting for this for years. In fact, I have! I tried my darnedest to write a good article about how to design for colour blind people but I simply did not know enough colour blind people to bounce questions off of. The bits about contrast in a grey-scale conversion seemed obvious but the bits about providing the name of a colour is something I never would have thought of on my own. For doing your homework, you get an A+.
Vote Helpful or Unhelpful
04/12/2012
Brilliant! I need to do a few slides on accessibility for a presentation at work later this week and your post is the best I’ve seen on colour accessibility. Can I quote you and borrow your colour wheel picture? All with due credit and reference back here of course!
Vote Helpful or Unhelpful
04/12/2012
Great article that sums up a lot about this topic too many web designers and developers ignore!
Vote Helpful or Unhelpful
07/12/2012
Nice article, but can you practice what you preach and check the colors of your own site.
I have a cataract so I have trouble discerning foreground and background colors.
You have quite a lot of ‘grey on grey’ (some things are practically invisible to me), also the colour you use for your links is also a problem.
If I could I would attach screen shots from my contrast checking tool (Colour Contrast Analyser version1.2 from the IE WAI toolbar) that show the issue.
Vote Helpful or Unhelpful
07/12/2012
Absolutely essential reading for any designer/dev. Nice writeup.
The irony is if you run 24 Ways through Wave you get the following message:
“UH OH! WAVE HAS DETECTED 24 ACCESSIBILITY ERRORS”
I’m not bitchin’, it just made me chuckle, that’s all.
Vote Helpful or Unhelpful
04/12/2012
This is one of the most useful articles I’ve read in a while. Very good job! I just tweeted and bookmarked it! Thank you, Geri.
Vote Helpful or Unhelpful
Impress us