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