Compare thresholds

Deep compare ignores a diff when no pixel changed by more than the color delta threshold, leaving out anti-aliasing at the edges of text and shapes. Move the settings and see which diffs would still be shown, and what the diff highlights. Read more in the deep compare docs.

Color delta threshold0.002compareThreshold in the Happo configIgnore whitespacePixel threshold0ignoreThreshold in the Happo config.

Use these settings

Put this in happo.config.ts for the Happo CLI to compare with these settings. Without a deepCompare, happo 7 and later compare at a color delta threshold of 0.002.

deepCompare: {
  compareThreshold: 0.002,
},

Text 8 gray levels lighterColor delta thresholdLoading…
Before
Diff
After
Faint border goneColor delta thresholdLoading…
Before
Diff
After
Card background 30 levels darkerColor delta thresholdLoading…
Before
Diff
After
Text 40 gray levels lighterColor delta thresholdLoading…
Before
Diff
After
Text 55 gray levels lighterColor delta thresholdLoading…
Before
Diff
After
Button color changedColor delta thresholdLoading…
Before
Diff
After
Text 75 gray levels lighterColor delta thresholdLoading…
Before
Diff
After
Status dot changed color, 4 pixelsPixel thresholdLoading…
Before
Diff
After
Status dot changed color, 6 pixelsPixel thresholdLoading…
Before
Diff
After
Canvas with 7 pixels of rendering noisePixel threshold, or a color delta threshold over the noiseLoading…
Before
Diff
After
Whitespace added at the bottomIgnore whitespaceLoading…
Before
Diff
After
Space added inside the cardIgnore whitespace keeps it, since the card’s border runs through the new space; then the color delta threshold decidesLoading…
Before
Diff
After
Line of text addedTaller, with new contentLoading…
Before
Diff
After
Line of text removedShorter, with content goneLoading…
Before
Diff
After
Text moved 1pxShown at every settingLoading…
Before
Diff
After