Catch accessibility bugs at the source
Chromatic tests accessibility at the component level, where issues are easiest to fix. Our automated tests find regressions instantly, making compliance a natural part of your team’s workflow.
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.
“Time is money and Chromatic saves us at least 24 hours of manual review time every month.”
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 components 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.
Powered by your Storybook
Stories capture all states and variations of components. They’re a pragmatic, reproducible 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, they turn your components and pages into an powerful yet pragmatic way to develop, test, and documenting UI.