"Accessibility is Usability for All"
Equivis symbolizes 'equal vision,' reflecting the goal of creating a dataviz design library that ensures equitable and accessible experiences for all users, regardless of color perception.
Techniques
UX Research • Color-Blind Accessibility • Data Visualization Design • Prototype Development • User Testing
Team
Individual Contributor
Role
As an individual designer, I focused on creating a design library tailored for data visualizations accessible to different color-blind users. I utilized tools like Figma, WebAIM, and Stark to test and ensure the visualizations were inclusive and user-friendly
Problem Discovery
I observed most design solutions depend on color to convey meaning, leaving color blind users struggling to navigate interfaces. This leads to:
User frustration
Longer task completion times
Exclusion from critical insights
Why Does this Matter?
Equivis was inspired by my observation that many interfaces do not fully adhere to WCAG 2.2 guidelines. I wanted to deepen my understanding of this and broaden my knowledge in the process.
Color blindness affects 300 million people globally (about 8% of men and 0.5% of women), yet many interfaces heavily rely on color differentiation.
Example: Imagine a user viewing a data visualization, such as a bar or pie chart, where the color differentiation alone makes it difficult to distinguish between categories. This creates confusion, frustration, and longer task completion times. This inspired me to start Equivis, an open-source library aimed at contributing to the design community with the latest accessibility knowledge.
Why Data Visualization?
Focus: Accessibility in Data Visualization
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
Insights
Ensure color independence through patterns, shapes, and text.
Meet and exceed contrast ratio requirements.
Offer modular, reusable components.
Design Process: Building Equivis
Grayscale Testing
To ensure that the visualizations are accessible to individuals with color vision impairments, I performed a "grayscale test". By converting the visualizations to grayscale, I identified areas that lacked sufficient contrast or differentiation and refined them to meet accessibility standards.
Color Palette
Created a contrast-compliant color palette with accessible alternatives. Tools like WebAIM, Stark and Figma’s Contrast Checker ensured all colors met WCAG standards.
Data Visualization Components
Bar Chart
Used unique patterns, monochromatic colors, and hover effects to ensure accessibility, allowing users to differentiate elements and isolate data points, regardless of color perception.
Line Chart
Used patterns, varied data point shapes, hover tooltips, and de-emphasizing effects to improve clarity of overlapping lines.
Pie Chart
Used patterns, hover effects, and dynamic tooltips to highlight active segments.
Donut Chart
Relied on interactivity, using hover effects and dynamic tooltips to improve accessibility and highlight specific segments.
Radar Chart
Used distinct line styles, interactive hover effects, and clear inner annotations to ensure readability and accessibility.
Area Chart
Used patterns, hover effects, and interactivity to enhance clarity and accessibility.
User Testing
To gather user feedback on the design library, I conducted unmoderated test sessions with 5 color-blind users and 5 general users, then synthesized the findings.
Findings
8/10 participants found graphs with patterns and hover effects significantly easier to interpret, especially in grayscale mode.
7/10 participants noted that direct labels with interactivity on chart elements improved data interpretation.
1 participant struggled with some color combinations in radar charts.
Reflection
Designing accessible data visualizations taught me that small, thoughtful changes like patterns and direct labeling benefit everyone, not just color-blind users.
Balancing aesthetics with usability was challenging but rewarding, proving that accessibility enhances visual clarity.
Next Steps
What started as a side project has grown into a meaningful initiative, and the positive feedback has motivated me to scale this into a top-notch, inclusive design system. To achieve this, I plan to:
Address problematic areas, such as improving color combinations with higher contrast and introducing bolder, clearer patterns for better differentiation.
Conduct usability tests with a more diverse group, including users with low vision and other visual impairments, to ensure broader accessibility.
Transform this project into an open-source library, inviting the design community to collaborate and contribute, making accessibility a shared goal.
