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',
};

const Template = (args) => <MyComponent {...args} />;

export const StoryName = Template.bind({});
StoryName.args = {
  with: 'props',
};
StoryName.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',
};

const Template = (args) => <MyComponent {...args} />;

export const StoryName = Template.bind({});
StoryName.args = {
  with: 'props',
};
StoryName.parameters = {
  // Detect anti-aliased pixels
  chromatic: { diffIncludeAntiAliasing: true },
};

Troubleshooting