Toast Notification Variants
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.
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.
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.