Colour Blindness Design Change
After the release of our benchmarking Report Cards we received a few pieces of feedback from our clients saying that they could not determine their percentile rating because of colour blindness. Mainly distinguishing between the green and orange boxes for “Your Percentile” rating. See below:
So we decided to make a slight design change to these boxes so they would be easier to interpret regardless of what colours we used. See new design below:
About 1 in every 20 people suffer from a colour vision deficiency – something to consider when you are designing your web pages, and not only when you choose colours, but also when you decide to display information. Clearly it’s important to display information in a simple and easily understood format and not rely too heavily to certain colours to convey meaning.
Here is a cool little online tool which I stumbled upon. It allows you to check what your images or website(s) look like from the eyes of someone who is colour blind.
Copyright © 2000-2009
6:03 am
Wow, great online tool for color blindness. I would have never known! Checked my own site and it’s still viewable.
1:37 pm
I think the new design is flat-out more usable, regardless of the color sensitivity but it is very cool that you responded to people that had trouble viewing it. Not that it needs changing at all, but why didn’t you go with the variable-width bars *AND* color changes? That way the 19 of 20 that don’t have color senstivity could interpret the information in a qualitative way (all green, partly green/some orange) as well as a quantitative way (width of the bar). Thoughts?
2:41 pm
Thanks for the comments guys.
Steve: We thought about using colour coded bars but there were a couple reasons why we went with all green.
1. Design wise we just like how the green bars looked. It was cleaner and easier to read.
2. All green helped us elminate the use of the legend (it’s not in the screenshot above but it use to be at the bottom of the report card page).
3. The colour green is much more positive. In the case where you are part of the bottom third the orange may come off a bit harsh to some people. We don’t want to give users the message that they are doing a bad job but just where they stand compared to thosein their profession.
10:28 am
I have to agree with Steve- this is just a better way to present the info – even putting the color issue aside.
5:49 pm
A very good tool to see your web site through colorblind eyes at
http://colorfilter.wickline.org/
Information about images that are friendly to color blind people:
http://www.featurepics.com/Editorial/Images-friendly-color-blind-people.aspx