Toast Notification Variants

Design

Problem

The existing styling for toast notifications outlined by the design system was not accessible in a new implementation we were considering. The background color did not have sufficient contrast against the page background to meet WCAG AA success criteria. The lack of contrast also made the text on the toast notification difficult to discern from the text on the main page.

This contrast issue can create problems for people with dyslexia and other cognitive impairments. It also made it difficult for anyone using the application to notice when the toast notification had appeared, since the motion alone did not easily draw a user's attention.

Examples of many different toast notifications all displaying the same generic welcome message. Each has a different combination of colors on the button, text, and background

Approach

I utilized colors from within our design system to mock up multiple variants that met WCAG accessibility standards in the new implementation. To do this, I tested various combinations from our brand palatte - as well as shades of each - against both the WebAIM contrast checker and the guidelines for text and user interface components to ensure the new iterations met AA standards

I presented each of these proposed variants mocked up in context to the design and development teams for critique, and made additional revisions with the feedback I received.

Once these revisions were complete and the final designs approved, I created detailed documentation for the developers outlining the new CSS styles for the component.

Outcome

The final approved version was successfully adopted into the design system and implemented into the application.

Skills & Tools Used

  • Sketch - Used to rapidly create multiple iterations of the toast notification and documentation of the final version.
  • Microsoft Teams - Used to facilitate discussion around and gather feedback about the different iterations of the toast designs.
  • Jira - Used to document work progress and communication with Scrum team.
Back to the Project List