You have likely come across the claim that dark user interfaces (AKA dark modes) are eco-friendly because they use less energy. Unfortunately, this is not true.
I am an enormous advocate of dark modes when it comes to design. I prefer all my websites and applications to run in their dark colour schemes. In the spirit of "trust no one Mr Mulder", I decided to test whether dark modes help reduce energy consumption.
I prepared a simple webpage displaying the same content in two modes, bought an energy meter and connected it to the monitor and then conducted measurements. The results are presented below.
UPDATE 2023-02-26. Several people pointed out that I only performed measurements on LCD monitors and did not consider OLED monitors. Indeed - in the latter's case, we will notice a difference in electricity consumption. However, in my defence, it will take some time before OLED displays replace LCDs on the market (if ever, considering their prices).
More on this topic in the article: https://dodonut.com/blog/does-dark-mode-save-battery/
My experiment confirms that switching between dark mode and light mode on a website has a marginal effect on the energy consumption of an LCD monitor.
If the user has manually set the brightness and contrast levels on their monitor, the energy consumption difference between dark and light modes is only 0.1 Wh. Note that the unit used is 0.1 watts per hour, not the commonly used kilowatts per hour – very little.
The situation looks better if the monitor has a feature of automatically adjusting its parameters to the displayed colours (e.g. advanced contrast ratio or dynamic contrast ratio). The monitor with such a feature automatically changes its parameters when switching between dark and light modes. The difference in energy consumption came to about 30%.
| mode | energy consumption (Wh) |
|---|---|
| light mode | 15.8 |
| dark mode | 11.2 |
Much more significant energy savings can be achieved by the user manually reducing the brightness and contrast of their monitor. Below are the measurements taken on my equipment:
| brightness | energy consumption (Wh) |
|---|---|
| 100 | 15.6 |
| 75 | 13.4 |
| 50 | 11.3 |
| 25 | 9.1 |
| 0 | 7.1 |
Let's think if the generated savings are significant enough to bother with. Working on an almost wholly dimmed monitor can be uncomfortable on a sunny day, so let's take a less extreme scenario and reduce the screen brightness to 50%.
The difference in energy consumption between brightness 100% and 50% is approximately 4 Wh. In Poland, we work an average of 168 hours per month and 11 months per year, which gives a saving of about 7 kWh. 7 kWh is equivalent to:
- about 6 PLN / 1.25 EUR (according to prices for households at the beginning of 2023),
- about 5 kg of CO2 emitted into the atmosphere (unfortunately, the emission index of the Polish power industry is three times higher than the European average),
- the amount of CO2 emitted into the atmosphere that ONE tree can absorb in a year.
To additionally show the small scale of potential savings:
- the average annual electricity consumption of a household in Poland is 1500-2000 kWh (I can confirm this based on my bills),
- the laptop to which the tested monitor was connected consumed about 24 Wh simultaneously, and the standing next to lamp 10 Wh.
Since the potential savings are so small, should designers and front-end web developers bother with implementing dark mode in their projects? Yes, but mainly because of the positive user experience. As I mentioned, I like working on dark interfaces and get irritated if the sites I browse don't have them. Mainly if they are sites intended for engineers or programmers.
However, we should not do green-washing and proclaim that dark background is eco-friendly. It is not. And if we want our projects to generate a smaller carbon footprint, we should focus on other accents in our work – more on this in my following articles.
-- tools I used for the experiment --
- iiyama ProLite XU2294HSU-B1 monitor.
- ASUS MB16AH monitor (BTW - this small monitor is even better because, depending on the settings, it consumes only 4-6 Wh!!!).
- The website I displayed in full-screen mode during measurements: https://lukaszjedrasiak.github.io/playground--hugo/lorem-ipsum/
- Cheap no-name electricity consumption meter. It may need to be better calibrated, and the actual power consumption differs from the displayed, but this does not affect the experiment results. What I tested in measurements is the DIFFERENCE in power consumption between different modes, not its absolute value.
amateur power consumption measuring station
Follow me on LinkedIn: www.linkedin.com/in/lukaszjedrasiak
Top comments (7)
This has been documented a lot already (e.g. see this article). It basically depends on screen type; but the possible energy savings are pretty negligible; so yes dark mode !== eco-friendly
It's cool that you went to the trouble of a practical experiment.
Personally, I don't enable dark mode because I think it saves energy; I enable it because I find it easier to look at for long periods.
I use dark mode not because of the energy issue but because it doesn't hurt my eyes like light mode. But this article also gave insights into something I never wondered
You use dark mode because you think it saves energy.
I use dark mode because it's easier on my eyes.
We are not the same.
I know but, did you test it for amoled :-)
You're right - I didn't measure the power consumption of OLED monitors. My mistake - I don't have one at home or work :( I've added info about it in the article.
However, the fundamental question remains unchanged. Will reducing energy consumption from 16 Wh to ~4 Wh make any difference to the user's budget or the global climate? Looking at my provisional calculations, we should look for savings elsewhere.