Red floats, blue sinks

Put a saturated red bar and a saturated blue bar on a black background and they will not appear to lie in the same plane. The red comes forward, the blue recedes. This is chromostereopsis, it happens in the eye rather than in the image, and on a neon-on-dark interface it is a real problem rather than a curiosity.

Alternating bars. Left: fully saturated red and blue. Right: the same hues pulled toward the middle. Look at the left for a few seconds.

On the left the bars refuse to settle into one surface, and if you track them as they move your eyes have to keep re-converging. On the right the same arrangement sits flat. Nothing changed except how far the two hues were pushed toward the ends of the spectrum.

Why the eye does this

The lens has chromatic aberration, like any simple lens: it does not bring every wavelength to focus at the same distance. Long wavelengths focus slightly behind short ones. On top of that, the pupil is usually a little off the optical axis, so the two eyes receive slightly different chromatic parallax for red and blue.

Your visual system interprets that difference the way it interprets any binocular disparity: as depth. So the apparent separation is not imagined and cannot be turned off by knowing about it. Its direction can even flip between people depending on their pupil offset, which is why a small number of viewers see blue in front.

Why it matters on a dark interface

The effect is strongest with saturated hues at the ends of the spectrum, at high contrast against a dark ground. That is exactly the neon-on-dark palette. So a UI that puts red and blue elements on black is asking the eye to hold two focal planes at once, and sustained reading that way is genuinely fatiguing rather than merely ugly.

It also quietly breaks layout intent: a red label on a blue panel will not read as sitting on the panel, it will read as hovering above it, regardless of how the hierarchy was drawn.

What to do about it

  1. Do not place fully saturated red and blue adjacent on black. That is the worst case, and it is easy to avoid without giving up the palette.
  2. Pull the hues inward. Cyan instead of pure blue, orange instead of pure red. Both stay unmistakably neon and the separation largely goes away, which is the right panel above.
  3. Separate by value as well as hue. If two elements differ in lightness they no longer depend on hue alone to read apart, which helps here and is required for color vision deficiency anyway.
  4. Never set body text in a saturated hue on black. If it must be colored, keep the text near-white and put the color in a rule, an icon, or a background.

Rules of thumb

  1. Saturated red advances, saturated blue recedes, on a dark ground.
  2. The effect scales with saturation and with contrast against the background.
  3. It is an optical fact, not a preference. Knowing about it does not reduce it.
  4. Cyan and orange keep the neon read and mostly dodge the problem.
  5. Test any red-on-blue pairing by looking at it for ten seconds rather than one.

All 61 notes How to use them Credits