Lesson 7Web fonts, colour pattern and sustainability

Notion 45

Find a balance between energy efficient and accessible colour palette.

Target skills

Learn how colour choices influence energy consumption and how to find the right balance between accessible and energy efficient.

Pixels consume energy

When we design web pages for display on OLED screens, we should take into account that each pixel is a tiny lightbulb illuminated individually when needed.
This fact allows us to save energy by choosing one colour before the others. Since black is the least energy-intensive colour and white is the most energy-intensive, dark colours need less energy than light colours to illuminate. However, red and green pixels consume 25% less energy than blue ones.
That is why a dark mode is often used on our mobile phones. The power consumption of these devices directly affects the battery life. The less power the screen consumes, the longer our device will work without recharging.

Some calculations

Here are some interesting Google statistics: Google Maps mobile app can consume up to 63% less screen energy in night mode than in standard mode on the phones with OLED screens.

Tom Greenwood (co-founder of Wholegrain Digital and author of the book "Sustainable Web Design") did his own rough calculations, taking into account the total energy consumption of a website (including data centres and CPUs on the user's device), and estimated that a dark background design could save about 10% of the total energy compared to a white background on OLED screens.

Energy efficiency & Accessibility

Our project focuses not only on the environmental impact of the website, but also on its accessibility. Therefore, it is important to ask how accessible our colour choices are and whether they contribute to readability.

According to Nielsen Norman Group research ( https://www.nngroup.com/articles/dark-mode/ ) : “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 means that there's no "one size fits all" solution when it comes to the colour palette in web design.
We should pay a lot of attention to our target audience and find a balance that combines high colour contrast with low eye strain and low energy consumption.
One of the solutions can be to include both modes and let users choose which one they prefer, for example like they did at sustainablewebdesign.org: https://sustainablewebdesign.org/