Alert colors are really user-friendly to color-blind users?

Question

I have seen many alert boxes are differentiated using only colors, even bootstrap has given. Has this box been really user-friendly to color-blind users?

Answer 1

Quick Answer

In your case that color scheme is NOT safe for colorblind people. First of all don't forget that there are different types of color vision deficiency. Let's summarize why your image is not safe (to reproduce this just pick two different on-line color blindness simulators):

• Achromatopsia: they see only shades of gray then obviously all boxes have the same color, what's wrong with this color scheme is that yellow and green have a too similar brightness and they can easily be confused.
• Protanopia: green and red boxes will appear as shades of the same color.
• Deuteranopia: probably OK.
• Tritanopia: Almost OK, yellow and red will appear as shades of the same color.
• Protanomaly: OK.
• Deuteranomaly: OK.
• Tritanomaly: OK.
• Blue Cone Monochromacy: OK.

After you performed these basic tests you have to simulate different color profiles to be sure similar colors will not be confused (in this case protanopia is an excellent example). You may also need few different monitors (with different profiles and different quality, unless you're sure about your users' hardware setup.)

Do you want a real-wold example? Change the color of the “achievements” icon when it's highlighted (for users with Deuteranopia). Answer provide a simulation, please ALSO note the reddish color for the checked button under "Ask Question". Also note that if you're not colorblind you may think that simulated image is good enough because tones can be distinguished, however OP is saying that "...highlighted in green, it's still pretty close to the grey color in its inactive state".

General Discussion

As a general rule color should not be the only media used to convey information. In your example you also have text and it may be sufficient (however consider Andrew's suggestion about contrast). Images may help but they do not add much more than text unless you use images only for warning and errors, in this case variation from norma will be noted.

There are, however, cases where color is also used to catch user attention (for example an alarm on a dashboard). There are other techniques to catch attention (changes in font size/style and animations, for example.) Images need to be interpreted then they're not good for this, what an user will note is the change, not the image itself. For this reason I suggested to add images only for warnings and errors (if every box has a different image then important images will go unnoticed.) Tons of books have been written about this and this is little bit outside the scope of this question...

It's not easy to find a color scheme good for all kinds of deficiencies then what should be done is to carefully pick different shades to make colors easy to distinguish (and to avoid that green and red look the same as for protanopia). It's an hard task because the palette has to be nice also for people with a normal color vision.

In a critical environment what you may do is to do not accept these compromises and to provide different palettes. Note that for life-critical applications testing should be also performed with at least few colorblind people for the most common types of colorblindness, you must be sure that your user interface will not make human errors easier.

---

Some Theory

There are many books and on-line resources about this topic then please consider this just an quick overview.

Deuteranomaly (reduced sensitivity to green light) and protanomaly (reduced sensitivity to red light) are the most common (in this moment and AFAIK) types of color blindness. For many/most applications these are the basic tests you have to perform.

Achromatopsia, protanopia, deuteranopia and tritanopia (dichromatic color vision) are much more rare but they also affect more seriously how your user interface should look like. Major issues are caused by protanopia which may cause confusion between some gray shades with red and some green/blue shades with red/orange. Most critical confusion caused by deuteranopia is some red shades with green.

A quick sample from Color Universal Design (CUD) - How to make figures and presentations that are friendly to Colorblind people - by Masataka Okabe and Kei Ito (originally posted on What colors to choose for colorblind people?):

How to Test?

I see there is often a too simple approach to this problem then let me summarize how you should perform these tests. It's not always required a rigorous approach but for some applications it's useful and necessary then you'd better know. Read this cum grano salis and use what is more appropriate.

1) Pick an ICC color profile to simulate color blindness and perform some testing by yourself. Do this at least for the most common color blindness types.

2) Use some tool (there are also some good on-line resources) to simulate all the color blindness types for all relevant screens in your application. Perform a qualitative analysis to determine if color shades are still easy to distinguish and color blind users may be extra confused. Do not forget to also measure text contrast.

3) Repeat points 1 and 2 with different monitors because color profile may greatly vary from your color calibrated reference monitor. You may simulate this using color profiles but if possible I use few different cheap monitors (because also brightness and contrast will play a huge role.)

4) Repeat formal User Experience Testing using those color profiles. It does not need to be a full test and you should focus in users' reactivity (to alerts and to find elements on screen) and fatigue. Do this at least for the most common color blindness types. Again this test should be performed using at least two different monitors (one calibrated and one cheap.)

5) If possible (and your application has strict safety requirements) repeat User Experience Testing using few color blind people. This is important because there are different levels of color vision deficiency then a real test is necessary. Unfortunately hardly you can get a good sample then you may simply pick one person and perform a quick test to validate simulated results from point 4. I admit that for my personal projects I always used my father (light deuteranopia) for this...

Answer 2

You should consider checking any color palette options using an on-line simulator such as Coblis (http://www.color-blindness.com/coblis-color-blindness-simulator/), which shows you how images look simulating various color-blindness variations:

It is also generally accepted that to guard against this sort of issue, it can be wise to use shape, contrast, and/or icons to further differentiate options. You can hear an excellent story about this by Matt Desio from the Enterprise UX 2016 conference, in the Storytelling sessions (about 21:00 in this video):

https://www.youtube.com/watch?v=HCI5LnEnTCI

Answer 3

While important, colour-blindness is not necessarily relevant to this case.

If the alerts are positioned in such a way that they cannot be confused with anything else and different kinds of alerts are not distinguished by colour alone (signalling the alert type in text as in the examples for instance) then there shouldn't be a problem.

However, looking at the examples included in the question, I would say there may be a problem with colour contrast - the difference between the text (foreground) and background colours does not appear to be strong enough to pass accessibility tests. The blue and green fail AAA for small text while the yellow and red fail all except AA for large text.

Answer 4

Users with color blindness can distinguish different tones of one color and have more difficulties with distinguishing different colors. Red and green can look the same for users with color blindness. However, there are different types of color blindness.

Photoshop has an option to test an image for color blindness: Protanopia and Deuteranopia. I've tried both functions and it shows that your example is user friendly for color blindness.

Answer 5

I've always followed the rule of making sure that you have two indicators which distinguish something. In your case, you have color + text. This means that you have to make sure that the indicators (i.e. "warning") ALWAYS appear with the messages, even though you have color as a distinguisher.

The same goes for colored icons. You should never use the same icon and just change the color. Always change both the icon and the color for each item. A good example of this is a stoplight. Imagine if all the colors were on one line. It would be very difficult for certain people to tell what color the light was. Instead the position(shape) helps distinguish each color. So lit+off+off = red to someone who can't tell that the color of the top light is red.

Answer 6

You are not using colour alone to communicate meaning - you are using colour AND text.

So you only need to ensure that the foreground colour (the text and the close icon) and the background colour have enough visual contrast so that it is easy to read the text and click the close icon.

I checked the contrast levels of those Bootstrap alerts and these pass the WCAG2.0 contrast requirements.

So in summary, colour blindness is potentially a red herring in this case due to the text communicating its purpose and the close icon standing out from the background colour.

Obviously in other situations it is still very important to think about how your page will appear to someone with some form of colour blindness and using a colour blindness simulator is such a simple task to identify potential issues.

Answer 7

In general, encoding important information by color alone or even color and text is a bad idea.

Color perception varies with context. We can easily see the truth of that when we think about how hard it is to recognise color at night, even if we have better-than-average color perception in daylight.

And many people don't have good color perception. Red-green and blue-orange color confusion is pretty common, but some people don't perceive color at all. And some have congenital or age-related cataracts, which have the effect of making everything look more pale.

Moreover, some people go through life, or a significant part of it, unaware of their limited color perception. They get by because there aren't many situations where color is the sole differentiator. Switch the red and green lenses on a traffic light and there'd be a measurable increase in the number of road accidents at that intersection.

Hardly any road signs depend on color for that very reason. Shape--the most basic iconic feature-- is used instead, usually expressed in color but not by color. (I'd include examples, but I think they're probably sufficiently well-known already: triangle=warning, ring=(potential)error, rectangle=info).

The four example message boxes would convey their basic meaning (info, warning, error, and satisfaction) much more strongly by the use of standard signage icons.