The dark side of green web design

Here at Wholegrain Digital, we’re always trying to find ways of reducing the energy consumption of websites while still delivering great user experience. 

One of the first times I ever came across the concept of low energy web design was in the early 2000’s when Google made its homepage dark for Earth Day. They said that the dark colour scheme used less electricity to display on people’s screens than the standard Google homepage with a white background. 

It caught the attention of environmentally minded designers like myself and inspired a number of other websites to turn to the dark side, but that was in the olden days when people still had large Cathode Ray Tube (CRT) monitors, if you’re old enough to remember those. 

Soon after, people started switching to Liquid Crystal Display (LCD) flat screen monitors and laptops with LCD screens, which were much more energy efficient. A key difference of LCD screens is that they have a single backlight that illuminates the whole screen. This means that no matter what colour is displayed, even black, the light is always fully on. The idea of dark web design saving energy therefore became irrelevant and was mostly forgotten for the next decade or so.

More recently, screen technology has been changing again, with many new devices using OLED technology. OLED stands for Organic Light-Emitting Diode, and its basically a film with diodes that self-illuminate. Despite being called organic, they aren’t Soil Association Certified. Organic simply means that they are made from a carbon based material.

A key difference of OLED screens is that instead of having a single backlight, each pixel is itself a tiny LED lightbulb that lights up individually when it is needed. This delivers better picture quality, but it also means that dark colours use less electricity because less of the screen is illuminated. 

With the advent of OLED technology, dark colours in web design suddenly makes sense again as a way of reducing energy consumption of digital services.

Another big thing that has changed since Google pioneered its dark theme in the early 2000’s is the advent of smartphones and mobile devices. Remember that the iPhone didn’t launch until 2007, so the world of digital was a very different place before that. 

Power consumption is even more important for mobile devices than it is for computers used at home or at the office, because power consumption directly impacts battery life. We therefore now live in a world where reducing screen energy is not only good for the environment, but also provides a practical benefit to the end users of any website or online service. OLED screens are not only efficient in their own right but can also help batteries last even longer when dark backgrounds are used.

Google found that the Google Maps mobile app can use up to 63% less screen energy in night mode compared to standard mode on their phones with OLED screens. 

Curiously, they also found that while white pixels use the most energy, blue pixels use considerably more than red and green. So the colours that we choose in our designs now matter, not just for brand presentation, user experience and accessibility, but for the environment and for mobile battery life.

I did a back of the envelope calculation factoring this into the overall energy consumption of a website including data centers transmission networks, the CPU energy on the user’s device and estimated that a design with a dark background could save about 10% of total energy compared to a design with a white background on OLED screens.

As the climate crisis deepens, we need to save every drop of energy that we can. Shifting websites away from generic white backgrounds towards darker tones can only be a good thing environmentally. 

Here are just a few examples of websites that have successfully embraced darker colour palettes.

Indeed Innovation wanted to fully embrace a low energy design for their new website and digital communications and changed their brand colours to facilitate a darker palette. This is a bold move and is a great example of being prepared to challenge the status quo to make things better.

Do Nation redesigned their website to reduce energy and carbon emissions, embracing fun vector illustrations and a dark yet vibrant colour palette that is still easy on the eye.

International Alert had a primarily white website and opted during a recent redesign to use dark colours in the header, footer and some key areas of the website.  The objective was not specifically environmental, but instead aimed to increase authority and reflect the serious nature of the work that they do. Slightly reduced energy consumption is a nice side effect. 

The Wild Souls website is one of my personal favourites. It’s a great example of confident use of colour to create a rich brand experience and emotional connection, and it just happens to use less energy too. Delicious!

I’m glad you asked! When we redesigned our website a few years ago, we had only just learnt that colours impact energy consumption on modern screens. Our old website and brand style was white and blue. We therefore redesigned our own brand identity to use darker, richer colours but retained white as the background for some areas of the website where we felt that it would be easier to read. This colour change was a big step forward and provides a balance between low energy and good readability. 

In learning about design with darker colours myself, I have found it interesting to discover that there seem to be many people who like to read on light coloured backgrounds and many others who prefer dark backgrounds. This is backed up a review by Nielsen Norman who concluded that “In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia.”

It suggests that on average, dark text on light backgrounds is easier to read but also highlights how there is not always a perfect, one-size-fits-all solution to design problems. We therefore need to think carefully about the target audience in each case and try to create designs that achieve a combination of high colour contrast but low eye strain – the Goldilocks combination. 

In some cases, the solution might be to offer both a light mode and a dark mode so that the user can select their preference, just like we did in our collaboration with Mightybytes when we redesigned SustainableWebDesign.org. 

Some other good examples of websites that let the user decide whether to view in light or dark mode include MDN’s Web Docs and Cloudflare Developer Docs. Both allow the colour mode to be changed via a toggle in the header and also take into account the preferences set in the users browser. You can find out how to configure a site to pick up a user’s browser preference for dark mode in this great CSS Tricks article, and can even emulate this feature using Chrome dev tools.

Increasingly my personal preference is to design with colours that are somewhere in the middle. I think that avoiding pure white with pure black can help minimise the risk of eye strain so long as a high degree of contrast is still maintained. It just takes the edge off. Furthermore, it opens up the possibility for creative colour palettes that excite, inspire, emotionally connect and stand out from the crowd. This approach shifts us away from a binary colour palette of just black and white, to an infinite array of possible colour combinations.

It looks like OLED technology is going to be here to stay for a while and so it’s time that we adopt a design approach tailored to this technology. Embracing darker colours will not only help create a more energy efficient internet, it will hopefully create a more visually diverse and creative web too. 

If you’d like to talk about how our team could help you reduce your websites energy, and carbon emissions, as well as improve user experience and brand presentation, give us a nudge and say hi.