Catch accessibility bugs at the source

Chromatic tests accessibility at the component level, where issues are easiest to fix. Automated checks catch regressions on every commit so compliance stays part of the workflow.

Made by the Storybook team

How does accessibility testing work?

Chromatic runs Axe on each component to capture accessibility violations and their corresponding DOM nodes. The first test creates baseline snapshots. Future tests generate new snapshots for comparison to the baselines. When there are changes to violations you get notified for review.

Simplify WCAG compliance

Industry-standard checks help you meet WCAG requirements and maintain compliance with US ADA, EU Accessibility Act, and UK Equality Act.

Catch issues at the source

Run accessibility checks directly on components, where issues start, to prevent them from escalating into larger page-level problems.

Never go backwards

Chromatic sets a baseline for all tests to help you incrementally fix issues without introducing regressions.

Automated checks with every commit

Accessibility tests run in CI on every commit, helping keep your UI compliant with every code change.

Actionable debugging tools

Get helpful debugging data with highlighted DOM nodes, remediation tips, and clear descriptions to help you fix issues fast.

Generate reports automatically

Instead of spending months creating VPATs manually, Chromatic generates detailed reports of violations and hotspots in seconds.

“Time is money and Chromatic saves us at least 24 hours of manual review time every month.”

Paul Vidal

CTO

Stop violations without stopping work

Other accessibility tools overwhelm you with violations, blocking work while you figure out what changed. Chromatic focuses on regressions—highlighting only new and changed violations in your tests. This ensures your team never makes accessibility worse while letting you fix preexisting issues on your own schedule.

Capture accessibility snapshots

Chromatic runs Axe on each component to track violations alongside their corresponding DOM nodes. The first snapshot is set as the baseline that future tests are compared to.

Detect new and changed violations

Running Chromatic captures new snapshots then compares them with test baselines to catch regressions. This isolates the violations introduced in your pull request, so you can focus on what changed—without getting lost in preexisting issues.

Debug violations interactively

Detailed report for a component shows the exact violations, their impact, and how to fix them. Developers can click through to the Storybook component to see the issue in context and debug it faster.

Update baselines

Fix accidental bugs first, then update baselines if changes improve accessibility or align with planned work. Loop in developers, designers, and auditors to tackle violations together.

Merge with confidence

When accessibility checks pass, UI Tests pass too. Teams can merge with certainty that accessibility remained the same or improved.

Monitor compliance progress in real time

Traditional accessibility reporting is manual, expensive, and out of touch with how modern apps are built. Chromatic tracks violations in reusable components back to the pages they impact. This helps you prioritize impactful fixes and measure progress along the way.

Accessibility score at a glance

Get an overview of every violation across your project in real time with a continuously updated compliance score.

Track improvements over time

Monitor violations weekly, monthly, and yearly to identify the trends and progress toward compliance.

Features impact on every branch

See how each pull request improves accessibility and contributes to your team’s long-term compliance goals.

Identify accessibility hotspots

Trace violations to the components causing them and prioritize fixes that improve multiple parts of your app at the same time.

Leadership-friendly reporting

Showcase your organization’s WCAG compliance progress with every release. Our reports are perfect for stakeholders and leadership.

Streamline VPAT preparation

Chromatic helps developers fix issues in reusable components before they spread. This reduces noise in VPATs, letting auditors focus on nuanced challenges.

Powered by your Storybook

Stories capture all states and variations of components. They’re a structured way to keep track of UI test cases. Chromatic uses these stories to power accessibility tests.

Why use Storybook? Every piece of UI is now a component. The superpower of components is that you can render a specific variation in isolation by passing in props and mocking APIs and events. Save these variations in a reproducible format called stories using Storybook.

Chromatic is built and maintained by the team behind Storybook. Together, Storybook and Chromatic give teams a structured way to develop, test, and document components and pages.

Frequently asked questions

How is regression testing different from basic accessibility tests?

Why run accessibility tests in the cloud instead of locally?

How does Chromatic compare to Axe, Cypress, or Playwright for accessibility?

Do I still need Axe or manual audits if I use Chromatic?

How does Chromatic help with WCAG compliance?

What's the difference between Chromatic and Storybook's a11y addon?

Can Chromatic generate VPATs?