Status Messages & Notifications

Status & Notifications often use color to differentiate against surrounding design elements. To increase a11y, supplement color with design elements such as icons, shape, patterns, stroke, etc.

Use a combination of design elements to call out status messages, so that it does not rely on color alone. This may include elements such as:

    • Strokes

    • Indicators

    • Patterns

    • Texture (such as gradients, or patterned fills)

    • Text

Note how color is supplemented with text, icons.

Provide Users ability to close notification, with adequate contrast and common user patterns. Include obvious screen transitions, such as darkened background.