Following on from our post on the benefits of using dark mode, we’re going to take a slightly deeper look into colour theory. Is there a colour that is worse for your digital carbon footprint than another?
To answer this, we need to understand the energy intensities of different colours and how this affects power consumption on digital devices.
How to calculate a colour’s energy intensity
There are a number of ways to calculate energy usage. As this handy article from Microsoft’s dev team suggests. But it becomes a little trickier and more niche when you only want to know how a particular colour is affecting it.
The Android development team have thankfully done some great research on the subject as part of their testing for certain apps, such as YouTube. They delivered this keynote as part of their 2018 developer conference on the subject.
“On YouTube, using the dark theme with max brightness on a phone with an OLED screen can reduce power consumption by 43%”
The most energy intensive colours
So, now we know more about energy intensity and how colours affect it on digital devices, it’s time to reveal the most energy-intensive colours.
Blue
According to the study, blue uses 25% more power than Green or Red. That’s quite a big difference.
White
White, like blue, is energy intensive. But white uses nearly 20% more power than blue. Is white the most used colour across the web? Possibly.
Green/Red
Green and red use a very similar amount of power as one another.
Black
Pure black will use the least amount of power on an OLED screen, as effectively, those pixels can be turned off.
What about all the other colours?
Of course, there are millions of possible colours that can be displayed, especially on modern devices, with modern colour possibilities. The above is a tiny tiny list, based on the research carried out by Google for their Android conference in 2018. You can view the keynote here on YouTube.
The idea is to give some additional insight into how a specific colour affects energy usage. These particular findings on colour aren’t based upon a real-world website or particular app, but on testing battery drain and energy usage when the entire screen is filled with that one colour. However, there are further findings of particular apps within the keynote around energy savings based upon dark themes, but not a specific colour.
What is clear from the findings is that colour choices overall can play a key role in making websites, apps and other digital tools more or less sustainable, based on their energy usage.
Should you always use dark colours?
While we personally like using dark colours, based upon their energy-saving benefits, there are some things to consider when using them on your websites.
There are some accessibility concerns around the reading experience of light text on darker backgrounds. So it is important to take this into consideration when using certain colour combinations to make your website as accessible as possible. After reviewing our own website, we made some changes to offer a light and dark mode, based on user preferences. We want to make the site accessible to as wider an audience as possible. We hope this, along with the other changes we have made, will go towards making that a reality.
Concluding
It is clear that darker colours on modern OLED screens can reduce the power consumption of a digital device quite dramatically. It is also clear that specific colours, choosing green over blue as a dominant background colour, for example, will have an effect too. So it is certainly another item on the list of techniques to apply for a more sustainable website.
The choice is yours when it comes to the actual colours used, but perhaps the best decision is to allow your users the make choice of whether light or dark for themselves. Based upon their preferences set in their device’s OS or browser. From their choice, you can set your site’s colours accordingly. You can find out how to do this in our post about the benefits of using dark mode.
References
https://devblogs.microsoft.com/
https://www.researchgate.net/
https://devblogs.microsoft.com/
https://www.youtube.com/