6

Perhaps, for users with Red-Green color blindness, the colors below are OK b/c the user can differentiate (I think) between read and light green. And for Red/Dark-Green they could easily tell one is very low (<50%) and the other is 100%. That's what I see with the color blindness simulator.

In the charge below there are basically 4 ranges (<50:=Red, 50-90%=orange, 90-100% : light green, 100%: dark green.

enter image description here

FYI, Red-Green color blindness is by far the most common And there is a color blindness simulator online.

  • 1
    Clay, you can use colorbrewer tool to select right colors. It has colorblind safe filter. – Alexey Kolchenko Jan 29 '14 at 17:25
8

I'm not sure you can achieve this with any specific set of colours - because there are a wide range of different ailments grouped under the term "colour blind".

No single scale that is based solely on hue is going to suit everyone - make sure you have variations in brightness as a minimum, and I'd recommend texture as well.

Here's a mockup, based on your original image:

Sample using colour and texture

Background:

Most people have three different colour receptors (Cones) in their eyes - red, green, blue.

The most common forms of colour blindness stem from a defect in one of these, where perception of that particular frequency is deficient in some way (lowest/highest perceptible level, distinction of different brightness levels etc).

Rarely, people may have only one or two kinds of cone, resulting in bichromatic or monochromatic vision.

Interestingly, a very small percentage of women have four kinds of cone - there are actually two kinds of green cone in the general population, and some women have both. These women have a greater perception of colour than usual, for example seeing up to 12 colour bands in a rainbow instead of the usual 7.

Disclaimer: I'm not an expert in this area, just a software developer who is yellow-green colour-blind who used to work for a data visualization company.

  • Your mockup certainly helps distinguish the bars. But the way I understand the question, the OP wanted a gradient which suggests an ordering from poorest to best performance, something which is easily achieved with a color bridge for people with full color perception. I don't see such an order in your mockup, do you know of a technique to introduce it? – Rumi P. Jan 27 '14 at 8:53
  • I don't read the OP as requesting a gradient - but I used traffic light style colours in my mockup on purpose. – Bevan Jan 27 '14 at 23:57
4

I think you already answered it in your question title. Instead of just colors, you need to apply the performance measurement as a label as well. So Poor, OK, Good, and Great become labels that enhance your chart.

You could place them by the percentage, below the bars, inside the bars; heck, you could place them on the y-axis with lines going across the x-axis that represent visual indicators of what each performance level range is.

This makes it so the colors don't really matter and you can pick the color you feel best represents each performance level.


UPDATE

Something else I was thinking about was that you could actually make all of the bars a dark color while making the graph background colors the red, yellow/orange, and green based on their levels of 0-50, 51-89, 90-100. To make it even more user friendly you could include text labels on the left x-axis that are the 50, 90, and 100 lines; on the right x-axis you could include text labels that describe the color areas/performance levels of Poor, OK, Good, and Great; and then inside the dark bars, you can include a light colored text label that indicates the actual score.

I went ahead and created an example of what I mean:

chart example

  • I do include what the performance is as text and as a %. Just didn't include it here. – Clay Nichols Jan 29 '14 at 15:09
  • @ClayNichols - I was thinking about something and made an update to my answer. Tell me what you think! – Code Maverick Jan 29 '14 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.