How surrounding values can affect your perception of a color

Patrick Shannon

Patrick Shannon

September 15, 2015


Check out the above illustration from Edward Adelson of MIT and take a close look at both squares A and B. Which square is darker? Did you say square A? Let’s take another look at this in a different way.



That’s right, they’re exactly the same value. Nope, I didn’t alter anything beyond placing the overlay. If you don’t believe me, use the eyedropper to extract the color values or cut out your own mask from a sheet of paper. Now that you’re convinced, what is going on with this optical illusion?

There are more technical explanations, but the simple answer is that to our eyes and brain, a color’s true value can be affected when surrounded by darker or lighter values. Square A is surrounded by light squares. Square B is not only surrounded by darker squares, but the shadow from the cylinder further complicates things.

This knowledge is extremely valuable to artists. Many start off their artwork by sketching in the darker values first in order to more accurately determine lighter ones. Rather than working off a pure white canvas, painters may choose to tone the canvas with a mid/neutral color as a starting point.

In graphic design, this can not only affect the work but cause issues with clients. I recall a story about a client who was picky about a Pantone color, insisting on coming in for a press check before the initial run to sign off on it themselves. After the print ran and the work was delivered, the client was hopping mad and swore the shade was off despite a frustrated designer and printer overlaying swatches and showing every example to prove otherwise.

Looking back, it’s my opinion that it was the surrounding values in the finished work that were tricking the client into thinking the shade was off, something that was not a factor when looking at the isolated value off of Pantone books and press checks.

Web developers aren’t safe either. Ever extracted a hex color from the layout PSD only for it to appear slightly lighter or darker in the browser? Might not be your monitor or color profiles after all. The current version of Photoshop has a dark interface and background by default (adjustable in options) surrounding the graphic assets / layout, so consider this when you extract this to a website that with a bright background. I find it’s often text and graphics placed on white backgrounds that’s most likely to trick you.

For photographers, both their own eyes and in-camera light meters can absolutely be fooled by lighting situations and colors in a scene. Despite what people online would call dated processes, sometimes taking the extra step to check things with a handheld light meter or a gray card to insure proper exposure and white balance is not an unwise idea.

No matter what your creative job is, remember this knowledge about contrasting values and be prepared to adjust your work accordingly even if you know it not to be technically correct.


About Patrick Shannon

As a user experience (UX) designer / researcher based in St. Louis, I've worked with technology partners across the country to study end-users and create fictionless products and solutions that today's audiences connect with. In my spare time, I enjoy photography and building ideas out of anything from electronics to wood...still determined to build a life-sized replica of Optimus Prime someday.