1

It seems like the standard RED, YELLOW, GREEN and BLUE colours are used in notification schemes/styles in the most popular development frameworks like Material.io and Bootstrap.

Of course, colours shouldn't be used by itself as a UI design element, but the standardization of the RED and GREEN combination in a colour palette reduces the effectiveness of other design elements to distinguish between different statuses in the notification scheme/style.

Are there examples of design systems or development frameworks where the notification scheme/style takes into consideration of the common issues:

  • Red and green colour blindness (and other forms of colour blindness)
  • A low contrast (i.e. bright or feint) yellow
  • simple and clear iconography to complement the notification colour scheme
Improve this question

1 Answer 1

Reset to default
1

Most of the popular design systems out there has basic accessibility built in from the component level which covers the common issues you mentioned like color, contrast and meaningful iconography.

But I find this article: https://inclusive-components.design/notifications/ written by Heydon Pickering has in depth details about accessibility like using WAI ARIA live regions etc.

Some other examples worth mentioning:

Polaris by Shopify: https://polaris.shopify.com/components/feedback-indicators/banner#navigation

Morningstar: http://designsystem.morningstar.com/components/alerts.html?tab=accessibility

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.