PerfectPalette

Learn Color Theory

Master color with interactive guides.

Perception & Context

Chromostereopsis

A depth illusion where red and blue elements appear to sit at different distances from the viewer, caused by the eye's chromatic aberration.

What it means

When you see red text on a blue background (or vice versa), something strange happens — the red seems to hover in front of the blue, creating an uncomfortable 3D effect. This is chromostereopsis, and it occurs because different wavelengths of light focus at different depths on the retina. Red light, with its longer wavelength, focuses slightly behind the retina, while shorter blue wavelengths focus in front. The brain interprets this focus difference as a depth cue, even though both colors are on the same flat screen.

The effect varies between individuals — for some people, red advances and blue recedes; for others it's reversed, depending on the exact position of the optical axis relative to the pupil. But for virtually everyone, the pairing produces visual discomfort: the eye keeps trying to refocus, causing strain and a perceived shimmer at color boundaries.

Why it matters in palette design

Chromostereopsis is one of the most common causes of "my UI feels uncomfortable but I can't explain why." Placing saturated red and blue in direct contact — especially for text or fine detail — forces the viewer's eye into constant refocusing. This is particularly harmful for readability, data visualization, and any interface where users need sustained focus. PerfectPalette flags high-risk red/blue adjacency in palette review as a potential comfort hazard.

Common confusion

Chromostereopsis vs. color vibration: Both produce visual discomfort at color boundaries, but through different mechanisms. Chromostereopsis is a depth illusion caused by chromatic aberration (focus differences). Color vibration occurs when two saturated colors of similar lightness compete for edge dominance due to minimal luminance contrast. A red-blue pairing can trigger both simultaneously.

Example

A data dashboard uses red (#CC0000) and blue (#0000CC) for its two primary chart series. Where the series overlap or sit adjacent, users report the chart "hurts their eyes." Replacing the saturated blue with a desaturated teal (#2A7B9B) eliminates the chromostereopsis while preserving color distinctiveness.

Learn more

Apply this to your palette

Open PerfectPalette and put these concepts into practice with your own colors.