Sign inSign up
Introduction

Threshold for changes

The diffThreshold parameter allows you to fine-tune the threshold for visual change between snapshots before Chromatic flags them. Sometimes you need assurance to the sub-pixel, and other times you want to skip visual noise generated by non-deterministic rendering such as anti-aliasing.

Setting the threshold

Chromatic’s default threshold is .063, which balances high visual accuracy with low false positives (for example, from artifacts like anti-aliasing). 0 is the most accurate. 1 is the least accurate.

Configure the diffThreshold with a Storybook parameter like so:

// MyComponent.stories.js|jsx

import { MyComponent } from "./MyComponent";

export default {
  component: MyComponent,
  title: "MyComponent",
};

export const StoryName = {
  args: {
    with: "props",
  },
  parameters: {
    // Sets the diffThreshold for 0.2 for a specific story.
    chromatic: { diffThreshold: 0.2 },
  },
};

Adjusting the diffThreshold parameter allows Chromatic to detect the most subtle visual change within your component when snapshotted. While accurate for most common scenarios, it can also lead to an inconsistent UI test. For example, setting the parameter to a value of 0.8 can be enough to prevent Chromatic from accurately detecting a change in the component (e.g., positioning).

If you’re unsure which value will be enough; we’ve created an interactive diff tool allowing you to preview how adjusting the parameter impacts your UI tests in real-time.

Anti-aliasing

By default, Chromatic detects anti-aliased pixels and ignores them to prevent false positives. The diffIncludeAntiAliasing parameter allows you to override this behavior in instances where a single pixel change is not flagged by Chromatic but should be.

Configure the diffIncludeAntiAliasing with a Storybook parameter like so:

// MyComponent.stories.js|jsx

import { MyComponent } from "./MyComponent";

export default {
  component: MyComponent,
  title: "MyComponent",
};

export const StoryName = {
  args: {
    with: "props",
  },
  parameters: {
    // Detect anti-aliased pixels
    chromatic: { diffIncludeAntiAliasing: true },
  },
};

Troubleshooting

Why weren't diffs found when a color or background changed?

Chromatic uses a threshold to determine how much needs to visually change between snapshots before they get flagged as changes. This prevents false positives due to anti-aliasing and other non-deterministic rendering artifacts.

But our default threshold may result in subtle changes being missed. For instance, nuanced changes to the shade of gray of a background. In this case, you may want to adjust the diffThreshold to be more accurate (lower value).

Find the right threshold for your UI using our interactive diff tool.