5

We want to implement an indicator to display 'good' 'average' or 'bad'.

So someone came up with a traffic light image. (green circle for 'good' yellow circle for 'average' and a red circle for 'bad')

Will color-blind users understand this indicator?

And if not would you suggest any other representation?

1
  • If you go with the traffic light metaphor, ensure that you pick a proper shade of green. The actual green that appears in a traffic light is quite distinct from the red to red-green colorblind individuals. Sadly, most user implementations utilize a grass-green, which is quite indeterminate from the red. You can reduce confusion by picking a bluish green.
    – Tony
    Nov 14, 2012 at 17:52

5 Answers 5

11

It all depends on context. Color-blind car drivers have little trouble with the traffic lights they encounter in real life. But when you move the traffic light metaphor to a different domain, people may have more trouble recognizing the symbol and understanding its meaning without the color information.

For example: enter image description here in greyscale becomes enter image description here

In my opinion a traffic light isn't the best possible metaphor for a quality indicator. I associate a red light with a stop sign, with danger or obstruction, and not with bad quality. A green light signals safety, yellow is a warning.

Alternatives for good/average/bad indicators:

  • bar graphs (completely filled = 100% okay)
  • star ratings (more stars = better)
  • sad/neutral/happy faces (if it's not about objective quality, but rather subjective satisfaction)
  • thumbs up/down (not culturally safe though)

These all have their own pros and cons (some of which have been discussed here before), and there may be many other possibilities that I didn't mention.

2
  • 2
    +1 for "...a traffic light isn't the best possible metaphor..."
    – eBeth
    Sep 3, 2011 at 14:58
  • 1
    I've seen plenty of books which use a non-color traffic-light signal. The key is to ensure that all the circles are light enough to show up clearly (unlike the red above); it may also be helpful to make the red circle somewhat larger.
    – supercat
    May 13, 2014 at 13:55
7

It's claimed that users know that the top of a stop sign is "red" or stop, and the bottom is go, but I wouldn't depend on this association; top-bad/bottom-good is an awkward association, red:bad::green:good works much better. There's lots of discussion on this issue, this site claims colorblind users still go by color at the stop light, but as they see "different" colors and the mapping of colors is so different this wouldn't apply in your case. I would avoid the metaphor altogether.

The multimodal approach is a great way to deal with colorblindness; if you change the color and the shape, position, ect of an element they're more clearly distinct. To keep with the traffic metaphor, maybe a stop sign (red octagon) could mean "bad," a yield sign (yellow triangle) could mean "okay," but traffic signs aren't always standard.

I would stick to more idiomatic symbols: Green plus/check for good, Red X/slashed out circle for bad. "Okay" is a trickier one. Maybe -/=/+? Space permitting, a label is often great. Don't forget alt text for vision impaired users too.

(Note: for the purpose of this example I assume you to mean "colorblind" as in red/green colorblind, which covers the large majority of colorblind users.)

4
  • 1
    Just a note: "colorblind" covers a wide range from several types and grades of deficiencies to actual no color visions at all - and yes, the latter do have to orient themselves by position of the light.
    – peterchen
    Sep 2, 2011 at 14:37
  • I meant to specify "red-green" colorblind, the large majority of colorblind users, thanks for the clairifcation
    – Ben Brocka
    Sep 2, 2011 at 14:38
  • I like your answer, what do you think of this question on MSO?
    – GUI Junkie
    Sep 3, 2011 at 15:08
  • I had thought of bringing up that issue myself but I assumed it had been touched upon; Unfortunate to see it's been "accepted" as "okay," I find the SO and MSO "accepted" indications the worst of all SE sites...
    – Ben Brocka
    Sep 4, 2011 at 0:51
6

This should be very helpful - it's a tool that lets you simulate the appearance of colours for people with different color vision.

http://www.iamcal.com/toys/colors/

description: 1 in 12 people have some sort of color deficiency. When you're designing for the web, this means that 1 in 12 people might not be able to see your site. That's alot of people. This tool helps you simulate the appearance of our site's colors for people with different color visions. Select text and background colors from the palette below, then choose a color vision mode.

To test your website, try this:

http://colorfilter.wickline.org/

Enter the URL for the web site you want to test, and select a color blindness type. The tool will then show you the web site like the color blind user will see it. (credit to Jørn E. Angeltveit for posting it in response to What are good resources for testing UI design for color-blind users?)

Best practice? WCAG 2.0 is your friend: have a text alternative that includes information that is conveyed by color differences in the image.

more:

http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-without-color

1
3

At least in the US, traffic lights

Usually, the red light contains some orange in its hue, and the green light contains some blue, to provide some support for people with red-green color blindness

If you want to use a traffic-symbol, there's no reason you can't adjust the colors (using the links in other answers) to something visually distinct for color-blind users.

You could also change the shape of the colored lenses, say square for red, triangular for green - although depending on size/resolution, that may not be very clear. Or, possibly a thick border around the currently active lens.

0

A quick and dirty colorblind test can be done in Photoshop.

Create an image or open an image in Photoshop. Change the color mode to "Lab Color" Turn off the "Lab" channel You can then use the "Channels" palette to switch between grayscale ("Lightness" channel only), blue/yellow colorblind ("Lightness" and "a" channels), and red/green colorblind ("Lightness" and "b" channels).

Like all colorblind checkers, these are only an approximation of what a person with colorblindness sees.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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