Ensuring that UX designs are as accessible as possible is a great passion of mine, and I was lucky to get to work on this with the Principal Design System. Below, showcases the work I did with color, as well the audit I completed with my team with the merger of Principal with RobustWealth.
Problem Definition: How might we redefine the usability guidelines of the brand color palette to promote the most accessible experience in all company designs?
My work with color accessibility was, at first, only related to the improvement of the design system for RobustWealth, also known as Design Bank. The goal was to most effectively outline best practices for using the company color palette. Check out the project brief here.
I first started with finding a new shade of orange for the palette that met WCAG AA accessibility guidelines, following a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
These two images show the updated color palette with the newly defined orange color variations for the "Alert" colors, as well as the assets they are considered accessible for when paired with a white background.
Contrast Ratios: My next step was to find the contrast ratio of each pair of colors in the palette and identify if it is considered accessible for small text, large text, and UI components such as graphics and icons. All ratios reference WCAG AA guidelines.
I designed a few different ways to display the results of my test so that it was most easily understood by other designers when using the Design Bank. Below, the left side shows my first version of it and the right shows the second and final one.
Switching Gears: About halfway through the work on accessibility with Design Bank, we faced a merger and my team quickly shifted gears to audit both Design Bank and the Principal Design System to create one cohesive design system.
My team divided the various components between the two design systems between us and compiled all of the information into a general template, which I created to provide a structured way to present the information to the Principal team. My focus was on Color, Buttons, Dividers, Navigation, Toggles, and Tooltips.
Conclusion: Auditing the two different design systems and listening to the findings of my team helped me learn both the design and development needs of both companies, so that we could most easily determine how to build a design system that was even better in the long run.
Specifically relating to color accessibility, the team decided to implement my format for outlining color guidelines based on the contrast ratio of color pairings. It can be seen live on the Principal Design System website under the “Background fills and text colors,” heading.
Original format for Design Bank.
Implemented format within Principal Design System.