Accessible Charts for Colour-Blind Users
Leading a redesign effort to ensure data visualisations were accessible for all users, regardless of how they perceive colour
Situation
At Peak, I led UX for several AI-powered forecasting tools, including dashboards that visualised critical inventory metrics — stock levels, reorder signals, and service rates. These data-driven insights were surfaced via performance charts designed to support quick, informed decision-making.
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 entirely for a meaningful segment of our audience.
The feedback was direct: “I can't tell which line is which,” “The legend doesn't help when everything on the chart looks the same,” and “I usually rely on texture or pattern when colour fails me.” My initial designs relied exclusively on colour to differentiate data series — green for “Planned Stock,” blue for “Predicted Reorder.” For users with red-green or blue-yellow colour blindness, this was a serious usability barrier.
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.
Task
As the lead designer on the Inventory squad, I took ownership of the problem end-to-end. That meant initiating an audit of all chart components to identify colour-reliant patterns across the product, researching accessibility standards and CVD-friendly design patterns, collaborating with engineers to implement texture and pattern-based solutions, and testing the results with users who have colour vision deficiency.
I also partnered with the design system team to standardise accessible data visualisations across products — ensuring this wasn't a one-off fix but a permanent shift in how we built charts.
Action
Visual redundancy as a design principle
The core redesign introduced visual redundancy — ensuring information was never conveyed by colour alone. Each data series was paired with distinct line styles: solid, dashed, dotted, or double-lined. This meant that even if two colours appeared identical under colour vision deficiency, users could still distinguish every series through shape and pattern.
Legend and marker overhaul
Chart legends were restructured to reflect not just colour but line style and marker shape — making it easier to map data series at a glance. I introduced distinct marker shapes (circles, squares, triangles) at each data point, giving users multiple channels of information simultaneously. The legend became a true key to the chart, not just a colour swatch.
Chart Accessibility Comparison
Toggle between chart types and accessibility features
The original design relies solely on colour to differentiate data series. Toggle to see how this breaks down for colour-blind users.
Before and after: Adding visual redundancy through distinct line styles made charts accessible to all users
CVD testing and simulation
I used Coblis and Stark to simulate deuteranopia, protanopia, and tritanopia perspectives before rollout. Every chart variant was tested against all three major forms of colour blindness to ensure no information was lost. This step caught several edge cases — particularly with the amber/green combination that appeared nearly identical under deuteranopia.
Colour Vision Deficiency Simulation
See how charts appear with different types of colour blindness
Normal Vision
How charts appear with normal colour vision
Select a colour vision type to see how the original chart appears to users with different forms of colour blindness.
Simulation of how our redesigned charts appear to users with different types of colour vision deficiency
Pattern defaults in the design system
Working with the design systems team, I integrated stroke styles as the default for line charts — so accessibility was built-in from day one, not applied post-facto. Every new chart created with the component library automatically shipped with accessible patterns. This removed the dependency on individual designers remembering to add accessibility features manually.
Interactive data tooltips
I added tooltips that display exact numerical values for each data point on hover. 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. The tooltip became a universal fallback: even when lines overlapped visually, the exact values were always one hover away.
Result
The results exceeded expectations and validated the importance of designing for the full spectrum of human perception.
- 100% success rate — all colour-blind users in testing were able to interpret charts accurately after the update
- Reduced support tickets related to dashboard misinterpretation
- Positive feedback from enterprise users who felt the product was more inclusive and trustworthy
- Increased awareness of visual accessibility within product and engineering teams
- Accessible chart patterns adopted as the default in the design system — benefiting all future products
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 centre for someone.
Inclusive by default. Effective for all.