OLED Dark Web

In 2009, Greenpeace Brazil launched The Black Pixel Project in an effort to raise awareness of digital and electronic waste1. The campaign invited users to install an application on their computer that let its users place a single black pixel somewhere on their display. By installing these pixels en masse, Greenpeace estimated that large potential energy savings were in fact possible, even from such a small gesture. While the campaign was successful in raising awareness of waste in the digital realm, critics questioned the efficacy of the campaign's premise2. By the late noughties, most CRT and plasma displays had been replaced with newer and fancier LCD based displays, where changing a pixel's brightness would have no effect on power consumption3. But the premise is changing today with the introduction and wide adoption of OLED based screen technology. The "cost of a pixel" is once again becoming relevant.

  1. The campaign website is no longer online. An archived version can be found here, but require Flash to run. The promotional video is available on Youtube.
  2. This article neatly summarises the debate on black pixels in 2009.
  3. There are in fact small differences in power consumption in pixel brightnesses on LCDs. But these are negligibly small. Depending on the display’s construction, either black or white is more consuming.

To understand why OLEDs change this, we have to understand the basics of how these technologies are different. LCDs work by filtering out light. Behind the screen sits a constant, singular light source, that constitutes the major power drain of the screen. While the light source can be adjusted, brightness of individual pixels have little effect on the overall power draw.

In OLEDs, pixels are made of tiny individual light emitters. This makes power consumption happen at a pixel by pixel level. A bright pixel will consume more than a dark pixel. This, among some other reasons, reduces OLED screens’ energy consumption when compared to LCDs, but also makes it more variable, depending on the hue and brightness of each individual pixel.

A study by Google was presented at the annual Android Dev Summit of 2018, showing comparisons in energy consumption between LCD and OLED displays of smartphones’ running apps in "light" and "dark" modes1. The apps tested included Google's own products, such as Youtube and Maps, that have the option of a light and dark palette mode built in. Unsurprisingly, switching between these had no effect with the LCDs tested. On the OLED display, however, the power consumption dropped between 30 to 60 percent when the apps were running in dark mode. As displays constitute one of the major power drains on mobile devices, this is a substantial amount.

  1. Video of presentation, Android Dev Summit 2018

I found the insights from Google's study to be quite profound. Their study showed how power consumption could vary simply based on colors. To visualise and make tangible these variations, I created a plugin that let's users see the relative power consumption between colors and brightnesses of websites. By toggling this effect on, the wide ranges in consumption between hues and brightnesses become apparent.

Heatmap effect

I chose to communicate this in the form of a heatmap, for its recognizability in showing magnitudes to most people. As this type of filter is often used for visualizing things such as heat, friction and material stresses, I found it a fitting analogy, and communicates well the relative power consumption between different colors.

The final versions of the effect mimic the blurry look commonly seen in thermal imaging. The initial version was pixel-perfectly sharp. This unexpectedly produced "artifacts" along antialiased lines and text. While antialiasing normally goes unnoticed, the effect made it jarringly obvious. While this was accurate and highlighted an interesting (though not obvious) fact, it made it read less like a heatmap. Seeing that people failed to recognize it as such, I chose to blur the image to look more recognizable, in order to convey the broader, and more important, general picture of color energy consumption, despite its less accurate representation.

The final filter gives a sense of the wide spectrum of colors that impact a website. It highlights the wide relative intensity between colors normally harder to perceive. The filter enables the user to gain a quick overview on how color choices impact the overall power consumption on OLED displays. This effect is particularly noticeable when seen on websites that offer both a light and dark theme.

Dark and light theme of Youtube

From Google's study, one of the more surprising insights was how blue consumed 25% more power compared to reds and greens. I was curious to see what this 25% increase stood for in terms of how it affected the overall visual aesthetics of a website. So I built filters that prioritized reducing energy consumption over visual appeal. Through two filters, I modified the blue values to match the energy consumption of reds and greens. My first filter scales the range of blue to match that of reds and greens. While this worked fine, I found the second filter, which simply clamped the value below the 25% increase threshold, produced nicer results, as there was more blue in the final result.

Blue 1/1.25 the amount, a clamped blue and no blue

The results have a washed, bleached out, feel to them, akin to a poster left out in the sun for a long time. While none of these small experiments are particularly attractive, designing for warmer palettes that use bluish tones more sparingly and strategically may be one avenue of exploration for designers. Some websites already do take this into consideration1.

  1. See Wholegrain Digital and Sustainable Web Design

But as Google's study shows, blue’s consumption is nothing compared to white. From my impression, the palette of many websites today frequently feature large amounts of white and light gray. To test this assumption, I created a small script that would automatically visit the 100 most popular websites globally1, to calculate the average hue and most frequent color for each website. Despite some shortcomings to the script2, it provides a general idea of how websites today are colored. The results do show a web of mostly light grays and whites.

  1. I found many sources that ranked popularity differently. I used this one.
  2. The script is very simple. It only visits the front page. Large banner ads and cookie pop-ups obstructs many webpages, affecting the results significantly. The results also don't reflect the ways the site would commonly be used.

One might jump to the conclusion that in order for us to save energy, our designs should become darker. It's easy to imagine more implementation of these night and dark mode palettes. However, they are usually gray, dark and desaturated - and in my view, generally dull-looking. Embracing this approach would, from my opinion, be restrictive and limiting, if anything, not very inspiring.

Looking at Google's study, however, suggests something quite different. While darker tones do consume less power, whites are by far more consuming than any other color. In comparison, Bright reds, greens and even blues, consume much less. Rather than dulling our palettes down, an alternative may be in fact to embrace the use of color, replacing our whites and grays with richer palettes, from pastels to earthy tones and neons that do not reduce a environmentally-conscious experience of the internet to a monochrome one.

The plugin provides a basic interface to experiment with a website's color palette.

Developing from this idea, I created a plugin that lets users modify the existing palette of any given website. I sent it out to fellow designers, with the prompt to remix a popular website. I invited them to explore different palettes and to play with color.

Some of the results I have recieved

Designing palettes is an obvious strategy for lowering power consumption, but is certainly not the only one. To explore other possible approaches, I created a set of smaller experiments in order to explore what other strategies could look like. My experiments have been short and pragmatic, with emphasis on eliciting reflection and reassessment of convention, rather than a clear solution.

While this example is not the most visually striking nor enticing, I was interested in seeing what an extreme approach that prioritised saving screen power consumption could potentially be like. For example, a website designed for maximum power efficiency could approach this by minimizing the area covered by bright pixels to a bare minimum. Employing only outlines for large text, choosing thinner fonts, and reducing images to silhouettes could be part of this strategy. As illustrated above, even though only the silhouettes and contours are accentuated, the most important information is still conveyed, while also reducing large areas of brightness to the edges.
Through overlaying elements such as particles, a large portion of the screen may be darkened without affecting usability (too) much. The use of movement also helps visually distinguish the overlay of particles from the main content, while simultaneously lowering the overall brightness of the page significantly. As only one part of the screen is in focus or in use at any one time, there is a lot of peripheral space. By filling this space, through the use of patterns, repetition and movement, it can become a way to distinguish and build a visual hierarchy that also lowers the overall brightness.
Picture this: in a not so distant future, the unexpected partnership between Greenpeace and Sanrio releases the Black Worm Project, or Wāmukun, a black tamagotchi–like creature that lives on your phone. While a prankster and constant annoyance, the digital pet is promised to save battery life and hthe environment.
Although a somewhat silly example, this experiment builds on the idea that only small parts of the screen are relevant at any given time. By shifting brightness and hue to mirror the locus of attention. These could focus on an explorative interaction, or be utilized more directly to convey visual hierarchy.
As a nod to the Black Pixel Project, this effect gradually places black pixels randomly across the screen, akin to dust settling slowly on the monitor. Barely noticeable at first, it gradually builds up, until it becomes more apparent. Easily removed by swiping the mouse over the screen, this effect creates a surprisingly satisfactory experience of wiping your screen clean without being too distracting, and conveying a sense of time, use and inactivity.

In these experiments I've tried to look at colors from different perspectives, examining visual possibilities within the constraints of reducing power usage. There is certainly a strange feeling that arises when having to consider color as a resource in the realm of digital and screen based design, as if inserting ourselves to bygone times when pigments were valuable commodities. Considering the cost of a pixel is a gentle reminder that the digital work we do is not ephemeral, but is grounded in physical reality. The lens of sustainability invites us to consider how we use colors today, and prompts us to imagine alternatives. As the Black Pixel Project has shown, even though these changes may have a small impact on their own, they are cumulative and add up.

Next chapter