When black and white isn't... ⏎

A more monochromatic site redesign took me down a wonderful little rabbit hole of how colours impact UX and energy consumption on OLED displays

Vidit Bhargava had put together exactly what I was searching for when I Googled “web design colour value for oled black”.

Black and white images recede on my current website designs dark blue background, and some images clash if they have strong opposing colours. Not ideal when photos are the emphasis on this website.

Figuring that a redesign with a clean, traditional black-on-white palette would be unobtrusive and leave space for some creativity in the typography — an aspect of my site requiring refinement — I turned my attention to the alternative white-on-black, “dark mode”. Much like I try to utilise all the dynamic range available in my photos, I thought I’d use whatever the digital equivalent of true black is.

In print, this particular CMYK value — that varies depending on which printer you ask — visually appears much darker than pure black. Digitally, this would equate to a pixel being completely switched off on an OLED display (which are now commonplace on mobiles). Predictably, digital offers a less nuanced, boring answer of “0”. No secret, trick-of-the-trade black values here!

However, Vidit’s article explained why I don’t want to be using true black, or pure white for that matter. When a pixel in an OLED display is turned off completely, it takes fractionally longer to power it on again than to just transition its luminosity value. That creates the “smearing” effect that Vidit talks about when true black is scrolled on an OLED screen.

After some experiments, I reached the same conclusion as Vidit — and as he recognises, Apple too — and settled on values of 5 and 210 for black and white respectively. The benefit in this instance is that now the text and surrounding design recede, letting the images coming to the fore.

Originally written: