How to Find Colour Changes Between Two Images

Some changes between two images are about shape: a moved button, an extra line of text, a crop. Others are only about colour: a brand blue that shifted a shade, a photo that came back warmer from the printer’s proof, a design token that changed from teal to green. The second kind is easy to miss by eye and, it turns out, easy for software to miss too.

Why many comparisons are colour-blind

The standard way to measure how similar two images are, SSIM, works on brightness. It compares the structure of light and dark in each region — which is what makes it good at finding blur, compression damage and moved objects — and ignores colour entirely.

So two images that differ only in colour can look perfect to it. Before we added a colour check, a button recoloured with its brightness kept the same scored 99.99% similar in our own comparison. The numbers were right about what they measured; they just were not measuring the thing that changed.

How colour is compared

DiffALL’s image comparison now compares the colour channels as well as brightness, and two choices in how it does that come from measuring against people, not from intuition.

Colour is compared at low resolution. The eye resolves colour much more coarsely than brightness (the same fact behind chroma subsampling). Fine-scale colour differences are mostly noise to a viewer, so the colour comparison runs on a small copy of each image. When we checked the scores against a public set of 1,000 image pairs rated by people, the small copy agreed with them better than a full-size one did.

A colour change lowers the score; it never raises it. The structure score is multiplied by a colour factor rather than averaged with it. An average would have let a blurry image with perfect colours score higher than before, which is backwards. With a multiplier, intact colour cannot hide structural damage, and damaged colour always costs something.

Across that same 1,000-pair set, adding colour moved agreement with human ratings from 0.81 to 0.86 in the default mode — better on every one of the reference images.

Reading the result

The result shows the structure score (SSIM) and the colour similarity side by side, so you can see which one moved. When colour is the reason the overall score dropped, the page says so plainly:

Shapes and brightness match closely — the difference is in the colours.

Without that line, a lower overall score next to an SSIM of 0.9999 would look like a contradiction.

The heatmap shows where the images differ. A colour shift across a whole photo lights up evenly; a recoloured element lights up in its own outline.

Common cases

• Brand colour checks. Compare an export against the approved artwork; a shifted brand colour shows as a colour-only difference in the logo region.
• Colour profiles. An image saved without its colour profile, or converted between profiles, can shift every colour slightly. The difference is spread evenly across the image.
• UI regression. A theme change that recolours a component without moving it is exactly the change a brightness-only screenshot test misses. See comparing screenshots for UI regression.
• Printing and proofing. A proof scan compared with the source will differ in colour everywhere — that is the print process — so look at whether one region differs more than the rest.

What it does not do

The comparison tells you that colour changed and where. It does not tell you which colour is correct, and it does not measure colour accuracy against a standard; for that you need a calibrated display and the original values. Video comparison is still brightness-only for now, so for a colour grade between two video versions see detecting colour grading changes in video.