25

I'm looking at Google's web-based user interface for managing an enterprise's Chrome devices.

Each device's status is represented by a colored circle (see images below).

I would have thought that this would be violating accessibility principles - users suffering from color-blindness would not be able to distinguish the 'good' state from the 'bad' or 'unknown' states.

Or is there something special about these colors that the majority of color-blind people can somehow tell the difference?

The actual colors used are simply the named web colors 'red' and 'green'.

The reason I'm asking is that, on my team, we are considering incorporating the same design elements into our web application, and I'm worried that this would be unusable by a noticeable percentage of the public.

Screen shot of Chrome device management showing green/grey circles

Screen shot of Chrome device management showing red/green circles

Improve this question
7
  • Same can be used with some alphabet inside the circle,which might solve both
    – basavraj
    Nov 26, 2015 at 6:11
  • FWIW, it looks to me like the green (0.5) is much darker than the red (1.0). It's possible that's sufficient for color-blind users to be able to distinguish between them. (Which isn't to say that I disagree with any of the answers below!)
    – user1118321
    Nov 26, 2015 at 20:49
  • 3
    @user1118321 I am looking at the second picture and I don't know which is the green one and which is the red one. The top circle appears to be lighter but I don't know if the colors are meant to be light-ish green & dark red or light red (more like orange) & dark green. They literally couldn't have chosen worse colors for me, and I have only a mild deuteranomaly.
    – Vercas
    Nov 27, 2015 at 2:48
  • @Vercas Fair enough! Always good to test with real-world users.
    – user1118321
    Nov 27, 2015 at 5:22
  • 1
    You say this is from Google? Perhaps they can tell whether you're colour blind and adjust the design accordingly :-P
    – user30381
    Nov 27, 2015 at 8:15

5 Answers 5

Reset to default
33

As the other answers said, the colours themselves may pose a problem if the hues aren't distinguishable easily. The clearest solution to this is to combine the colours with a shape, so full-vision people can still scan quickly by colour but stopping to look for a second will also easily show the idea. Something like:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The best solution I think would be geometric shapes (possible with icons in the middle). Green circle for good, red cross for bad, grey triangle for unsure. I would have included these in the mockup but I'm a little hampered by the software here!

Improve this answer
6
  • 4
    yes, this. Colour is only an accessibility violation if you are relying SOLELY on colour. If it is just a bit of extra help for the majority and the colour blind minority can still get by without any trouble then its OK.
    – the other one
    Nov 26, 2015 at 8:50
  • If the neat row of circles fits the aesthetic better, you can get the best of both with a green circle with white arrow, red circle with white tick, blue circle with white question mark, etc. Also, avoid very dark greens: many people with red-green colour-blindness (the most common type) can often estimate red from green since red appears much darker (red has a lower relative luminosity).
    – user56reinstatemonica8
    Nov 26, 2015 at 13:16
  • 4
    Very nice solution, but maybe a green tick, rather than a green circle? That would be more obviously two different ways of indicating "yes" to me (green and a tick), whereas you only have one with a circle ..
    – Algy Taylor
    Nov 26, 2015 at 14:44
  • 1
    Definitely! I just stuck with a circle as I was trying to find shapes that could easily be told apart at a cursory glance. I'd recommend trying a bunch of different solutions as each userbase may differ in what they prefer to see.
    – A. Sim
    Nov 27, 2015 at 2:50
  • 1
    the trouble with a tick is that in East Asia it can mean pretty much the same as X, incorrect. School-work in Japanese schools is marked with circles for right, triangles for half right, and ticks for wrong. A circle is a fairly culturally neutral way to mean OK.
    – the other one
    Nov 27, 2015 at 16:07
9

Deuteranopia, or red-green colorblindness, is one of the most common forms of colorblindness. There are many other forms of colorblindness that effect perception of red and green as well.

Without access to the Google interface you referred to, I presume that there is nothing special about these colors that would provide additional assistance to colorblind users. Colorblind users will most likely see a differentiation of hue between the dots, but the meaning conveyed by the red and green colors is most likely lost in these users.

Even if the color meaning is revealed if the user hovers over one of the dots, this solution is not as visible to all users as just using a textual system status label in addition to or in place of the dots.

Improve this answer
8

WCAG guideline 1.4.1 (Level A):

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

So it is a clear violation of accessibility guidelines and you'll do well by providing additional visual cue that isn't colour-based.

My iPhone is always on greyscale mode and I can never tell whether the shuffle is on or off on Spotify - it is super annoying and outright unjust. These things do matter for those with visual impairments, few as they may be. 9% of males have some sort of colour-blindness.

Improve this answer
12
  • 3
    "it is ... outright unjust" <-- Really? Not sure if I would lump this with concerns of injustice. And why is your iPhone in greyscale mode?
    – plainclothes
    Nov 26, 2015 at 6:57
  • 3
    @plainclothes "...Why is your iPhone in greyscale mode": That sounds suspiciously like "well it's your fault as a user for not looking at the screen properly" rather than a more inclusive accessibility concern.
    – JonW ♦
    Nov 26, 2015 at 9:48
  • 1
    @plainclothes are you suggesting that discriminating against the impaired is just? And as for the greyscale mode, have you ever heard of Empathic Design?
    – Izhaki
    Nov 26, 2015 at 9:56
  • 1
    @A.L, much as vaseline on glasses simulates cataracts.
    – Izhaki
    Nov 26, 2015 at 11:00
  • 2
    @A.L, sorry for the misunderstanding, I wasn't sarcastic. Greyscale mode does what it says on the tin - the whole iPhone display becomes greyscale so no more colours (like B&W TV), which simulates monochromacy. On desktops, Chrome plugins like See help to simulate other visual impairments. These are just some of the tools used to accessibility-check designs.
    – Izhaki
    Nov 26, 2015 at 11:10
4

In addition to what others said, here's a quick fix:

enter image description here

Use a combination of blue and orange. These can be discerned by the 3 most common cases.

Improve this answer
2
  • 1
    I can't make heads or tails of that chart. What's it saying?
    – DA01
    Nov 30, 2015 at 20:22
  • 1
    @DA01 the columns are regular vision and simulations of protanopia, deuteranopia, tritanopia (lacking red, green, or blue cones, respectively). The rows (1,2,3,4,5,6,7,8 ) are different colors in the computer. All the stuff on the right hand side is kind of superfluous.
    – PixelSnader
    Dec 1, 2015 at 22:14
0

It's better to only show an icon when there is a problem. Users will interpret the lack of an alert icon to mean that item is OK.

A sea of green or icons that mean "OK" will make the problems harder to find because you are requiring the reader to differentiate between two possibilities for each line versus scanning the screen for a single icon.

If the item is OK, have no icon. Only flag those with a problem; this will reduce clutter, make it easier to find the problems and eliminate the question of what icons or colors to use -- use whatever icon you use for an alert (exclamation point in a triangle, for example).

Improve this answer

Your Answer

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

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