Simultaneous Contrast Is Lying to Your Eyes: A Designer's Field Guide to the Most Deceptive Optical Illusion

You're in a client review meeting. The client points at the screen and says, "That grey looks too blue." You open the color picker, confirm it's a perfectly neutral #808080, and politely explain that it's a true grey.

The client is right. Not about the hex value, but about what their eyes are seeing. The grey genuinely appears blue because it's sitting next to a warm orange hero image. That's simultaneous contrast, an optical illusion that affects your design decisions every day, usually without you noticing.

It's more than a textbook curiosity. It's why your button color looks "off" when you move it between pages. It's why your carefully chosen neutral background suddenly feels warm or cool depending on the content sitting on top of it. And it's why side-by-side comparison, the most intuitive way to judge color, is unreliable.

The grey square that broke color theory 101

Most designers have seen the Adelson checker shadow illusion at least once. Two squares on a checkerboard, one in shadow and one in light, appear to be drastically different values of grey. They're identical. It's a jolt the first time you see it, and it should change how you think about color for good.

Josef Albers spent decades making similar points, most famously in his 1963 book Interaction of Color. His exercises demonstrated, over and over, that a single color could be made to look like two completely different colors depending on what surrounded it. And two different colors could be made to look identical.

This is simultaneous contrast. Your visual system doesn't perceive absolute color. It perceives relative color based on surrounding context.

It comes in two main forms, and both show up in your work all the time:

• Chromatic contrast: A neutral grey shifts toward the complementary hue of whatever surrounds it. Place that grey on an orange background, and it picks up a blue tint. Place it on green, and it appears reddish.
• Achromatic (luminance) contrast: A mid-tone grey looks lighter on a dark background and darker on a light background. Same value, different perceived brightness.

Both happen at the same time in real design work. They stack.

The cause is evolutionary. Your visual system evolved to identify objects under wildly varying lighting conditions: noon sun, overcast sky, candlelight, fluorescent office lighting. To pull this off, the brain computes color relative to its context rather than in absolute terms. That's useful: it lets you recognize a red apple whether you see it under blue sky or warm incandescent light.

The machinery behind it starts in the retina. Retinal ganglion cells respond to the light hitting them, but they are also suppressed by the activity of their neighbors, a process called lateral inhibition. Bright surroundings dampen the signal for a darker center, which is where the lightness shift comes from. Color itself travels through opponent channels (red-green, blue-yellow and light-dark), and a strong surround on one side of a channel nudges the area next to it toward the other side. Because each channel is pushed independently, a grey can look both cooler and lighter at the same time.

It's worth separating this from two related effects. Successive contrast is the afterimage you see after staring at a color and looking away; it happens over time, not side by side. The Bezold effect is the opposite tendency, where small color elements appear to spread into, rather than push away from, what surrounds them.

All of this is much less useful when you're trying to make precise color judgments on a screen, which is where most explanations stop. The interesting part is what happens in day-to-day interface, brand, and layout work.

Why "that grey looks too blue" is both right and wrong

Back to the client review.

Your client is staring at a card component sitting on top of a warm-toned lifestyle photograph. The card background is #808080, a perfectly neutral grey. But the client sees blue. They're not wrong. Their visual system is exaggerating the difference between the warm surround and the neutral target by pushing perception toward the complement of the surrounding hue. A warm orange surround makes the eye see a cool blue shift in the adjacent grey.

The shifts are predictable:

• Warm surround → cool shift in the target
• Green surround → reddish shift
• Blue surround → yellowish shift
• Purple surround → yellow-green shift

The hex value is "correct" and the perceptual experience is "incorrect," and in design the perception is what counts. Nobody using your product opens a color picker to check whether the grey is neutral. They see blue-grey, so for them it is blue-grey.

A useful rule: in a shipped design, no color is ever seen in isolation. The hex value is where you start. The "true" color of an element is the color it appears to be in its final environment.

That changes how you should hear client feedback. Instead of dismissing perceptual complaints as "wrong," treat them as signal, because the client is reporting what they actually see. The fix isn't a lecture. It's adjusting the color to appear correct in context, even if that means the hex value looks "wrong" in a vacuum.

Why your button looks different on every page

This scenario may feel familiar.

A designer defines a primary CTA button color, say a bright blue (#2563EB), in a design system. On the marketing landing page, which features a dark, rich hero image with deep purples, the button looks vivid and electric, and stakeholders love it.

Then the same button appears on the settings page: mostly white space, light grey dividers, sparse layout. The button looks duller, flatter, almost muted. The product manager pings the design channel: "Did someone change the button color on settings?"

Nobody changed anything. The hex code is identical, but it looks very different.

Two forces are at work here. The dark, saturated marketing page provides high luminance contrast that makes the button appear more vivid. It also chromatically interacts with the blue, intensifying it. The sparse settings page offers less surrounding context and less contrast, so the same blue feels less energetic.

For design systems, this means a single token value doesn't guarantee that a color looks consistent. It's a hidden cost of treating color as a static property instead of a relationship. Your token --color-primary-blue is a number. What the user sees is a perceptual event, and that event changes from page to page.

It gets worse. Designers often judge colors by placing swatches side by side in a style guide or a Figma frame. But side-by-side comparison amplifies simultaneous contrast rather than eliminating it. You're adding context, not removing it. The two swatches push each other apart perceptually, making differences appear larger (or smaller) than they'll appear in production.

Charts and layered surfaces

Buttons and grey cards are the familiar cases, but two other places catch teams out.

Data visualization. In a grouped bar chart or a choropleth map, colors that look clearly distinct in the legend can become ambiguous when rendered as narrow, adjacent shapes. A light teal and a light green that are easy to tell apart as swatches can merge when they sit side by side as thin bars, because each neighbor and the gridlines around them shift how the other is perceived. Check categorical palettes in the chart itself, at the size they will actually be drawn, not only in the legend.

Glassmorphism and layered dark modes. A frosted glass panel lays a semi-transparent color over content that changes as the user scrolls, so its surround is literally moving and its perceived hue moves with it. A static mockup can't show you that. Layered dark themes have a quieter version of the same problem: a brand color on a cool charcoal card next to a warmer near-black sidebar can read cooler in one panel and warmer in the other.

Artists already knew this

Designers didn't discover this problem. Artists have struggled with it, and used it, for centuries.

Josef Albers' Interaction of Color is more or less a whole book about simultaneous contrast. His students at Yale spent semesters learning to make one color "look like two" or two colors "look like one" through nothing but context manipulation. They used colored paper placed side by side, and it kept behaving in ways the students didn't expect.

The Impressionists used simultaneous contrast on purpose. Claude Monet and Camille Pissarro placed complementary colors in small strokes side by side, knowing the viewer's eye would intensify both hues at their borders. The shimmering quality of Impressionist paintings is partly a simultaneous contrast effect, and a deliberate one.

The science goes back to Michel Eugène Chevreul, a 19th-century French chemist. Chevreul was brought in to investigate complaints about dull colors in tapestries produced at the Gobelins Manufactory in Paris. The weavers insisted their dyes were pure and vibrant. Chevreul discovered the "dullness" wasn't in the dyes at all. It was in the adjacent thread colors suppressing perceived saturation through simultaneous contrast. His 1839 treatise, The Law of Simultaneous Colour Contrast, influenced Delacroix, the Impressionists, the Neo-Impressionists, and much of modern color theory.

These artists and scientists all reached the same conclusion, and plenty of designers still haven't absorbed it: you cannot evaluate a color without evaluating its neighborhood. It gets rediscovered every time someone opens a color picker and assumes the number tells the whole story.

Six workarounds for daily work

You can't turn off simultaneous contrast, but you can work around it.

1. Isolation testing

When evaluating a color choice, temporarily place the element on a neutral, middle-grey background (#808080 or your system's N50 equivalent) with no other chromatic content visible. This minimizes simultaneous contrast and gets you closer to the "true" appearance of the color. In Figma, create a dedicated isolation artboard for exactly this purpose. Make it part of your file template.

2. The squint test

Squinting blurs fine detail and collapses your perception toward broad color and luminance relationships. It's a fast, no-tool way to check if an element reads as the hue and value you intend. Squinting de-emphasizes edges, which is exactly where simultaneous contrast is strongest. Painters have used this technique for centuries.

3. Luminance-matched surrounds

When you must compare two colors side by side, place them on backgrounds of matched luminance (brightness). This neutralizes the achromatic component of simultaneous contrast and lets you focus on hue and saturation differences more accurately. It won't eliminate chromatic contrast entirely, but it removes one major variable.

4. Always check in final context

Never sign off on a color based on a swatch, a style guide tile, or a component in isolation. Always evaluate it in the actual page or screen where it will live, with real content, real images, and realistic surrounding elements. Of all these habits, this one pays off most. It takes two minutes and catches problems that hours of swatch-staring will miss.

5. Adjust for perception, not specification

If a grey needs to read as perfectly neutral next to a warm-toned photograph, you may need to push the hex value slightly warm to counteract the cool shift the viewer will perceive. Design for the eye, not the color picker. When you do this, document the rationale. Add a comment in your design file: "Shifted 3° warm to compensate for simultaneous contrast against hero image." Future designers will thank you for explaining the intentional deviation from the token value.

Before you reach for a new value, though, pick the color with the eyedropper. If the hex is what you specified, the problem is contextual, and sometimes the better fix is environmental: change the surround, add a border, or adjust the container rather than the token. Otherwise teams end up with a pile of ad-hoc "corrective" tokens that nobody can maintain. When you do adjust values, a perceptually uniform space such as OKLCH makes the change you see on screen track the change you made in numbers more closely than sRGB does.

6. Use the effect on purpose

Simultaneous contrast is a tool as well as a hazard. If you want a CTA to look more vibrant without raising its actual saturation, place it on a desaturated or complementary-hued background and let the surround do the work. Monet and Pissarro did much the same with paint.

Rethinking "color accuracy"

The design industry's emphasis on precise hex values, token systems, and "source of truth" color definitions is valuable for consistency. But it can create a false sense of certainty. The color a person sees happens in their brain, not in the pixel, and it always depends on context.

This matters for accessibility work too. WCAG contrast ratios are calculated as mathematical relationships between foreground and background luminance. They don't account for simultaneous contrast effects from surrounding elements. A text/background pair that passes 4.5:1 may still feel low-contrast if surrounded by high-saturation, high-luminance content that fatigues the eye. The math passes and the text is still hard to read.

Some design systems now build this in. Material Design 3's tonal palettes, introduced alongside Dynamic Color in 2021, generate surfaces, containers and text colors as tonal relatives of a single seed color, rather than as arbitrary pairings. Controlling the relationships between layers, not just the individual values, makes perceived contrast more predictable as components move between contexts.

So instead of asking "Is this the right color?", ask "Does this color behave correctly in this context?" That treats color as a perceptual design problem, which is what it always was.

Your eyes are always being lied to

One last look at that client review.

The client says the grey looks blue. This time, instead of pulling up the color picker to prove the grey is neutral, you nod. You understand that the grey does look blue in this context, because simultaneous contrast is doing exactly what the human visual system was built to do. The fix isn't to argue about hex values. It's to nudge the grey a hair warm so it reads as neutral in its actual home.

Simultaneous contrast affects every color decision in every design you ship. You can't turn it off, but once you learn to spot it, you can design with it instead of against it.