Very simply put, dark mode – or negative contrast polarity – refers to designing with and for very dark backgrounds. Even though a very quick look in history shows us that this is no new trend – the first computer monitors showed just green text on black – we have recently been experiencing the rise of the dark mode again, not to mention the launch of Apple’s new iOS in dark mode which has made it all the rage.

What is dark mode  all about?

To provide a quick definition, contrast polarity is the amount of contrast between text and its background: positive contrast polarity (light mode) refers to dark text on light background, while negative contrast polarity (dark mode) refers to light text on very dark background.

Today, the majority of operating systems support negative contrast polarity (dark mode), and are passing it on to mobile applications. The main idea is to show the day (light) theme during daylight, and the dark (night) theme during the evening and night, with the manual option to toggle between light and dark themes also available for the user.

Dark mode was derived from machine control panels – such as car dashboards – having dials, labels and indicators pulsing with brightly coloured light. Even after eventually replacing the majority of such dashboards with digital screens, the trend persisted.

Historically, this was a much higher-level choice. After the first computers with the pure black screens showing a waterfall of green or white text, light mode has been the default condition since we can remember. Light mode was based on the idea of emulating the ink on paper – even though readability and accessibility might not have been the primary concern on the web designers’ mind up back then. 

After the first computers with the pure black screens showing a waterfall of green or white text, light mode has been the default condition since we can remember.

Tweet

It is also a fact that what takes the biggest toll on the phone’s battery life is its screen and this effect is more significant with the rise of lit-pixel displays such as AMOLED, wherein the battery energy consumption by the screen is directly proportional to how much light it is emitting. If saving the energy of your users’ phone is on the product roadmap, considering a dark mode option might be the right approach, as apps with a dark palette consume up to 90% less energy than their light alternative.

Streaming video services such as Netflix or Hulu have dark mode as their default, the reason being that since most viewing time occurs during evening hours, a flashing white screen would be quite harsh on the users’ eyes to view when switching on the app in a barely-lit room – not to mention that movie cover images really stand out against the dark background. Most developers also work with dark mode code editors they find colour-coded syntax easier to read, even though having a lot of text on a dark background is usually not recommended.

The science of dark mode: what research & user studies tell us

The human pupil is the gateway to the retina: through it, light reaches the eye. By default, the human pupil changes size depending on the amount of light in the environment: when there is a lot of light, it contracts and becomes narrower, and when it’s dark, it dilates to allow more light to get in. Smaller pupil sizes make the eyes less susceptible to spherical aberrations (in which the image appears unfocused) and increase the depth of field, so people don’t have to work so hard to focus on the text, which, in turn, means that their eyes are less likely to get tired. 

Early studies in the 1980s suggested that the visual performance of individuals with normal or corrected-to-normal vision (with glasses or contacts) was not affected by contrast polarity, however they were contradicted by the results of two more recent studies published in 2013 and 2017 respectively. The 2013 study included adults from 18 to 33 and 60 to 85, all of which had normal vision or wore glasses or contacts. Their results placed the use of light mode as the winner across both age groups and in all tasks, and when looking into fatigue levels of the participants, there was no significant difference between using positive or negative contrast polarity modes.

The results of both studies placed the use of light mode as the winner across both age groups and in all tasks. That said, dark mode has its pros too.

Tweet

In the 2017 study by a lab in MIT – also studying individuals with normal or corrected-to-normal vision – reported the same results: better performance throughout when users activated light mode, even though the users themselves thought they were not affected. An interesting side note to this study is how positive contrast polarity results showed readability level increased in relation to the decrease in size of the font used, i.e. as the font got smaller, the users could read better. The participants also showed better performance when using light mode in a dark environment, as opposed to what we are led to believe, while during daytime there was no significant difference between using the two different modes.

On the other hand, for readers with certain visual impairments – such as cloudy ocular media – a 1985 study by Legge showed that they fared better when using dark mode and later research into accessibility also recommends having the option to switch interfaces to dark mode for those with low-vision. Furthermore, a study in Nature Research’s Scientific Reports published in 2018 showed that long hours of positive contrast polarity might lead to myopia (nearsightedness). The vascular membrane behind the retina called choroid was significantly thinned when subjects were exposed to positive contrast polarity screens – which is a symptom closely related to myopia – while during dark mode sessions the membrane thickened significantly. The thinning of the choroid was also more prominent in myopic individuals. This leads to the conclusion that while light mode achieved better results, it might carry a long-term price tag.

Designing for dark mode

Colour is made up of three components: hue (where the colour appears on the spectrum), saturation (the intensity of a hue), and brightness, which is the amount of white or black added to the chosen colour.

Contrast is the difference between the amount of brightness of two graphic elements, regardless of their hue.  The larger the difference, the higher the contrast and the better the readability and – therefore – accessibility of the content.  Using just the hue (for example red or green) for text while ignoring contrast level would mean that colourblind individuals would be barely able to read the text; even just a little screen glare disrupts readability in such a scenario. The high contrast rule should be applied throughout your product or website: if users are finding it difficult to differentiate the sections from each other, they will get confused, and confusion leads to frustration and users leaving your site. Keep in mind that contrast levels can be tested for free via online tools such as WebAim or even the Dev tools in Google Chrome as per WCAG standards.

All this is important if a design with at least two different colour palettes is required. Brightness can be changed while hue and saturation can be left untouched. Properly adapted dark mode palettes provide beautiful contrasts without being too harsh on the eye. In the case where a brand’s colours are quite bright, the first step towards a dark mode palette is creating shades – darker versions – of the brand colours.

Designing for dark mode: recommendations and best practices

If you are going to follow research recommendations and provide dark mode option as part of your website or product, follow these best practices for successful dark mode design:

It goes without saying that context and button shape, colour, size and placement also have an effect on how your users will react, and even though you might be religiously following best practices, A/B testing (when possible) is the only way you get to know for sure which is the best decision.

Dark mode is recommended:

1. To have the option for the user: Thus increasing overall accessibility
2. If it matches the spirit and context: Both of your brand and the users’ activities dependant on environment, task and device used
3. When screens are minimalistic and there is not too much going on
4. To support visual hierarchy
5. If one of your aims is to save device energy

Dark mode is not recommended:

1. When there is a lot of text: Reading long paragraphs on a dark background is more difficult
2. For business-based apps: Apps and tools majorly composed of forms and widgets certainly do not offer the right scenario to think dark mode
3. When the design calls for a wide range of colours: Yes, dark mode is fancy, however actually quite limiting in certain ways when it comes to colour palettes, unlike light mode.

Best practices:

• Avoid pure black/white: Pure white on pure black can be tough on the eyes; try going for a very dark grey background and a slightly off white text. That saturation also contrasts well against bright pixels to better express colourful photos.
• Avoid Saturated Colours: Highly saturated colours fail WCAG’s accessibility standard. Less saturated colours from your colour palette improve legibility and reduce visual vibration.
• Accessibility and Contrast: Dark theme surfaces must be dark enough to display white text, ensuring that body text passes WCAG’s AA standard.
• Communicate depth: The overlay should become brighter in relation to the increase in elevation.
• Inverting light to dark does not work: Converting colours from the light to dark variants is not best practice; go for a dark surface colour for large surfaces.
• Text Opacity should be proportionate to emphasis: high-emphasis text should have an opacity of 87%, reduce it to 60% for medium emphasis and further down to around 35% for disabled text.
• Avoid Shadows: Dark mode themes are not a good place for using shadows as the desired effect is completely lost.

Dark mode: yes or no?

To conclude, the decision to go with a dark UI should not be for it to act as the default mode, but to be the alternative for those users who just prefer it that way and those who – according to research – fare better using dark mode, which would therefore be increasing your product accessibility. The designers need to keep in mind their users as the major priority but also very important are the content, the brand, the context, and the device used when designing a dark palette. There should be a strong case for designing in dark mode, and ‘just following a trend’ is not one of them.