Status Symbol

The Status Symbol combines color and shape to create a standard and consistent way to indicate the status of a device or feature.

To ensure compliance with WCAG 2.0 contrast specifications for non-text content light themed status symbols must have a 1px black border set to 50% opacity.

Rules of Thumb

  • Use the standard set of Status Symbols provided.
  • Only use the provided colors for status.
  • Use the highest color possible if multiple statuses are consolidated. For example, if the statuses of underlying components are green, yellow, and red, the consolidated indicator is red.

Adding a title attribute to status elements can improve accessibility by offering additional information about the status when the user hovers over the element or when used in conjunction with a screen reader.

Place your cursor over any status symbol above to see an example.

  • For a detailed description of how Status Symbols are used within Monitoring Icons, see Icons and Symbols.
  • To learn more about the usage of status colors, see Status System.

Status Colors

Status colors are provided for both light and dark theme versions of Astro in Hex, RGB and CSS Custom Property values.

Dark Theme Status Colors

Hex RGB CSS Synonyms
Status Color: Critical #ff3838 255,56,56 --colorCritical Critical, alert, emergency, urgent
Status Color: Serious #ffb302 255,179,2 --colorSerious Serious, error, warning, needs attention
Status Color: Caution #fce83a 252,232,58 --colorCaution Caution, unstable, unsatisfactory
Status Color: Normal #56f000 86,240,0 --colorNormal Normal, on, ok, fine, go, satisfactory
Status Color: Standby #2dccff 45,204,255 --colorStandby Standby, available, enabled
Status Color: Off #9ea7ad 158,167,173 --colorOff Off, unavailable, disabled

Light Theme Status Colors

Hex RGB CSS Synonyms
Status Color: Critical #ff3838 255,56,56 --colorCritical Critical, alert, emergency, urgent
Status Color: Serious #ffb302 255,179,2 --colorSerious Serious, error, warning, needs attention
Status Color: Caution #fce83a 252,232,58 --colorCaution Caution, unstable, unsatisfactory
Status Color: Normal #56f000 86,240,0 --colorNormal Normal, on, ok, fine, go, satisfactory
Status Color: Standby #2dccff 45,204,255 --colorStandby Standby, available, enabled
Status Color: Off #9ea7ad 158,167,173 --colorOff Off, unavailable, disabled

In light theme user interfaces all symbols indicating status must include a 1 pixel border set to black with an opacity of 50% to meet WCAG 2.0 Contrast Compliance.