web app – Why red and blue boxes in close proximity seems to shift position vertically under a dark background

At first I thought this was going to be a ‘contrast ratio’ or ‘colour difference’ effect from the 1 pixel darker borders (or maybe it’s just aliasing) around each button. But the coloured border effect is a constant colour all the way round, and the red button looks lower at the top and the bottom when compared to the blue.

So I suggest this is an effect called Chromostereopsis. It is usually observed using a target with red and blue bars and an achromatic background – exactly as you have here. You can perceive a positive or negative chromostereopsis when the red bars are perceived in front of the blue or vice versa, explaining why some people might see the red button higher or lower than the blue.

The visual effect may be a result of chromatic aberration resulting from “the differential refraction of light depending on its wavelength, causing some light rays to converge before others in the eye”. But you can read plenty more about it below, rather than me pasting chunks of the internet! 🙂

Ref: https://en.wikipedia.org/wiki/Chromostereopsis