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.
You 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
While, I couldn’t find Power Consumption v/s Brightness curves for iPhone’s OLED displays, there are two points to note for OLED power consumptions. First, there’s little variation between a completely black screen and a very dark grey screen, but a white screen generally ends up consuming more power. Second, even with black screen, the OLED display consumes some power.
Therefore, we can safely assume, that on OLED devices, dark themes tend to perform better than light themes in terms of power consumption. But you don’t need them to be entirely black to consume significantly less power.
Comparing the Average Picture Level for LookUp’s screens
As you can see, there’s a very small difference in the average picture levels of a really dark background i.e. RGB(5) vs a black background i.e. RGB(0); compare that to the general trajectory seen in a power consumption to brightness curve, there’s very little power consumption difference between the two.
Are the power savings of a black theme really significant to justify the black smearing problems with OLED technology? Nope.
Countering Halation Effect
Black Smearing isn’t the only problem that true-dark themes face. Placing white text on black backgrounds is a readability problem as well.
Halation Effect can be defined as the effect caused by the spreading of light beyond its proper boundaries to form a fog round the edges of a bright image
Simply put, when you place white text on black background the white colour from the text tends to bleed into the black background. Putting a slightly greater strain to read.
This strain becomes far more accentuated when the text is too large; or if a person suffers from astigmatism (a fairly common, eye defect caused by a deviation from spherical curvature, which results in distorted images). So, it’s an accessibility issue as well.
While, WCAG guidelines for accessible text provide minimum contrast ratio for the text, there’s no hard limit on the maximum contrast ratio. This is where I took cue from Apple’s own dark mode in the Safari Reader View, which uses a slightly light grey colour in their text.
A slightly light grey text on a dark grey background still provides a great contrast, but is more legible than white text on black background.
Dark Modes offer a soothing experience in low-light conditions and are power efficient on OLED displays. But it can be tricky to pick the colours for a dark mode, especially in OLED displays, where slight variations can play a role in the user experience. These were just some of the considerations taken into account for LookUp’s dark mode on iPhone X devices.
Sources:
Power Consumption of OLED Screens
- AnandTech: Analysing AMOLED Power Efficiency
https://www.anandtech.com/show/9394/analysing-amoled-power-efficiency - AnandTech: Display Measurement for iPhone Xs and iPhone Xs Max
https://www.anandtech.com/show/13392/the-iphone-xs-xs-max-review-unveiling-the-silicon-secrets/8 - Notebook Check:
https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html - Android Dev Summit
Halation Effect
- UX Movement
https://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/ - Thomas Oddie
https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/ - Layout guidelines for web text and a web service to improve accessibility for dyslexics
https://www.researchgate.net/profile/Ricardo_Baeza-Yates/publication/239761586_Layout_guidelines_for_web_text_and_a_web_service_to_improve_accessibility_for_dyslexics/links/02e7e53313bbc5c9bc000000.pdf
