Status Colors

Status Colors

Status colors indicate various system statuses, such as error messages or informational dialogs.

Status colors should not be the sole way statuses are communicated to users. However, the selected colors are common colors when communicating system conditions. Status colors only add visual meaning. This is not communicated to users with assistive technologies, such as screen readers. Write your content to clearly communicate along with the chosen Status color.

Using Status Colors

The guidelines below may not cover all situations and use cases in your digital product. Use them as guides for deciding which color is semantically appropriate. Be careful not to use Status Colors as brand colors or influence colors as this will dilute their meaning.

Success

The Success color indicates an action is successful or an event is beneficial.

• Often used in validated form field indications
• Lighter and darker variations used for background and text colors in Success Alerts and Success Toasts
• Might be to used to signal a data submission button when all required or validated fields are satisfactory.

Note: A successful action can include the successful deletion of an item or file.

Warning

The Warning color indicates unintended, but not dangerous, effects of actions.

• Often used to display destructive actions from a list if it’s relatively easy to reinsert items in the list.
• Can be used to signal data actions authorized users can affect which could affect non-authorized users.
• Could be used to indicate waiting states in processes or multi-step forms.
• Should be used to inform the user of system-wide errors preventing some, if not all, features.
• Lighter and darker variations used for background and text colors in Warning Alerts.

Danger

The Danger colors indicates that an action will cause critical effects such as loss of data, errors, or other hard-to-reverse effects.

• Should be used to inform the user of data deletions
• Could be used to inform the user that opting out of certain application features could prohibit future functionality
• Should be used to inform the user of system-wide errors which totally prevent system use
• Lighter and darker variations used for background and text colors in Danger Alerts and Danger Toasts

Info

The Info color indicates informative or helpful information.

• Could be used to inform the user of new features
• Should be used to inform the user of in-process system-wide changes which will improve their experience
• Lighter and darker variations used for background and text colors in Info Alerts

Status Color Variations

Success Status Colors

Warning Status Colors

Danger Status Colors

Info Status Colors

Status Color Class List

The Status Colors are implemented as background colors and as text colors. The classes needed to apply these colors are listed here.

Resources

• Bootstrap Documentation - Color