Light vs Dark modes

Although there Rosely has light and dark variants, Rosely is predominantly a bright, low contrast design system. This article explains why.

2 minute read

In recent years, “dark themes” and “dark modes” have become popular in design systems and user interfaces. Some claim that a dark colour scheme improves user experience and readability in low light situations.

However, for people with astigmatism (including myself), light text on a dark background can be hard to read. 1

There are also research that suggests reading comprehension is better with black text on a light background (positive polarity) vs negative polarity. 2

I believe our brain is affected by colours. A dark theme puts us in “night vision mode” where we are constantly on the lookout for danger coming from any angle. Night is when predators prowl, so we are focused on contrast changes and movement. Little flashes of red (error messages) alert us to danger, yellow warnings remind us of tiger stripes, blinking status messages may well be the eyes of a fearsome bogeyman.

Yes, it increases our focus and attention. But at what cost to our long term mental and physical health? I have an inkling what whilst dark themes may increase focus and productivity in the short term, it may increase stress and anxiety levels in the longer term.

I have decided to go the other way and explore soft and gentle low contrast themes that bring back memories of childhood and nursery, when the world was bright and cheerful and full of creative possibilities and potential. Low contrast encourages contemplation and reflection rather than fear or flight, and may improve creativity and innovation in the longer term.

  1. Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon the following way. “People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels. With a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly." ↩︎

  2. Positive display polarity is advantageous for both younger and older adults, Cosima Piepenbrock, S. Mayr, A. Buchner, Published 2013 Psychology, Medicine Ergonomics ↩︎

Last modified 2021-01-03: New colour system and drawings (fcd8627)