Thresholds for changes

The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before they’re flagged by Chromatic. 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.

Interactively demo different diffThreshold values with this tool.

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

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