Why shouldn't "dark mode" have a pure black background? Here's Google's reasoning

iOS 13 has reached Beta 8, and the official release of Android 10 is just around the corner. Now, if you dig a little in Apple and Google's own apps, you will find that many apps have adapted dark themes or dark themes before the official system updates are released. Their specific implementation effects are slightly different: some use dark blue backgrounds like Twitter, and some are like the dark gray widely used in Google's own apps. Some apps even have built-in pure black themes specifically for OLED devices...

As a system-level feature that has been fully promoted from macOS and Windows to iOS and Android, the dark theme seems to have ushered in its own "first year".

The necessity of dark themes

No matter how powerful the theme engine is, whether it has a dark theme has become a "must-test question" for many people when evaluating the appearance design of an application.

Why is a dark theme necessary? We can answer this question from two aspects.

First of all, it is naturally for health reasons. Almost all smartphones are equipped with the function of automatically adjusting the screen brightness. The purpose of this function is to keep the phone screen at a reasonable display brightness when the light brightness of the environment we are in changes - neither too dark to make the screen content difficult to identify, nor too bright to make people feel glaring.

The difference between ambient light and screen brightness is magnified at night | Image: Pixabay

If we are in the dark, the difference between the brightness of the environment and the brightness of the mobile phone screen is further magnified, and the visual stimulation brought by the brightness contrast is more obvious. A slightly extreme but very common example is that if we stare at a bright light source for a long time in a dark environment, the moment the bright light source goes out, the surrounding environment that was barely visible to the naked eye will become pitch black to us (it will recover after a while, which is related to rod cells).

Therefore, reducing the screen brightness as much as possible and narrowing the gap between the screen display content and the ambient light intensity is an important prerequisite for ensuring that we can play the computer comfortably at night. After the widespread use of OLED screens, their characteristic of displaying black without emitting light also makes it possible to further reduce the screen brightness.

However, for OLED screens, the positive impact of using dark themes on device battery life is also one of the reasons why people are keen on dark themes.

At the 2018 Android Developer Summit held at the end of last year, Google announced its research results on the relationship between OLED, dark themes and mobile phone battery life for the first time: dark themes can reduce power consumption of OLED devices by 63% at the same brightness; when displaying monochrome static images at the highest brightness, power consumption from least to most is black, red, green, blue and white.

Therefore, it is not difficult for us to predict that just as major manufacturers have more or less built various forms of "digital health" functions within their own ecological experience this year, dark themes will also become a major trend on mobile operating system platforms in the next two years.

"Pure black" is only an option

However, while some users are eagerly looking forward to the full arrival of the "dark theme era", there is another voice that believes that the actual effect of the dark theme is not very "eye-friendly".

The problem is with OLED and pure black themes.

If we base our conclusion on the research results published by Google above, we will naturally come to the conclusion that "ideally, using a true black theme on an OLED device is the most power-efficient." This is why many apps provide users with a true black theme as an additional night mode option.

However, these seemingly "conscientious" OLED themes are not perfect from the perspective of design specifications and actual viewing experience.

Take Google as an example. In its latest Material Design guidelines, Google describes dark themes as "a necessary supplement to the default or light themes." This necessity has a condition that cannot be ignored - in addition to being able to reduce screen brightness as much as possible, an excellent dark theme design should also meet the minimum color contrast requirements.

Therefore, the first reason why Google does not recommend blindly matching dark themes with pure black backgrounds is actually from the perspective of barrier-free design.

This color contrast requirement has actually been reflected in Android 10: in the initial Beta 1 test version, we can see a lot of pure black dark UI in Pixel Launcher, including the pop-up menu when long pressing the desktop, the application shortcut list, etc.; and the same UI has been changed to gray in the later Beta 4, a gray with a base color of #121212 and slight differences in brightness in different interfaces.

The main reason for using gray instead of pure black as the main color of the dark theme is contrast. Specifically, Google stipulates the following principles in the design specifications of the Material Design dark theme:

• Contrast: The contrast ratio between dark UI and pure white text is at least 15.8:1
• Hierarchy: Use brighter colors to create a sense of hierarchy on high-height interface elements
• Desaturation: Desaturate primary colors to ensure they meet the 4.5:1 standard of the Web Content Accessibility Guidelines at all levels of the interface.
• Limited colors: The main interface should be designed in dark colors, and a few areas should use appropriate accent colors (bright colors, desaturated colors, or bright saturated colors)

Compared with pure black background and white text, gray background can create a more comfortable contrast experience while ensuring sufficient text readability, truly reducing user visual fatigue.

However, Google recommends using dark gray instead of black as the main color of the dark theme. Another reason comes from Material Design itself.

Material Design has undergone several updates and changes since its birth. Some of the things that Google initially insisted on in this design language ended up being self-denied and changed every day, while others remained unchanged from the beginning to the end - shadows and layers belong to the latter.

The change of light and shadow is often accompanied by the alternation of light and dark, but on a pure black background, all projections will lose their meaning. In other words, while the pure black background solves the problem of being too bright for night use, it also erases the basic characteristics of Material Design.

However, dark gray can well keep the different interface elements in a clear and intuitive hierarchical relationship under the dark theme, so that the core characteristics of Material Design are not destroyed. Here Google introduced the concept of "surface light source".

For example: when the Z-axis height of a dark gray component is low (farther away from the user), the surface light is relatively dark. When the Z-axis height of this component is raised upward (closer to the user), the intensity of light projected on this component increases, the brightness of the component surface becomes higher and higher, and the dark gray becomes light gray.

Light themes use shadows to create depth, while dark themes use highlights.

summary

Looking at the official dark theme design specifications of iOS and Android, it is not difficult to find that the two have many similarities: meeting the minimum color contrast of 4.5:1, focusing on comprehensive adaptation of barrier-free mode, and having a similar look and feel to light mode... For OLED devices, a pure black background can certainly achieve the best power saving effect, but barrier-free design has always been a crucial part of the interactive design of mobile operating systems. In the process of adapting to the dark theme, it is not advisable to directly abandon the core features of Material Design for fear of choking.

Therefore, adapting to the dark theme is not as simple as "changing the background to a pure black". We also hope that more domestic applications can adapt to more comfortable dark theme solutions as soon as possible according to the platform design specifications.