Problem: (some of) the current notifications / banners / inline messages aren’t WCAG compliant
Solution: create & implement on-brand WCAG compliant designs for each of the elements

Actions:

1. List all relevant elements (done)
2. Create new designs (done)
3. Implement designs

Component: Notifications

1. Informative
2. Success
3. Warning
4. Error (alert)

Analysis
There are four types of notifications (as mentioned above) that are commonly used across products, the fonts used in them should have enough contrast (4.5:1 minimum requirement) to comply with accessibility standards and same goes with UI elements (3:1).

We currently have these notifications but they don’t fully comply with accessibility and have different variations of these which are not being used consistently across the product, some can be found on github and some are not there.

Proposed solution
Notifications:

• Notifications are unified = consistency → we don’t have two different versions for each type
• Colours are now accessible
• black font
• light shade of colour in the background
• icon and border comply with accessibility standards for UI element
• if notification has a subject, it goes in bold → hierarchy

Inline messages:

• Colours are now accessible
• Dark grey font
• light shade of grey in the background