Contrast & visual acuity
Irradiation illusion
The illusion where a light area is perceived as larger than a dark area of the same size.
It is partly caused by light scattering inside the eye, which spreads light areas across the retina. The visual system also blurs the edges of light areas more than dark areas.
The effect is most noticeable for light objects on a dark background (positive contrast polarity).
Irradiation vs. halation
The irradiation illusion is often mistakenly called "halation."
Halation is a photography term for a similar halo captured on film. Irradiation is what we experience when viewing light objects on dark surfaces.
How it affects UI design
Light text on a dark background can appear bolder and larger than the same text on a light background.
When creating a dark mode, consider using a lighter font weight for text to match the appearance of light mode.
Light icons and borders on dark backgrounds can also appear thicker, while thin dark gaps between light elements can appear narrower.
Sources:
- Irradiation illusion. Wikipedia. https://en.wikipedia.org/wiki/Irradiation_illusion
- Kremkow, J., Jin, J., Komban, S. J., Wang, Y., Lashgari, R., Li, X., Jansen, M., Zaidi, Q., & Alonso, J.-M. (2014). Neuronal nonlinearity explains greater visual spatial resolution for darks than lights. Proceedings of the National Academy of Sciences, 111(8), 3170–3175. https://pmc.ncbi.nlm.nih.gov/articles/PMC3939872/