UDRC Tableau Palette Design for Color-Blind Accessibility
Government
Summary
In my role as a User Experience Designer and Researcher at the Utah Department of Workforce Services, I led the redesign of the UDRC website to improve usability and accessibility for Utah's users. Collaborating with three analysts, we developed four color palettes meant to get away from standard red-green palettes and that were compatible with various Tableau reports, ensuring clear differentiation between data points. This initiative resulted in a 300% increase in user engagement and positive feedback from our users, successfully meeting and exceeding Section 508 and WCAG 2.0 standards. This project highlights the significant impact of inclusive design on user experience and accessibility.
Project Overview
As the User Experience Designer and Researcher at the Utah Department of Workforce Services, I led the redesign of the UDRC website, focusing on enhancing usability and accessibility. A critical component of this project was developing a new color palette specifically designed for color-blind users.
Challenge
The existing color scheme of the UDRC website did not adequately cater to users with color blindness, resulting in difficulties in distinguishing various elements and negatively impacting the overall user experience. Our goal was to create a color palette that adhered to Section 508 and WCAG 2.0 standards, ensuring the website was accessible to all users, including those with visual impairments.
Timeframe
Three weeks during 2021
Team member, Researcher, and Designer
Problem Statement: The existing color scheme of the UDRC website did not adequately cater to users with color blindness, causing difficulties in distinguishing various elements and negatively impacting understanding of the data and the overall user experience. This problem necessitated the development of a color palette that adhered to Section 508 and WCAG 2.0 standards to ensure inclusivity and improved interaction with the website's content and Tableau reports.
Research and Methodology
- User Surveys and Interviews: Engaged with color-blind users to gather insights on their challenges and preferences.
- Usability Testing: Implemented prototypes with the new color palette and tested them with users to assess effectiveness and gather feedback.
- Color Accessibility Tools: Utilized tools such as Adobe Color and the WCAG Color Contrast Checker to ensure compliance with accessibility standards. Each palette started with a key color and then the color wheel was used to find associated colors that would have good contrast and were accessible.
- Final Color Blind Comparison: As shown in the images below, each color for the palette was put into a Figma plugin that demonstrated the differences between each for the primary types of color blindness. It compares how the palette appears under normal vision (True) and three types of color blindness: Protanopia (Prot.), Deuteranopia (Deut.), and Tritanopia (Trit.). Each column demonstrates the palette's colors for each vision type and shows a clear distinction between each color.
Color Blind Check for Palette 1
Color Blind Check for Palette 2
I collaborated with three analysts to develop 4 distinct color palettes that worked effectively across multiple types of Tableau reports. These palettes ensured clear differentiation between various data points, making the reports more accessible and comprehensible to all users.
Design and Implementation
Based on the research findings, I developed 4 color palettes that:
- Enhanced Contrast: Ensured high contrast between text and background colors, making it easier for color-blind users to read and navigate.
- Distinct Color Differentiation: Selected colors that users with various types of color blindness could easily distinguish.
- Consistent Visual Hierarchy: Maintained a consistent visual hierarchy to guide users through the website seamlessly.
Palette 1
Palette 2
Results
The implementation of the new color palette led to significant improvements in the user experience for color-blind users, including:
- Increased Engagement: User engagement increased by 300%, with more users interacting with the website’s content.
- Positive Feedback: Received positive feedback from color-blind users who reported an enhanced ability to navigate and use the website.
- Compliance Achieved: Successfully met and exceeded Section 508 and WCAG 2.0 accessibility standards.
This project demonstrated the importance of inclusive design and its positive impact on user experience. By prioritizing accessibility and working collaboratively with analysts to develop effective color palettes, we not only improved usability for color-blind users but also enhanced the overall user experience for all visitors to the UDRC website.