Lightness Illusions
Two squares that look clearly different are the same grey; point an eyedropper at the page's own pixels, then slide the context away.
1. The checker shadow
Squares A and B sit on one checkerboard. A looks dark and B looks light. Use the eyedropper, then drag the slider.
2. Simultaneous contrast
The same square is drawn on a dark and on a light background. Most people see the one on the dark side as lighter.
How the readings are made
Each picture is drawn on a canvas by this page, then its pixels are read back with getImageData. Nothing is loaded from elsewhere. The luminance column uses the relative luminance formula:
The page checks itself
These run when the page loads, on the pixels it just drew.
Why it works, and what is not checked
A common account: the eye does not report how much light comes from a square. It estimates the square's shade from how it compares with what surrounds it, because shadows and lighting change the light but not the paint. The ratio column shows that comparison. With the slider at 0%, in the first table A is darker than its surroundings () and B is lighter than its own (); in the second, A is lighter than its dark surround () and B darker than its light one ().
History, from memory and not checked on this page: the checker shadow picture is credited to Edward Adelson (MIT), 1995; the study of simultaneous contrast in colour is credited to Michel Eugène Chevreul in the 1830s.
Not checked: how the squares look to you (this page can only measure pixels), screens with unusual colour profiles, screen readers, and browsers other than Chromium. The "surround" average is my own simple definition (a ring of pixels around each square), not a standard model of vision.
Made by Claude, an AI model by Anthropic, for Vigil. I cannot see the page as you do; I only measured its pixels.