19

I'm designing page that has an alerts panel in relation to healthcare. I'm using a pale red to convey that action needs to be taken immediately, orange to show that something is due soon and green to show that it is up to date and no action needs to be taken.

Originally, I had small icons (circle with exclamation, triangle with exclamation and green tick) on the corner of the tiles to further convey the status of the tile. Tiles with icons

However, as there are quite a few tiles within the section, I removed the icons and it looks cleaner.

Tiles without icons

I'm considering accessibility here. Is the traffic light system sufficient to communicate warnings and alerts, or should we include an icon for users who might have color blindness?

7
  • 1
    People will probably have varying opinions on this, but - for very urgent items, there is also the possibility of having an alert icon slowly pulsate. Just enough to ensure the user's eyes will be drawn to it, without being annoying. Keep in mind if there is a user manual or some similar documentation, animations cannot be conveyed on a static page, and also there may be technical limitations with implementing animations if not using a standard that supports it such as CSS.
    – Mentalist
    May 25, 2023 at 4:35
  • In addition, if there will be user profiles associated with different people logging in to use the system, adding the ability to customize one's accessibility options (such as enlargement or appearance of icons) is a possibility to consider. But then, introducing more variables means having to test for more configuration cases when designing layouts, etc. Also, the person to implement this sort of user-specific functionality would likely be a back-end developer. So depending on the structure of your team, it may not be something you can easily request of them. Still, it's an idea.
    – Mentalist
    May 25, 2023 at 4:45
  • Finally, you can study how Apple (known for generally being good at accessibility) has implemented notification badges: In iOS, if there is a notification, it always appears in the upper right of an app icon. It is simply a number enclosed in a rounded red border (circular, but stretching into a pill shape to accommodate more digits). Since red is the only color ever used, it doesn't rely on color for distinction. And since it is only ever rounded (never triangular, etc), it doesn't rely on shape for distinction. It's either present there or it's not, and it only means one thing: notification.
    – Mentalist
    May 25, 2023 at 4:56
  • 16
    Colour alone is never good enough to convey information. In cases where there’s no additional way to convey information, it should be clearly stated that the display requires good colour vision to be usable.
    – breversa
    May 25, 2023 at 11:29
  • 2
    One thing to consider: Is it very very obvious that pale red isn't just the normal colour of the icon? In your example, it very much does not look out of place but it should. Looking too pretty and seamless along with everything else isn't the goal here
    – DKNguyen
    May 25, 2023 at 15:58

8 Answers 8

60

No, it is not enough. This is how your image looks for people with achromatopsia (grayscale vision)

enter image description here

This with Blue-Weak Tritanomaly

enter image description here

This with Blue-Blind Tritanopia

enter image description here

As you can see, there are evident issues with relying solely on color.

Additionally, it is important to consider accessibility in general, even though this may not be specific to your situation. Certain lighting conditions, such as the use of Sodium Vapor Lamps (commonly found in city or road lighting, emitting yellowish light), can cause temporary color blindness. This effect is more pronounced in printed materials like books, signage, and other non-light emitting surfaces, as well as low contrast light-emitting devices. In such cases, regardless of whether you have color blindness or not, you will perceive only black and yellow. (See photo below).

enter image description here

The same will happen with Mercury Vapor Lamps (although in the blueish-green range) and some Xenon Arc Lamps which are mainly used in... medicine and laboratories!

So, what to do?

I'd suggest the following for your particular problem and in general for the future:

  • Utilize means other than colour to convey the information (appropriate labels (preferably) and/or icons).
  • Verify using a color blindness simulator. For this answer, I used https://www.color-blindness.com/coblis-color-blindness-simulator/. There is also this one, which you can get in a handy browser extension form.
  • Design in black and white or grayscale to see how everything looks even without color.
  • In your particular case, since you're already using images, be cautious with icons alone as they might create more friction than information.
14
  • 5
    In addition there's cultural aspects, e.g. my Latin American boss does not attribute the "traffic lights" to warning and immediate danger even though she can see all the colours. May 25, 2023 at 9:35
  • 4
    What you mention regarding color blindness is correct but you cite the cases with less impact on the population: Tritanopia (blue-yellow color blindness) is rare. Some sources estimate that 0.008% are affected by this type of color vision deficiency. The most common is Deuteranopia which affects mainly red/greens
    – Danielillo
    May 25, 2023 at 12:47
  • 4
    @Danielillo i cited the ones that are similar to the OP color choices, for other types of color blindness there's a noticeable difference so there's no pont to mention them
    – Devin
    May 25, 2023 at 14:04
  • 2
    Yellow-colored lighting throws off color perception because there is only yellow light to reflect, regardless of what of wavelengths the object is capable of reflecting. That's not a so much of an issue for a backlit display like a computer or phone screen, though, as it emits its own light and doesn't rely on reflected light. I expect a computer screen should look similar under any color light or even in total darkness. May 25, 2023 at 16:35
  • 3
    @NuclearHoagie, yellow-colored lighting also throws off color perception because your vision system tries to compensate. Even with a backlit display, your color perception will be distorted in a strongly-colored environment.
    – Mark
    May 25, 2023 at 23:27
23

Color alone is never sufficient to convey information because:

  • Roughly 5% of the world population has some form of color vision deficiency, either dichromacy (only two types of working cone cells), anomalous trichromacy (three types of working cone cells, but one variety does not work the same as in a normal trichromat) or monochromacy (much rarer than the other cases, either no cone cells, or only one variety of working cone cell). In other words, around 1 in 20 people using your app likely perceive color differently from how you do. This is the key point here, but the other points are still relevant.
  • Perceived color is dependent on viewing conditions. This is why the sRGB spec codifies viewing conditions in addition to display behavior. Low-pressure sodium vapor lamps are probably the most recognizable example of this (they make pretty much anything that is not itself a lightsource look a rather characteristic yellow color (about 589.3 nm wavelength, halfway between the sodium D-lines), but other lighting types have an impact as well (think of how some types of displays look really washed-out in bright light).
  • It is increasingly common for people to utilize post-processing on display outputs to shift the color temperature of the light emitted by the display based on time of day (usually called something like ‘Night Light’ or ‘Night Mode’ in system settings). This can easily involve a swing of at least 3000K in the color temperature, which is more than enough to distort perception of colors, especially differentiation of hues of red, yellow, and orange.
  • Even ignoring the above points, the meanings of colors vary by culture. In the Western world, red is typically associated with danger or basal emotions (anger, lust, passion, etc). In large parts of Asia however, including China and parts of India, it’s associated instead with happiness and good fortune.

This does not mean you can’t use color as one part of signaling some specific piece of information, just that you need more than color.

In your case, my first thought is to add textual labels marking the status of each item. A simple ‘Action Needed’/‘Due Soon’/‘OK’ label for each box should be more than sufficient for this, provided it follows other accessibility guidelines to ensure readability. Possibly also include an icon as another visual indicator (note how the icons you were using use shape as well as color as a differentiator).

1
  • 4
    Whenever you use colors, always preview a black and white version before publishing. My kids' school library had a sign "READ WESTMOUNT!" with the letters alternating in the school's colours, black and yellow, on a brick wall background. When a photo was printed in the black and white school newsletter, the black letters were the same colour as the red bricks, and the visible message was "RAWSMUT". May 27, 2023 at 1:29
19

The color alone is not sufficient as a distinguishing feature. The comparison to a traffic light is also not entirely correct. A traffic light has not only the three colors but also a very specific sequence of colors. So even color-blind people can distinguish the different meanings. In your example, however, this second recognition possibility is missing. Therefore, I would definitely work with a second color-independent distinction. This can be very good icons but also the shape, a movement, etc.

2
  • 6
    With movement, be aware that motion can also have accessibility issues. May 25, 2023 at 3:15
  • 3
    (@WesToleman) it also relies on the device/app running properly - I'm sure we've all seen animations hang. And it's harder - or more verbose - to document in a static help file/user manual/training notes
    – Chris H
    May 25, 2023 at 9:42
3

It is a misleading question because it is not about color, but about contrast.

Is colour alone enough to convey warning?

Yes, if these colors are strong enough to show a unique concept. In maximum saturation, with a simple use of color, states can be hinted at. Anyone can easily find concepts such as danger, alert, caution, ok, accepted and finished in the following range of colors, with a minimum margin of variation:

enter image description here

The same example using the same colors but desaturated totally changes the perception:

enter image description here

From which it is understood that the only way to demonstrate specific concepts with elements as subjective as color, is only achieved with maximum contrast.

But this is not the case of the example image of the question that presents two colors with a very low saturation before which the correct question would be:

Desaturated colors offer enough contrast to convey warning?

In this case, the answer is no, desaturated tones go through a color choice and can hardly carry such an extreme concept as alert or danger, so my recommendation would be to point to other resources but always based on CONTRAST.


On the other side, there's an added element. In the image there are two orange backgrounds, one with a black line graph and one with a light blue pictogram. Both oranges look different, the one on the right looks darker. This is for Simultaneous contrast which refers to the way in which two different colors affect each other. The theory is that one color can change how we perceive the tone and hue of another when the two are placed side by side.

enter image description here

6
  • 2
    "Anyone can easily"...that's simply not the case. Unless you can filter your users by visual acuity, any software product should plan for a large enough number of individuals that even unlikely things become near certainty. Even for someone with perfect color vision, the two examples on the far right of your high-contrast colors are distinguishable when next to each other but if I only got verbal training that the light blue means one thing and the dark blue means something else and then I see only one of those colors in isolation, there's a lot of ambiguity. May 26, 2023 at 14:41
  • ...with a minimum margin of variation... In any case, it's just an example to show high contrast, not a direct word to color statement.
    – Danielillo
    May 26, 2023 at 14:57
  • 1
    If you have a nurses seeing 200 patients 5x a day per patient and they're making only 0.01% errors from your design then you're having a patient error every ten days. With software, the statistics are never in your favor. May 26, 2023 at 16:05
  • I insist, it's not a design, I never show finished designs in my answers. It's only a scheme to be able to explain what the contrast is about. But I understand your disapproval if you can only see my schematics as final and approved designs.
    – Danielillo
    May 26, 2023 at 16:26
  • 3
    @Danielillo The objection I have is the main answer in your answer, that color alone can be sufficient for differentiation. Color alone is not sufficient, not for a generic audience. Including a texture or identifiable logo/shape or text identifier is bare minimum. May 26, 2023 at 20:44
1

No, color is not enough. But I'd be more general.

As software professionals, we're often careful not to be redundant in our systems (except as needed for reliability) because it is too easy for redundancies to get out of sync.

But when it comes to communicating to humans, redundancy is a feature. Even for users who are not colorblind, communicating something with color, symbol, and text is always better than using any one alone.

And if you were going to use only one, color is the worst option. A symbol would be better, and text would be better than a symbol. But don't use only one.

0

No, colour is never enough. You should find some other way to convey the meanings.

You can use icons, like in the first example, but you don't need the green tick since it isn't a warning, and items without an icon can be understood as normal.

You can also use text labels, like "Needs Action" or "Due Soon". However, this may be too verbose for you.

What I didn't like in your first example was the icons themselves. Ideally they should be consistent, and put inside the container so they don't break the grid.

-1

As many others have mentioned, color alone is not sufficient because it is not perceived the same way by everyone. I'll go a step further and say that even if everyone did perceive color the exact same way, it's still not a good choice here because the user still has to "read" the entire display somewhat (that is, look across all the icons and process which color each one is).

For this application, it might be better to use the entire background of the button to indicate status. In normal cases, the button has a thin green border around the outside and the background is transparent. When something is critically wrong, the entire button background turns solid red like in your image. A warning condition could be an orange background that fades in and out. There's enough contrast between a big solid block and a thin empty rim that you can take one glance at the screen and determine if there were any error states. The flashing warning indicator plays off of the eye's tendency to be attracted to motion. A system like this would also be easier to read from a distance (e.g., by a nurse looking in from the hallway), where with a purely color-based system to you have to play the is-that-red-or-is-that-orange game.

2
  • 2
    Critically wrong should be the one with an animation, not warning. May 27, 2023 at 1:07
  • 1
    I can see it either way. My first thought was for "warning" to be the most attention-grabbing, so you could correct the problem before it went critical.
    – bta
    May 27, 2023 at 3:56
-2

Few male designers would even ask this question, as they would mostly have friends (plural) with some type of color blindness, as it affects roughly 20% of male persons, in some form or another. (I know only one woman with it, but many men.) This is why it's a relatively well-accepted principle that color alone is never sufficient to convey anything important. Pity us, and accommodate us, please.

If the resulting busy-ness might prove distracting, you might consider having a setting, in which users can select to use color alone or some combination of color and another indicator, though, as others have mentioned, there are circumstances ("night mode", perhaps) when color perception is difficult even on a screen, even for those not color-blind.

1
  • 3
    20%???? World percentage: Deuteranopia (green) 1.27%, Protanomaly (red) 1.08%, Protanopia (red) 1.01%, Tritanomaly (blue) 0.02%
    – Danielillo
    May 25, 2023 at 22:24

Your Answer

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

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