70

I was working on a table, with status icons. I was using colored dots (yellow/red/green color) to transmit the status (success, warning, danger)... Obviously, this is a problematic move if we think about colorblind people.

I was trying to find a reference on the shapes that transmit status but seems that is no standard...

These are 2 examples that I found:

enter image description here

enter image description here

Is that any conventions on this? Do you know if is any reference in W3C?

  • 25
    what are the scenarios you are designing for? most icon sets use ! X ✓ – Midas Dec 18 '17 at 12:02
  • 1
    @KenMohnkern here is a very useful website testing tool toptal.com/designers/colorfilter – Garik Dec 19 '17 at 4:06
  • 2
    Refer to blogs.sap.com/2017/08/09/… to see what the 3rd largest software company does. – user110351 Dec 19 '17 at 11:37
  • 20
    I'm by no means color blind, but I'm still confused by your icons. – Dmitry Grigoryev Dec 19 '17 at 11:44
  • 1
    Would it not be easier to simply use the words? It'd certainly seem less confusing to me. – jamesqf Dec 20 '17 at 3:13
23

This is a great question. I believe there aren't any conventions besides W3C's good contrast color.

According to the links below, the best way is adding some kind of visual cue, a shape or something that doesn't depend on the color alone. For example, if you want to make a "danger" status you could add a caution icon, think about the pedestrian signal for a physical reference.

https://www.w3.org/WAI/gettingstarted/tips/designing.html#ensure-that-interactive-elements-are-easy-to-identify

https://medium.com/civiqueso/creating-a-visually-accessible-map-c8831f952525

http://webcache.googleusercontent.com/search?q=cache:LjApKlqn4zsJ:www.jenunderwood.com/2014/09/04/visualcue/

162

Use icons, they communicate a lot more than colours alone. If you must use colours, simply colour the icons.

icons

  • 4
    This is the most common successful solution out there. Icon + color is a great way to provide additional, highly-scanable information for the average user while also accommodating the small minority who will not see any color contrast. Define a convention for how icons will be used consistently throughout your app and run with it. – plainclothes Dec 18 '17 at 18:47
  • 25
    As a color blind person I can say this work very well provided that the icons used have reasonable difference like the example above. – Jason Dec 19 '17 at 2:56
  • 6
    Also make sure they have labels/tooltips in case someone doesn't quite understand. – Lauraducky Dec 19 '17 at 22:33
  • 3
    Another deuteranopia here, I can easily differentiate red and green because of the icons (and the gaps :D). – Chay22 Dec 20 '17 at 17:55
  • I like icons, but if you shrink those down to 16px status icons, it would be sensible to have other shapes (triangle for "caution"), or rather just remove the circle... – Nick T Dec 22 '17 at 21:14
10

Basic shapes are going to be a difficult task, there really isn't a convention on these. As an example: Tristan's hexagon for stop is a circle for me.

The obvious answer is "use labels". But if you can't, you can do any of these:

  • use the contour bias logic to transmit the message. The sharpest, the more dangerous. So, circle: success ; square: warning; triangle: danger.
  • use a music player logic to transmit the message. So, triangle: success (using play as metaphor); square: danger (using stop as metaphor); 2 vertical rectangles: warning (using pause as a metaphor)enter image description here
  • don't use basic shapes and go for more recognizable iconography . There are some quite standardized icons for this, they even come on web-fonts. You can be more creative if you want, of course

Of course, you'd need to support these icons with a legend explaining what do they mean, but it shouldn't be a big deal

  • 3
    probably. Just explaining the cultural differences from TristanSchaaf's answer: for me, in my country, STOP sign is in a circle – Devin Dec 18 '17 at 20:51
  • 17
    Interesting how the play button points the "wrong" way. That might cause some confusion too... – Calimo Dec 19 '17 at 8:59
  • 3
    @Calimo A play button pointing opposite to the tape direction would be even more confusing. – Dmitry Grigoryev Dec 19 '17 at 11:41
  • 7
    @DmitryGrigoryev all of my tape players have the play icon the other way round - as it is with YouTube and other music / video /gaming apps. And the FF and RW icons are switched. Not sure why the image has these backwards. – Tim Dec 19 '17 at 11:58
  • 5
    @Tim Obviously, this particular model winds the tape from right to left, so the buttons also had to be reversed. – Dmitry Grigoryev Dec 19 '17 at 12:21
4

Whoa this is an unexpectedly intresting topic.

Im far from an expert on the topic but I gotta say the color+icon map featured in the medium article seems overly complex IMHO (and based on no empiric data other than my gut/taste).

I've always been intrested in how games offer color blind modes,usually available at settings, for at least, the most common types of colorblindness.

  • Tritanopia
  • Deuteranopia
  • Protanopia

I have no idea how well this solution works but Its the only "solution" I can thing of since, as you mention, theres no golden standard in icons/symbols use (https://www.nngroup.com/articles/icon-usability/).

-As for a funfact you can see how korean schools mark wrong answers with a tick and right answers with a circle-

  • One thing to consider re: game colourblindness mode is that in general with fames the items don't really have any other meaning beyond colour, so it's not detrimental to the experience to present them in different shades / contrasts (i.e. mostly it's things like 'match all of the blobs of the same colour' variety) whereas in this usecase the colours are representative of priority so that priority / severity needs to be displayed within the same item. – JonW Dec 18 '17 at 15:01
4

I haven't really searched or found any research on this. Maybe you could use the shape of traffic signs locally to you? Here we have some indication when it comes to traffic signs shape.

  • Round (white) with border (red) = Don't do this, ever
  • Round (blue) without border = You have to do this, always
  • Triangle with border = Watch out for
  • Square (blue) without border = A gentle reminder
  • Octagon = Stop
  • If those are British road signs then the convention is: Circle = direct order, Triangle = warning, Square = information. ...and the oddly specific hexagon for stop. – Andrew Martin Dec 18 '17 at 13:29
  • 4
    @AndrewMartin It's a hexagon so that in the snow if the sign is obscured you can tell that it is a stop sign, that's why it's the only hexagonal sign, as it is likely the most important order and a driver should always know if a sign is a stop sign – NickA Dec 18 '17 at 18:01
  • 7
    Stop signs are octogons (8 sides), not hexagons (6 sides), at least as far as a Google search tells me. British stop sign returns a number of octogonal signs (that are the same as in the US), some circular red and blue ones (which I believe are Do Not Enter rather than Stop), and absolutely nothing hexagonal. A search for British hexagonal sign still returns nothing hexagonal, Stop or otherwise. – KRyan Dec 18 '17 at 20:25
  • @KRyan the circular red and blue ones are no parking (slashed) or no stopping (crossed) (example with text for clarity) – Chris H Dec 19 '17 at 10:10
  • 6
    That's right - Vienna Convention specifies octagon, which is not used for any other sign. Stop is specifically intended to be distinguishable by shape alone: even if the sign face is obscured by snow, the meaning is unambiguous. – Toby Speight Dec 19 '17 at 10:13
3

The only conventions I know of are (1) don't use color alone to convey information (as you're pointing out) and (2) don't use icons alone either. (See "Icons Need a Text Label" in this article @ Nielsen/Norman.)

I don't know your specific situation, but we might extrapolate #2 to cover shapes. Therefore, you'll want to consider using text to convey your statuses. Adding a symbol or color is fine, but they won't be what provides the status information to all your users.

3

Two considerations here, all related to WCAG 2.0/1.4.1. The goal is to not rely on color or shape alone to convey meaning to a user or assistive device.

  1. If the symbols you currently use had some sort of icon within them, you would solve the issue regarding the reliance on color to convey meaning.
  2. If you used icons within symbols and provided a text equivalent ("Success," "Warning," "Error") you would assist users with colorblindness as well as those using a screen reader.
1

A good strategy is to reinforce a shape or position indicator with a brightness difference.

For example traffic lights use red, orange and green but people who cannot see the difference can still learn their positions top/middle/bottom. Similarly, one can learn by shape - an X symbol means 'close' and + means 'add' etc.

Once the truth is learned it gets associated to a color, even if the color is wrong its still possible for the person to identify the correct traffic lights by color, as long as the brightness is not similar.

Most green used in signage and almost all walk signals and traffic lights is a very light tint of green (high brightness / white content) and the reds tends to be a medium brightness or light shade. That's not by accident, even a person who sees in grey-scale would still be able to distinguish between the two.

Understanding that opens up more options for you because you can still for example use the hues people have issues with as long as one is light and the other dark.

0

The developpers of the game Borderlands had the same problem. For those who don't know the game, it's a RPG/FPS game set on a futuristic desert planet where monsters and ennemies drop loot which are shown with a colored beam depending on the quality.

To manage colorblindness, they

  • put a colorblindness settings where users select which case they have (protanopia, deuteranopia,..)
  • listed all the beam colors and put them in a Daltonize filter to see if they are still accessible
  • added a textual hint when hovering the object

If you want to test colors on a website or other, don't just put a color in Daltonize, take the whole context (pictures, text,...) to see if it is readable.

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.