Situation

Data visualizations are used widely across the company to communicate insights, track performance, and support decision-making. However, the color palettes used in these charts were outdated and lacked proper contrast, making them inaccessible to users with visual impairments, including those with color blindness. Additionally, there was no documentation or design system guidance on how to apply color effectively in visualizations, which led to inconsistent and sometimes ineffective data displays across tools and teams.

The business objective was to improve the clarity, consistency, and accessibility of data visualizations. Meeting this goal required not only updated color standards but also practical tools and documentation to help designers and developers apply them correctly and consistently.

The Problem

The main problem was that existing data visualization colors were neither accessible nor standardized. Teams used various ad-hoc color sets that often failed to meet accessibility guidelines, making charts difficult to interpret. There was also no shared documentation or design system support, leaving designers and developers without guidance on best practices. This led to inconsistent chart styling, duplicated effort, and potential compliance risks related to accessibility standards.

Without a structured, accessible system for applying color in visualizations, teams struggled to deliver clear, inclusive, and consistent data experiences.

Solution

To solve this, I created a new set of high-contrast, accessible color palettes specifically for data visualization. These palettes were designed to meet WCAG (Web Content Accessibility Guidelines) standards and support a variety of data types, including categorical, sequential, and diverging datasets.

I built these color sets into Figma styles and variables, making them easily accessible to designers. I also worked with developers to convert the palettes into design tokens, ensuring consistency across platforms and codebases.

In addition to the color tools, I created comprehensive documentation that explains how to select and apply the right palette for different use cases. This documentation is published in both company-wide design system files and UX team libraries, making it widely accessible.

To support immediate adoption, I also created ready-to-use chart components—such as bar charts, pie charts, and line graphs—for two different internal design systems. These components allow designers to quickly drop accessible, on-brand visualizations into their work, reducing setup time and reinforcing consistency across products.

Evaluation

This work has significantly improved the accessibility and consistency of data visualizations across the company. Designers now have direct access to approved color palettes and chart components in their respective design systems, and developers can implement matching colors through tokens, bridging the gap between design and development.

Teams report that the documentation and components have removed ambiguity, improved design efficiency, and ensured charts are accessible from the start. The inclusion of high-contrast colors has made visualizations more readable for all users, helping support inclusivity and compliance.

This solution has laid a scalable foundation for accessible data visualization going forward. It can easily expand to include additional chart types, motion guidance, or usage training as needed, ensuring that as data needs evolve, our tools and standards evolve with them.