Designing a Dark Theme for OLED iPhones

Why using black backgrounds for your true-dark theme is a bad idea

True dark themes are quite a rage for apps that run on OLED devices, and so when the iPhone X first came out, it seemed like an obvious decision to offer one for LookUp which had released a themes menu earlier that summer.

However, it didn’t take much time to realise that using a black background on OLED displays wasn’t a great idea for user experience.

Black Smearing

In an OLED display, the black pixel is essentially a pixel that’s turned off. It doesn’t consume any power. This is why OLED are able to show such rich dark colours and why dark themes are power-efficient.

However, When an interface that uses a black theme for its background starts displaying content on the screen, the pixels needs to switch on before they can display the content. So, when you’re scrolling through the content in a black background, the pixels find it hard to keep pace with your scrolling, resulting in a smear on the screen.

Solution: Using a dark grey colour.

My solution to the problem was to just use a shade of dark grey to solve the smearing issues. But because OLEDs are so good at displaying dark colours and the darkness of a background tends to impact the battery life performance, I felt I should use something close to black, but just grey enough to eliminate the black smearing:

A grey scale value of 5 (where 0 is black and 255 is white) is just black enough to look like black to the human eye, but grey enough to stop black smearing.

Don’t OLED displays only save power if the pixels are black?

Not really. An OLED display will not consume any power for an all black screen, and will consume the maximum amount of power of for a completely white display. However, these aren’t the only two states of power consumption on the display. As you move from black to white, the power consumption gradually increases. OLED displays unlike LED displays depend on the luminance and brightness.

Moreover, any user interface isn’t completely black or completely white. It’s usually a mixture of both. So, to understand the power consumption curves of an OLED display, an Average Picture Level (APL) value is used. It’s the measure of how white a screen is. 0% being completely black and 100% being completely bright.

Y ou can easily measure APL of a particular screen state by importing an image to Photoshop and calculating the percentage for the mean histogram value.

Power Consumption on OLED for Black vs Dark Grey Themes