Status icons
Usage
Problems
» When red and green are used on the same page, a color blind person might not see the difference
» Isolated icons, without others nearby for comparison, might not seem to have a clear color. A green icon might seem red or orange to a color blind person.
» Icons with the same color might look different from each other on different background colors. The surrounding background also makes it harder to compare the icons
» Icons with very little difference in shape are also confusing. A color blind user can’t rely on color and has to closely look to spot the difference in shape
Examples
MSN Messenger 9
MSN Messenger 9 uses colored icons on the contact list to display the state (available, away, busy, offline) of the contacts. Color blind people have trouble recognizing and telling these colors apart, making it nearly impossible to tell the state of the contact.
Only when a chat screen with a contact is open, the status is revealed. This takes unnecessarily long and makes checking if someone is available a very painful experience.
Cool-Prices.nl (source »)
Cool-Prices, a Dutch computer web-shop, features great use of icons to display the current stock status of a product.
On the overview pages, the site uses five icons for the different statuses. When the user hovers over the icon, a pop-up with the current stock amount (in this case 1 available) and an legend explaining the different icons is shown.
A lot of other webshops only use colors like red, green and orange to communicate stock. By using different shapes and a big difference between the red and green colors used, this website is easily accessible to the color blind. They can rely on color and shape, an ideal combination, making the website less confusing.
Read the full example »
Solutions
Solution 1: Use graphic icons describing the action or status
Graphic icons describing the actions or status of something help the color blind understand the icons, without having to rely on color alone. Using a red cross shaped icon provides more information than just a red square.
Solution 2: Use different shapes
Sometimes it’s not possible to describe an action or status with a graphic icon. The available space might be limited, or the action is too complex to describe. Using icons with different shapes, color blind can rely on shape, without having to rely on color. This solution usually requires a legend to be present, as the shape of the icons might not explain the function or status.
Solution 3: Provide a mouse-over explaining the icon
While one of the more technologically involved solutions, this leaves the chart intact but gives an mouse-over with extra information when needed. During the mouse-over, the legend gets matched to the part of the chart the user is hovering over at that moment. This can be a label in the chart with the name of the segment, lighting up the color in the chart and legend, or another way to clarify the link between the chart and the legend.
Solution 4: Use colors easy to distinguish
Sometimes it’s difficult to visually describe the status or action with a graphic icon. The available space might be too small, or the action is too complex to describe. Using very clear colors with good contrast helps immediately matching the legend to the chart. Most of all, try to avoid the high priority confusion colors. More information »
