Designing a dark theme for iPhone with OLED display

Why using a black background for a dark theme is a bad idea

True dark themes are very popular in apps that run on OLED devices, and so when the iPhone X came out, it seemed obvious to use a theme like this for LookUp, which released such a theme earlier that year.

However, it quickly became clear that using black backgrounds on OLED displays was a bad idea in terms of user experience.

Black smear

In an OLED display, a black pixel is essentially a disabled pixel. It does not consume energy. This is why an OLED display is capable of displaying such rich dark colors and why dark themes are energy efficient on screens of this type.

However, when an interface that uses a black background theme starts displaying content on the screen, the pixels must turn on before they can display the content. So when you scroll content against a black background, pixels have a hard time keeping up with scrolling, resulting in lubrication pictures on the screen.

Solution: use a dark gray color

I suggest simply using a dark gray tint to solve the loss of definition problem. But since OLEDs are so good at displaying dark colors and dark backgrounds affect battery life, I thought I should use a shade close to black, but gray enough to eliminate the blurry effect of black:

Don t OLED displays save energy if the pixels are black?

Not really. An OLED display draws no power on a completely black screen and draws maximum power on a completely white display. However, these are not the only display power states. As you move from black to white, energy consumption gradually increases. OLEDs, unlike LEDs, rely on lighting and brightness.

Moreover, there are no completely black or completely white interfaces. Usually it is a mixture of both colors. So, to understand the power consumption curves of an OLED display, the value is used medium brightness (APL)… This is a measurement of how white the screen is. 0% is the screen is completely black, and 100% is the maximum brightness.

You can easily measure the APL of a specific screen state by importing an image into Photoshop and calculating a percentage for the average of the histogram.

Power consumption on OLED displays for black and dark gray themes

Analysis of OLED displays from AnandTech and NotebookCheck has shown how power consumption depends on the brightness level of an OLED display. We can see that when the screen is completely black, the power consumption of the OLED display remains the same at any brightness, the curve gradually gets steeper for white screens. But the curves for about 5% of white screens and less than 1% of bright screens are almost the same, except for a slight change in the higher brightness ranges.

While I was unable to find power consumption versus brightness curves for iPhone OLED displays, there are two points to consider when calculating OLED display power consumption. First, the difference between a completely black screen and a dark dark gray screen is negligible, but a white screen usually draws more power. Secondly, even with a black screen, the OLED display consumes a definite amount of energy.

So it s safe to assume that dark themes perform better than light themes in terms of power consumption on OLED devices. But for less power, you don t need them to be completely black.

Comparison of average brightness level for LookUp app screens

As you can see, there is very little difference in the average brightness levels of a really dark background, i.e. RGB (5) versus a black background, i.e. RGB (0). Compare this to the overall trajectory observed in the power-to-luminance curves. You will see that the difference in power consumption is very small.

Is the energy saving of the black theme really significant enough to justify the black smear problems in technology OLED? Not.

Counteracting the effect of halation

Black smearing isn t the only problem with true dark themes. Placing white text on a black background is also a legibility issue.

Halation is an effect caused by light propagating beyond its borders, creating haze around the edges of a bright image.

Simply put, when you place white text on a black background, the white text color tends to blur on a black background. Because of this, the eyes strain harder to read the text.

This tension is heightened when the text is too large or if the person suffers from astigmatism (quite common a defect in vision caused by an abnormality in the shape of the lens, resulting in distorted images). So this is an accessibility issue.

Although the WCAG text accessibility guidelines provide a minimum contrast ratio for text, there is no hard limit on maximum contrast ratio. So here I took an example from Apple s Dark Mode in Safari Reading Mode, which uses light gray for text.

Dark themes provide a soothing experience in low light conditions and are energy efficient on OLED displays. But it can be difficult to match colors for dark mode, especially in OLED displays, where small changes can play a role in the user experience. These were just a few of the considerations taken into account when designing the dark LookUp theme for the iPhone X.

Sources:

OLED power consumption

1. AnandTech: Energy Efficiency Analysis of AMOLED Displays
   https://www.anandtech.com/show/9394/analysing-amoled-power-efficiency
2. AnandTech: Exploring iPhone Xs and iPhone Xs Max Displays
   https://www.anandtech.com/show/13392/the-iphone-xs-xs-max-review-unveiling-the-silicon-secrets/8
3. Notebook Check:
   https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html
4. Android Dev Summit

Halation effect

1. UX Movement
2. Thomas oddie

3. Best practices for composing web text and web services to improve accessibility for dyslexia.