Diff threshold

The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before they’re flagged by Chromatic. A value of 0 means that pixels must have the exact same color value to be treated the same (which is unlikely when things like images and fonts are rendered by the browser) and 1 means pixels can have any color values.

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.