Sustainable Web Design: How Dark Mode Can Reduce Your Digital Carbon Footprint

Did you ever think that the colors on your screen could be not just a matter of aesthetics, but have an impact on the sustainability of the site? I was quite surprised to find out, as it just never crossed my mind that a seemingly innocent choice of color could have a greater impact than just making something pretty or not. I was probably just living under some rock (or walking my dog), while the debate over various benefits of dark mode has been booming.

Is dark mode better for the planet? Dark mode and energy savings

The basic concept seems to be pretty simple: the colors displayed on a screen can change how much battery your phone or computer uses. Google, among others, looked into this by comparing how much battery gets used when you use Google Maps in its regular, light mode versus its dark mode. They found that using dark mode can save a lot of battery — up to 63% less energy than the light mode. Another research study conducted at Purdue University, also took a closer look at this idea and found that switching from light to dark mode can save on average 67% of phone battery.

If dark mode saves so much energy, how come we haven’t all switched to it yet? If this research has been out for some years now, are the app makers deliberately wasting our batteries?

Not really. The reality is again not so black and white. The studies have also found that the energy savings are actualized only on OLED displays, and for devices with LCD screens, there is no difference in energy consumption.

OLED displays’ technology illuminates each pixel individually, and hence the brighter colors will require more energy to be displayed, while pixels displaying pure black, can be effectively turned off completely. Meanwhile, LCD screens light their pixels from the edges, so the same amount of power is used even if the screen is entirely black.

This is an important fact to consider, as most laptops have LCD screens, and only about half of the modern smartphones being produced use an OLED display. For better context, the first iPhone to use an OLED screen was released in 2017. Therefore, for any model before the iPhone X, switching to dark mode would not make a difference in energy consumption.

Another point to keep in mind when considering switching to dark mode is that the study tested energy savings at 100% screen brightness. If the device was set to auto-brightness, the savings dropped significantly. Thus, a more realistic difference in energy consumption could be around 15%. It’s also important to note that dark mode doesn’t make a difference when displaying media, such as photos or videos.

Is dark mode better for people? Accessibility and dark mode.

Another factor to consider with dark mode is the accessibility of such an interface. User research, conducted by Nielsen and Norman Group, has found that many people find dark mode easier on the eyes, which even helps them avoid unpleasant headaches. However, individuals with certain eye conditions, such as cataracts, may struggle to read dark text on a light background. Conversely, people with other conditions, for example, those who have myopia, astigmatism, or dyslexia, might find reading light text on a dark background difficult. You can read more about accessibility and dark mode, for instance, in this blog from the Internet Accessibility Bureau.

So should we switch to dark mode?

We have seen that dark mode can not only create aesthetic and modern interfaces but also provide benefits in terms of energy consumption and be essential for enhancing the user experience for people with various conditions. However, a global adoption of only dark mode is probably not the way to go. While it’s surely useful to keep in mind the energy-saving potential of darker colors, we should not go all black.

Ideally, we should find a middle ground and allow users to choose what they prefer. This is what many users are already doing by choosing dark mode in their device settings. As web developers and website owners, we should consider how we can respect their choice, i.e., enable dark mode on our sites.

There are multiple ways of doing this, and I might later write a simplified tutorial on how to enable dark mode in Webflow and your Rails application. In the meantime, there is a great article by CSS Tricks that digs deep into dark mode implementation.