Design Beyond Colour: Making Charts Accessible for Colour-Blind Users at Peak
Leading a redesign effort to ensure our data visualizations were accessible for all users, regardless of how they perceive colour.
Overview
At Peak, I led UX for several AI-powered forecasting tools, including dashboards that visualized critical inventory metrics—such as stock levels, reorder signals, and service rates. These data-driven insights were surfaced via performance charts designed to support quick, informed decision-making.
However, during early user feedback sessions, I uncovered a critical accessibility gap: several users with colour vision deficiency (CVD) were unable to differentiate chart lines. Despite a clear visual structure for most users, the experience broke down for a meaningful segment of our audience.
This sparked a redesign effort to ensure our charts communicated effectively—regardless of how users perceive colour.
The Challenge
My initial chart designs relied exclusively on colour to differentiate data series (e.g. using green for "Planned Stock" and blue for "Predicted Reorder"). For users with red-green or blue-yellow colour blindness, this presented a serious usability barrier.
Key user feedback revealed significant issues:
"I can't tell which line is which."
"The legend doesn't help when everything on the chart looks the same."
"I usually rely on texture or pattern when colour fails me."
These insights revealed a clear design flaw—one that could compromise data trust and decision-making. It was an opportunity to correct course and embed inclusivity at a foundational level.
My Role
As the lead designer on the Inventory squad, I:
Initiated an audit of all chart components to identify colour-reliant patterns across the product
Advocated for inclusive visual design as a core principle—not a bolt-on
Consulted WCAG and GOV.UK accessibility standards to guide decision-making
Collaborated with engineers to implement low-effort, high-impact improvements without introducing tech debt
Partnered with the design system team to standardize accessible data visualizations across products
Chart Accessibility Comparison
Toggle between chart types and accessibility features
Currently showing: Normal color vision. The original design relies solely on color to differentiate data series.
Hover over the chart to see detailed data values for each month.
The Solution
The redesign introduced visual redundancy—ensuring information was never conveyed by colour alone. Key updates included:
Distinct Line Styles
Each data series was paired with a unique stroke style—solid, dashed, dotted, or double-lined. This ensured clarity regardless of how users perceive colour.
Updated Chart Legends
Legends were restructured to visually reflect not just colour, but line style—making it easier to map data series at a glance.
CVD Testing & Simulation
Used Coblis and Stark to simulate deuteranopia, protanopia, and tritanopia. This allowed me to test the effectiveness of design changes from multiple CVD perspectives before rollout.
Pattern Defaults in the Design System
Worked with the design systems team to integrate stroke styles as the default for line charts—so accessibility was built-in from day one, not applied post-facto.
Interactive Data Tooltips
Added hover tooltips that display exact numerical values for each data point. This provided an additional layer of information access, especially valuable for users who might have difficulty distinguishing between similar visual elements, regardless of their visual abilities.
Color Vision Deficiency Simulation
See how charts appear with different types of color blindness
Normal Vision
How charts appear with normal color vision
Toggle "Show accessible design" to see how adding line patterns makes charts distinguishable even with normal vision.
Results & Impact
100% Success Rate
All colour-blind users in testing could interpret charts accurately after the update
Reduced Support
Fewer support tickets related to dashboard misinterpretation
Positive Feedback
Enterprise users felt the product was more inclusive
Increased Awareness
Greater internal awareness of visual accessibility within product and engineering teams
Reflection
This project reinforced that accessible design is good design—for everyone. It's not enough to rely on visual norms like colour. Inclusive design means meeting people where they are and respecting the full spectrum of human perception.
As a senior designer, I believe it's our responsibility to design for edge cases as rigorously as we do for the majority. The edge is the center for someone.
Inclusive by default. Effective for all.
That's the kind of system I aim to build.