03 How dark mode has crept up on us

Back in the days when dinosaurs 🦖 roamed the Earth, early computer systems were always in dark mode as characters were inverted. The Mac brought WYSIWYG and what we now know as light mode, or ‘printed paper’ mode. This became the default, with designers rarely even thinking about other colour palettes.

Although prevalent in certain digital environments, ‘dials-and-lights’ interfaces (car dashboards spring to mind) have always been dark, controls and readouts follow established *dark patterns.

*Note: Dark UX patterns are something different (and evil 😈)

03.1 Why is dark mode now a ‘must-have’

An app with a dark palette consumes as much as 90% less energy, especially with AMOLED screens. For battery saving reasons there is enough justification for your clients to build in design capacity for this mode. Be mindful of your users’ environment, a bright rectangle glaring at them in a dim room is not good. They might simply choose not to use your app, web site, control panel, interactive screen, etc

Most streaming-video services default to dark mode as users do much of their viewing at night. This is why TV have dark bezels – right? Dark backgrounds reduce the overall brightness of the display, so can be used in any lighting condition. A typical dark-mode page is five times less bright than exactly the same content in light mode.

03.2 Defining a dark colour palette 

Designers have been reducing contrast in light-mode for years.

• Black text is rarely black anymore (and not just disabled text)

Note the emphasis is on contrast. The term colour contrast is misleading. To give context, let’s map out a mini deep-dive on colour theory.

03.3 Quick recap on colour theory

• Hue—The spectrum on which a colour appears.
• Saturation—How intense a hue appears.
• Brightness—The amount of black or white that is added to a colour.

To most designers, developers, and product managers—the term colour means the hue part only. Red or green, for example. Contrast implies that contrast relates to hue, but it does not. Contrast indicates the difference in brightness levels of two elements. 

Small differences equal low contrast, large differences high contrast – so contrast is a comparison.

03.4 Contrast in Dark Mode

When dark-mode palettes are implemented properly, their low overall output should provide extremely high contrast, without anyone on a project team worrying that the display is too harsh.

But you still need to keep the contrast as high as possible, which trips up a lot of designers because dark-mode design suggestions, guidelines and inspiration too often throw away everything we know about colour theory, especially; 

• Contrast
• Visibility
• Readability
• Universal design

Even Google suggests very dark, highly saturated accent colours, but lots of very low-contrast, grey backgrounds. Discarding simple lines around card edges and replacing them with dark-grey backgrounds doesnt solve the contrast argument. Of course, this is just one opinion (albeit the wolds’ largest search company 😉) – white keylines can work as well.

03.5 Grey is not the only fruit!

📌 Differentiation is key. 

Hollow icons for available tabs and solid icons for the selected tab, while not a colour theory issue, is an effective way to differentiate them. Using simple text for tabs, in grey or red is an issue for colorblind, not acclimated to night or glare.

Bad contrast impairs readability and users become confused when part of the page scrolls, but other parts do not. Contrast and differentiation is not not just text and icons but the entire experience.