Diff threshold

The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before they’re flagged by Chromatic.


Setting the threshold

Chromatic’s out-of-the-box threshold was battle-tested to be ideal for most cases. But sometimes you need assurance to the sub-pixel. And other times you want to skip visual noise.

Configure the diffThreshold with a Storybook parameter like so:

storiesOf('Component', module)
  .add('story', () => <MyStory />,
  {
    chromatic: {
        diffThreshold: 0.2,
    },
  });

The default value is .063 which balances high visual accuracy with low false positives (e.g., from artifacts like anti-aliasing). The lower the value the higher the accuracy. 0 is the most accurate.