My tweet brought several responses from UI designers keen to understand where I was coming from and asking me for some hints as to how to make their designs better for the colour challenged.
Colour blindness is alas sometimes forgotten and to be fair it is more of a pain in the arse than a real handicap and designing your site for people with more profound problems is MUCH more important, however it is deeply deeply irritating when you land on some sites or get emails that the designer or sender at the other end thinks are "dead cool" and "trendy" but for the colour blind are at best confusing or at worst just un-usable.
I discovered I was almost totally colour blind in my late teens early 20's and I can see a little blue and a little green and no red at all. Why had I not noticed you may ask well we learn colour through association with known "things". The sky is blue, the grass green and milk white, we then learn to associate that colour with other things. For colour blind people they can recognise the colour from the context it is in. Confusion only arises when confronted with something unkonow and the CB person has to guess by the tonal value what colour it might be.
The eye has two light sensitive cells, Rods and Cones. Rods are mainly clustered around the edge of the visual field and cones in the middle. Rods see tones and Cones see the colour. Colour sightedness is basically a problem that is usually genetic and usually found on the Y chromosome making it much more common in men.The problem manifests itself with the Cones they are either malformed, don't work or just arent there at all. I was born with only 11% of the Cones I should have so whilst I can can see some colour I am mostly monchromatic. The up side is that I have more Rods which are smaller than cones which means I have extremely good visual accuity :-) always an up side eh?
About 1 in 10 Europeans mainly men have some level of two colour colour blindness, about
1 in 1000 are like me totally or very nearly totally colour blind.
It is worthy remembering that someone who is "Blue" colour blind does not see nothing when the something is Blue. We can still see something but just not in way you see it. It will be a gray that matches the tonal value of the actual colour.
I paint and I love painting and I am asked "How can you being colour blind paint in colour?" Well paint manufacturers helpfully put paint in tubes with a label on it that says "Blue" or "Red" and comes with a Colour Index for example French Ultramarine Blue has PB 29 (77007), so contains Pigment Blue 29 and is color 77007. Simple when you know how ;-). Also my paintings are inclined to be a collection of colours with white added to lighten, so you will see a lot of one colour tonally adjusted to make sense to me.
Similarly I am often asked .. "How do you know which is the Red Stop light?" well that's easy it usually has STOP written on it as well as being red and more obviously it is always the light at the top of a traffic signal ;-) and they are tonally very different. On the other hand put me infront of the old style electrical cables (Brown Red and Green) I just cannot cope. Thankfully the new wiring cables are a dark one, a light one and a stripy one and I have stopped blowing up toasters.
Now I am not saying that you should go deliberately out of your way to make your
UI colour-blind friendly, please make your site as glorious as you can for the 90+%
of visitors that can see all the colours. However keep me and my kindred in the back of
your mind and offer us some help if we need it.
Some things to remember and or do ...
- Don't use ONLY color to indicate something specific on your page.
There is nothing quite so fecking annoying as getting an error message that
says "Please correct the entries highlighted in red" when you can't see red.
and because it is a "dark" hue it looks just like black. Use color and a * or >
as well to indicate the problem. -
Similarly having a RED alert box with White writing does not to a Red colour blind person
convey the same "Danger" context as it would to a colour visioned person. Add a nice Icon
to help with the context.
- Desaturate your images to see if they still have impact to grey scale.
Beware this is NOT how most color blind people see the images and will need to be
tweaked slightly giving less contrast (make it lighter) as the viewer may not see the tones
in the same way you do... but it will give you a quick and easy way to tell if the image is still useful particularly if you have text or navigation objects on top of the image.
- Try to avoid placing red and green together. (RG colour blindness is the most common)
Especially on items like navigation buttons, the text can actually blend into the
background, making it very hard to read.. here (CTRL+A is your friend if you are colour blind)
- Try and avoid using two colours that are of similar tonal value - and this is not as easy as it sounds for example this to color sighted people is fine and easy to discern. The outer colour is
RGB(112,161,207) the inner colour is RGB(97,179,122)
- Gray Scale this image and you get the idea of how this looks like to me
-
It is always better to have a dark colour on a light background, you can reverse this but it isn't quite so good.
Also be aware that it is more difficult for everyone to distinguish
dark (low value) and/or saturated colors
(e.g., a 16-color palette blue or red against black),
and extremely light pastels,
particularly in low or bright light conditions.
This is doubly true for the colorblind.
- If you can, find a color blind friend or relative to look at your site.
If you're not color blind it's often very difficult to tell what they
might have trouble with. The challenge is as can be seen above that if they can't see
something, they might not even know they aren't seeing it.
- http://colorfilter.wickline.org/ is a useful place to go to test web pages
it isn't brilliant.. but it does show you what the various types of CB people
may see when they visit your site. Try your favourite business sites and you will be surprised how different they look to the colour blind.
