For some reason recently, I have seen a number of posts aimed at web developers, pointing them to sites that will show them how a colourblind ( colour deficient if you prefer ) person will see their site. Now, let me let you into a little secret, it’s not about how I see your site; we don’t after all know how I will see your site compared to how you can see your site. We can only guess by use of algorithms that simulate the theory of how colourblind people are affected. We can’t even guaranty how two people with ‘normal’ colour vision see your site. I’m probably not coming to your site because it looks pretty.
The real issue is, how does a colourblind person experiences your site. And by experience all I mean is the functionality of it. I’ve lived with colourblindness for 43 years. I get by. The world is not a miserable looking place for me, devoid of pretty colours, it’s one where every now and then, someone has used colour to help someone else make a decision, and sometimes, their choice of colour stops me from being able to make that decision.
So imagine this… 10% of males are red-green colourblind ( other types of colourblindness are available). What two colours do you imagine might be bad to use together in order to allow a male to make a decision? Now if your site, or app makes the following statement, “press the green button to exit” you’ve failed the colourblind test. If you happen to have a red AND a green button, you need a slap to boot.
For the record, I drive, and I can happily use the red, green, amber traffic lights. The reason? I can see their position and I can tell the difference of when they are on or off. If you are using lights, and they are red and green, that’s a problem. I can’t play laser tag by the way. I can’t tell when a single LED is trying to tell me that something is wrong unless the state is on/off or on/flashing – not green, red, amber.
If you have a colour legend for a graph or diagram, I’m going to be in trouble unless you’be managed to find enough different colours to represent each of the elements. Not shades of green. Not reds and green. Let’s say I even manage to distinguish the colours on the diagram, by the time I look across the page to look at the legend, I will not be able to associate the colours on the legend to the colour I just looked at unless you have used light blue and dark red.
I present to you the London Tube map, I struggle to use it. But one small change would make the map work for me; it’s not changing the colours, it’s adding the name of the line, either at the end of the line, or on the line somewhere. Then I could just trace my finger along the line until I find the name I need to know. It will take me longer than you to work it out, but I don’t mind, I can live with that. I’m just happy that I can now use it to find my way around.
We don’t generally direct people to a building, give them wheelchairs and say, experience how someone in a wheelchair will experience your building. We generally know that if you have steps, or high things that need pressing, or thin paths and doors etc, your building is not wheelchair friendly.
So let’s not focus on what I see, but on how I use your site. If you can avoid using colour as a decision process, then do, if you can supplement it with something else that isn’t a coloor, that will help. That way you won’t need to overly worry about your choice of colours, and I won’t either.
Thanks for this. I’ve been color-blind for 50 years. Most traffic lights (in India) usually have a bluish addition to the green to make it easy to differentiate, btw, It’s not just websites, but real-life signs that also needs to stop penalizing people with the most common color-blindness. I am told you cannot get a pilots license if red-green colorblind.
I do see a lot of tech articles with legends in colors (language shootouts).
Recently, i tried out the ishihara test and found I failed ALL pages. Strangely, green is my favorite color, and i am totally fascinated with greenery.
Hope your submission to Hacker gets upvoted. Best wishes,
Not using colour alone to distinguish things has been a design tenet since long before the web existed — I remember learning it back in my first UI design classes back in the 80s. It is indeed scary how many supposedly professional designers ignore such things in favour of ‘coolness’.
I am working on an App at the moment that displays a lot of numeric information. One technique is uses is to use a colour gradient. I’m using red->orange->yellow->green for this because it makes at least some sense for the parameter.
Would it be helpful if I let the user select alternative gradients?
I could also display this particular parameter in another ways, although I am loath to do that as it takes away valuable space on the small device screen!
Being able to select colours is always helpful, however being a gradient it’s the steps between the colours that will hurt. For me, a change on an single RGB component of less than 64 is going to make no difference.
Your red and green are away from each other, but if I have to reference the information to another part of the screen, I am going to struggle with some of the reds and darker greens.
Yellow and light greens will merge into each other.
Feel free to send me a screenshot, and I can give you a better comment. webcontact@icemark.com
Thank you, Chris, I’ll almost certainly take you up on that thought email!