Why does grey text look blue on orange?

Put a neutral grey label on a warm orange card and it picks up a cool, slightly blue cast. Put the exact same grey on a teal card and it turns faintly warm. The hex code never changed, and your eyedropper will swear it’s the same color both times. Your reader won’t, because the eye doesn’t measure color. It compares it.

The eye is not a light meter

The effect is called simultaneous contrast, and it has been written down for almost two centuries. The chemist Michel-Eugène Chevreul ran the dye works at the Gobelins tapestry manufactory in Paris, and the story usually told is that weavers complained some of his blacks looked dull. His chemistry found nothing wrong with the dye. What was wrong was the wool woven next to it. In 1839 he published his law of simultaneous contrast: colors placed side by side look as different from each other as they can, in both hue and lightness.

In practice that means a color gets pushed toward the opposite of whatever surrounds it. On a light background, a mid-tone looks darker. On a dark background, the same mid-tone looks lighter. And on a saturated background, a neutral picks up a tint of the background’s complement: blue-ish on orange, warm on teal, greenish on magenta.

The best-known modern demonstration is Edward Adelson’s checker shadow illusion from 1995. Two squares on a checkerboard, one in the light and one in a cast shadow, are printed in the identical grey, and almost nobody can see them as the same. Adelson’s point was that the visual system isn’t trying to report the light hitting your retina. It’s trying to work out what the surfaces in front of you are, and it uses the surroundings to do it. That’s useful when you’re looking at a real room. On a flat screen, where you specified every pixel, it means the colors you picked and the colors people see are two different sets.

Where it shows up in an interface

You don’t need a contrived illusion to hit this. It turns up in ordinary screens, usually as a vague sense that something looks “off” that nobody can pin to a value.

Neutral greys on colored surfaces. Secondary text, dividers, and disabled states are almost always a grey picked once on a white artboard. Drop that grey onto a colored card, banner, or onboarding screen and it stops looking neutral. On a warm brand color it reads cold and a little dirty. The usual reaction is to nudge its lightness, which doesn’t help, because the problem is hue.

The same accent on light and dark. A brand color that looks rich on a white page looks lighter and louder on black, because the dark surround pushes it brighter. That’s one reason a dark theme built by flipping the background and keeping every accent tends to look harsh. The accent didn’t change; its neighbour did.

Tinted surfaces next to each other. Two cards in slightly different blues, side by side, look further apart than either does on its own. Put a near-white panel against a saturated header and the panel can look faintly tinted with the header’s complement. If a teammate says your white “looks pink,” check what’s next to it before you check the hex.

Charts and status colors. A legend swatch on a white legend panel and the same color as a thin line across a dark plot area won’t look like a match, and people do try to match them.

Why your tools won’t catch it

Every tool you normally reach for looks at colors one or two at a time. The eyedropper reports a single pixel. A palette panel shows each swatch on its own neutral ground, which is exactly the context the color will never ship in. And a contrast checker computes a ratio from the relative luminance of two colors: text and background. That ratio is the right floor for legibility, and you should still meet it, but it says nothing about hue shift and nothing about what the rest of the screen is doing around the pair.

So a grey can pass AA on your orange card with room to spare and still look like the wrong grey. Passing the number means people can read it. It doesn’t mean it looks intended.

How to pick colors that hold up in place

You can’t switch the effect off, but you can stop fighting it and start using it.

Judge every color in its final surroundings. Make the decision on the real screen, at real size, with the real neighbours, not on a palette page. If you keep a palette document, show each neutral on each surface it will actually sit on, not on white.

Tint your neutrals toward the surface. The induced shift pulls a grey toward the complement of its background. Countering it is simple: give the grey a small amount of the background’s own hue. A secondary text color on an orange card should be a warm grey, not a pure one, and it will read as neutral precisely because it isn’t. This is also why design systems that ship one set of greys per surface tend to look calmer than ones with a single global grey ramp.

Give dark mode its own accent values. If the dark surround makes your accent look lighter and more saturated, pull it back a step for dark mode rather than reusing the light-mode value. Compare the two side by side, each on its own background, and adjust until they look like the same brand rather than the same number.

Isolate a color to check it. When you’re not sure whether a color is actually off or just looks off, take its surroundings away. Copy the element onto a neutral mid-grey canvas, or cover everything around it. If it looks fine in isolation and wrong in place, the fix is the relationship, not the value.

Watch thin details separately. Large areas push away from their surroundings. Very fine detail, like hairlines, thin strokes, and small patterned text, can do the opposite and blend toward the color around it. Vision researchers call that assimilation, or the spreading effect. If a thin grey divider on a colored panel looks tinted with the panel’s hue rather than its opposite, that’s what you’re seeing, and the same rule applies: check it at its real size.

Your store screenshots sit on two backgrounds you didn’t pick

Store screenshots get this twice over. Each frame is a small composition of its own: a background color, a headline, and a phone full of your app’s UI, which is usually full of neutral greys designed for white. Set that UI on a saturated backdrop and its greys shift exactly as described above, which is one reason a backdrop pulled from the screenshot’s own colors usually looks more cohesive than a contrasting one chosen from a palette.

Then the frames are shown side by side in a row, so each background is judged against the next. And the whole row sits on the store page itself, which is light or dark depending on the viewer’s system appearance. A frame that looks balanced in your editor on a grey canvas can look heavier on a white page and brighter on a black one. Before you upload, look at the full set in a row, on white and on black, at roughly the size the store shows it.

None of this is a reason to distrust your colors. It’s a reason to stop judging them alone. Every color on a screen is read as a relationship with its neighbours, so that’s the thing to design.