Alert colour for system errors

Question

Currently, I'm using amber alert messages for system errors, for a web application I'm designing. The PM came back asking if red alerts would be more suitable for these system errors.

My assumption is that red error alerts are used if immediate action is required from the user for example. An amber alert seems more suitable for a system error but I would like to clarify if this is correct.

Thanks

Answer 1

To elaborate on Michael's answer, color on its own has no inherent meaning.

• Red can mean something medical like the red cross, or it can be a warning prohibiting you from going further (stop sign, no-entry sign)
• A yellow diamond can be a warning, or tell you "everything's fine, you've got right of way".
• A blue circle with a symbol in it can be purely informational (eg the i-signage or a WC sign), or can signify something mandatory (go only straight, personal protective equipment required beyond this point).

My assumption is that red error alerts are used if immediate action is required from the user for example. An amber alert seems more suitable for a system error but I would like to clarify if this is correct.

This does run counter to what Windows is doing, and likely is why the PM objected to it. Windows traditionally uses

• red circle with white X = error
• yellow triangle with black ! = warning
• blue circle with white i = information/notification

(an in-depth explanation can be found in the Microsoft win32-Apps UX guide)

But: There's no guarantee the Windows way is the right way of doing things for you, as a web app has different requirements to an OS. Your system may be different to it, but as long as it's internally consistent and somewhat logical, that's fine.

Consistency is achieved the easiest if you were able to plan ahead and know what kinds of messages you're likely to be showing in the foreseeable future, otherwise you may be painting yourself in a corner.

Answer 2

When you use colours in your design system (or style guide), it is important to take into account the impact of designating a colour for a specific purpose as it will most definitely have flow on effects. Not only will you create an association for the user when the same colour is used in other contexts, it will also impact on the meaning of other colours used for related purposes.

So the issue is not whether the colour can be used or not, but if the use of this colour then has impact on the rest of the visual language of the user interface.

From the question it is hard to determine whether the issue comes from personal preferences or subject views about the meaning of the colours, but in any case you should do a careful analysis of how it will impact the existing design, and if will impact future changes you make to the alert and notification design patterns and components.

Answer 3

I usually use the alert colors like this:

• Red: Error, something went wrong, action did not complete.
• Amber: Warning, action did or will complete, but there's something you should take note of;
• Green: All good, everything is completed as it should;

It's been working pretty well so far. Just remember not to use color as the only indicator and make sure to be consistent.

---

Now if you want to go into the details, there are multiple things you could consider:

Web Content Accessibility Guidelines (WCAG):

WCAG has standards on contrast ratios to ensure text and images of text are readable for those with visual impairments.

It's important to note that WCAG doesn't specify which colors to use for errors or warnings. Instead, it emphasizes ensuring a sufficient contrast ratio so that users can distinguish text from its background.

They also emphasize not using color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This is because not everyone will perceive or distinguish colors in the same way.

Platform-specific Guidelines:

Platforms like Android, iOS, and Windows have their own design guidelines. For instance, Material Design (by Google) has specific color recommendations for error states.

Common Practices:

• Red: Traditionally associated with errors, stop, or caution. Red grabs attention quickly and is almost universally used to indicate problems or critical issues.
• Yellow, Orange or Amber: Typically used for warnings or to draw attention to something that needs the user's attention but isn't necessarily an error. It's like a "proceed with caution" signal.
• Green: Often associated with success, go, or safe to proceed.
• Blue: Commonly used for informational messages.

Cultural Considerations:

While red is a color of warning or error in many cultures, it might be associated with good luck in others (like in China). Therefore, when designing for a global audience, consider the cultural implications of color choices.

Colorblindness and Accessibility:

It's crucial to ensure that interfaces are usable by those with color vision deficiencies. Using tools that simulate colorblindness can help designers choose color palettes that are distinguishable by all users.

Also, incorporating icons, text cues, or patterns alongside color can help convey meaning.

Industry-specific standards:

Some industries might have their own standards or conventions for color use.

Here are some of the standards that are already in use all around us, so it could be a good idea to take those into cosideration too:

• ISO 01.070 - Colour Coding;
• ISO 01.080.10 - Safety colours in Public Information scope;
• OSHA and ANSI:

Danger – Danger signs are only used when there is an immediate risk to the life and health of an employee. OSHA requires these signs to be red or predominantly red. Any lettering or symbols must be a contrasting color to ensure maximum visibility and bring attention to the hazard.

Warning – The warning category is for when there is a risk, but it is not as severe or immediate as when danger is used. The safety color associated with warning is orange or predominantly orange. As with the red, any lettering or symbols must be a contrasting color.

Caution – This category is for alerting people to a potential risk. Caution signs must use the color yellow.

Biological Hazards – Biohazard dangers have gotten their own category because of the unique risks they present. When issuing a safety alert about biohazards, the color to use is fluorescent orange or an orange-red color.

Answer 4

As your question seems to be about categories of alerts rather than colours, I'm going to focus on the appropriateness of the bifurcation of system and user errors.

I'm not sure what you are counting as system and user errors, but I tend to agree with your PM. From my experience, even if a user can't act on the system error the alert should communicate to them that something has gone wrong and that it is blocking their progress. System errors like 400, 500 errors tend to block user progress in this way.

From this perspective, I don't see any value in having a separate alert category for an error raised by the system and one that the user caused or can take action on.

Answer 5

From my experience, here's how I would expect the error-color association:

• Green: Success; task has been finished
• Amber: Warning; task may not finish
• Red: Error; task can't be finished
• Blue: Information; doesn't impact the process