01 OVERVIEW
In the context of an accessibility audit for the developing mentorship platform for Sean’s Legacy, I took ownership over color and color contrast. I audited existing designs, created a consolidated color palette, and proposed solutions to commonly used design patterns. My efforts resulted in a more inclusive platform that meets WCAG 2.1* AA standards.
*W3C released WCAG 2.2 on October 5, 2023. The criteria for color and color contrast that appears here did not change.
02 PRODUCT BACKGROUND
SEAN’S LEGACY
Sean’s Legacy is nonprofit organization dedicated to supporting and uplifting LGBTQIA+ youth. They focus on suicide prevention by promoting inclusivity and providing educational resources.
PRODUCT
Sean’s Legacy entered into a partnership with Tech Fleet Professional Association in 2022 to create a mentorship platform that would pair LGBTQIA+ young adults with LGBTQIA+ mentors in their professional communities.
TIMELINE
The project outlined in this case study took place during Phase Three of the platform’s development - August 2023 through October 2023. The platform is expected to roll out in beta form in late 2024.
STRUCTURE
Following Agile methodology, Phase Three ran for ten weeks, covering four sprints. Each sprint initiated with a roadmapping session and concluded with a client presentation of the team’s progress.
TOOLS
03 THE TEAM
The Phase Three team was made up of project managers, product strategists, content strategists, UX researchers, developers, and UX designers. I was one of the ten UX designers within this larger, cross-functional team.
04 A11Y AUDIT RESULTS
Entering Phase Three with considerable design debt, our team opted to first tackle the standardization of our design system before delving into ideation. Conducting a team-wide accessibility audit, we aimed to enhance our platform's inclusivity by meeting WCAG 2.1 Level AA standards.
The team-wide accessibility audit unveiled various issues, from text alignment to icon sizing, with a surprising discovery during the color contrast evaluation.
Screenshot of the team-wide accessibility audit of existing Figma design files
I noticed that our design system relied heavily on the use of transparencies. Accessibility checker tools failed to flag many low contrast ratios in our designs because they were reading transparencies at their full opacity.
Having pinpointed the issue, I took the lead in finding and implementing a solution.
05 COLOR AND COLOR CONTRAST STANDARDS
In addressing color and color contrast issues, I considered two key user groups: users with color blindness, who struggle to differentiate specific colors, and users with low vision, who rely on a high contrast ratio to perceive distinctions between colors.
I used WCAG 2.1 Level AA success criteria to guide my approach to solving color and color contrast issues in our both our existing designs and design system. My focus honed in on two critical aspects:
Color as a Primary Means of Communication: Ensuring that color isn't the sole visual medium for conveying information.
Contrast Ratios: Adhering to standards of a minimum 4.5:1 text-to-background ratio, while large text and actionable graphics maintain a minimum 3:1 ratio.
06 CREATING A NEW PALETTE
In my in-depth color and color contrast audit of existing designs, I uncovered a staggering excess of colors. For example, I found over 50 colors used for just background and text alone! Many of these colors were outside of our established design system, posing a challenge for our development team. I proposed a streamlined color palette using colors from both the brand kit and the design system, eliminating the use of transparencies. This palette reduces user cognitive load and presents a seamless brand narrative. For the design team, it alleviates decision fatigue and facilitates a cohesive look.
Screenshot of the asynchronous approval process in the team FigJam file—the new color palette and its suggested usage (as outlined below) are approved with no changes.
07 COLOR PALETTE APPLICATIONS AND DESIGN SOLUTIONS
Main Text Colors:
#595959
gray-8
(use for secondary)
#000000
gray-13
(use for primary)
#69388F
purple-8
(use for header or accent)
Main Background Colors:
#FFFFFF
white
#FCFAFC
purple-0
#F2EEF3
(“Primary-Raspberry Yogurt”)
With a newly determined color palette, I shifted focus to establish usage guidelines. I crafted a comprehensive amendment to the style guide within our design system, meticulously detailing the designated color for each use case. Thoroughly combing through existing designs, I ensured no use case was overlooked, from links to cards and tags.
Next, I proposed color and color contrast solutions for common design patterns. Below are some illustrative examples.
Previously, the header navigation relied heavily on color to indicate the user's location, but it lacked sufficient contrast between text and background. I addressed this by applying the new color palette, which enhanced the contrast, and suggesting an increased stroke width for improved location emphasis.
This example highlights several improvements. Firstly, the colors for subtitle, placeholder, and caption text have been updated to align with the new color palette, enhancing color contrast. Additionally, the progress step indicator has evolved from relying solely on color to indicate the user's progress. I suggested outlining rather than filling the not-in-use step for clearer communication.
This side progress bar exemplifies the impact of the new color palette, enhancing the contrast ratio for improved visibility. Users can now easily track their progress and gauge the remaining steps with greater clarity.
08 COLLABORATION, FEEDBACK,
AND ITERATION
While I took ownership over the area of color and color contrast, I collaborated with my colleagues on the design team to determine standards for other areas of the design system where there was overlap, such as typography, labeling, iconography, and buttons.
All design proposals, whether collaborative or individual endeavors, underwent multiple review periods during which designers could provide and receive feedback, facilitating necessary adjustments before the initiation of a voting process. Approval for final presentation to the client was determined by a consensus majority. The following are examples of collaborative design.
I collaborated with the typography designers to establish color standards for header, subtitle, and body text, along with external and internal links. This approach not only ensured visual consistency but also significantly enhanced the accessibility of the platform.
I collaborated with the designer overseeing labeling to establish color standards for form fields and error messages. Additionally, we ensured that error messages didn't rely solely on color for error communication.
I collaborated with the designers responsible for buttons to establish color standards for primary, secondary, and text buttons, considering their active, hover, pressed, and disabled states. This approach ensures a visually cohesive design and plays a crucial role in enhancing user experience, providing clear and consistent visual cues for interaction across various states.
Primary Active
Primary Hover/Pressed
Primary Disabled
I collaborated with the designer overseeing icons to establish color standards for icons and actionable graphics across various use states. Like buttons, this is important for visual cohesion, as well enhancing user engagement and comprehension.
AND
AND
09 CLIENT PRESENTATION, IMPACT, AND NEXT STEPS
Sean's Legacy approved the color palette changes with no issue, allowing our design team to incorporate them into both existing and new designs. With the client's endorsement, these outlined modifications have become integral to our design language. As we continue to add new features to the platform, we will use the the amended style guide as a reference in creating new design patterns and their responsive use states.
I’m really proud of my involvement in this project. Addressing color and contrast issues not only played a crucial role in achieving WCAG 2.1 Level AA compliance but also brought a visually enriched and more accessible platform to a broader user base.