User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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:
Is that any conventions on this? Do you know if is any reference in W3C?
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://medium.com/civiqueso/creating-a-visually-accessible-map-c8831f952525
Use icons, they communicate a lot more than colours alone. If you must use colours, simply colour the icons.
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:
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
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.
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-
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.
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.
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.
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.
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.
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
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.
