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.
Platforms like Android, iOS, and Windows have their own design guidelines. For instance, Material Design (by Google) has specific color recommendations for error states.
- 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.
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.
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:
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.