Pixel Perfect vs Chromatic: against the design or against the last version
If you use Storybook, you probably know Chromatic. Pixel Perfect doesn’t replace it: they answer two different questions. Here’s what each one answers, along with Percy and Applitools, with data from their websites.
The core difference
Chromatic, Percy and Applitools are visual regression tests: they take snapshots of your components or pages and compare them with the ones you accepted before. They answer “did something change that I didn’t mean to change?” In Chromatic, the baseline is the last accepted snapshot on the same branch.
Pixel Perfect compares the page against the Figma design, value by value. It answers “does the page match the design?” and tells you what to change: “the heading is 44 px and 48 in Figma.”
A visual regression test trusts the first version you accept. If that version already shipped different from Figma, the test won’t notice: it compares against itself.
Side by side
| Pixel Perfect | Chromatic | Percy | Applitools | |
|---|---|---|---|---|
| What it compares against | The Figma design | The last accepted snapshot of your code, on the same branch | Snapshots approved before. It can also use a Figma design as the reference | The baseline from previous runs. With its plugin, a Figma frame can be the baseline |
| What you get | Each difference with the Figma value and the page value: spacing, typography, color, sizes | The pixel differences between the new snapshot and the accepted one | The visual differences between snapshots | The visual differences between the screenshot and the baseline |
| What you need | The app, the frame link and the page address. No tests or Storybook | Storybook, or Vitest, Playwright or Cypress tests | Its SDK in your tests (Playwright, Cypress, Selenium, Storybook…) or its CLI | Its SDK in your test code |
| Where it runs | On your computer, when you need it | In your CI on every push, with a check on the pull request | In your CI, with the status on the pull request | In your CI, with the status on the GitHub pull request |
| Entry price | Free download | Free up to 5,000 snapshots a month. Starter: USD 179 a month | Free up to 5,000 screenshots a month. Desktop: USD 199 a month billed annually | No free plan (free trial). Starter: USD 667 a month billed annually |
Chromatic, Percy and Applitools data taken from their official websites, docs and pricing on October 24, 2026. It may change: check their websites. Chromatic’s Figma plugin shows your stories inside Figma; it doesn’t compare the design with the component.
When to use each one
- Chromatic: if your team works with Storybook and wants every pull request to flag when a component changes by accident.
- Percy: if you already have Playwright, Cypress or Selenium tests and want to add snapshots to your CI.
- Applitools: if you need visual regression at scale, with its Visual AI, and have an enterprise budget.
- Pixel Perfect: if design, product or QA need to know whether the screen matches Figma before calling it done, without writing tests.
They work together
A flow that works: with Pixel Perfect you check the screen against Figma until it matches. When you accept it, that version becomes the Chromatic or Percy baseline, and from then on they flag anything that changes by accident.
That way the baseline starts out right and visual regression keeps it from breaking.