Zum Inhalt springen

Ideen für energieeffiziente Farbpaletten

Wusstest du, dass du mit der Wahl der Farbpalette auf deiner Webseite, App oder deinen Social Media Posts Akkulaufzeit sparen kannst? Jepp, das stimmt! Zumindest, wenn das Gerät deiner Nutzer:innen ein OLED-Display ist.

Meine erste Begegnung mit energieeffizienten Farbpaletten hatte ich in einem Vortrag von Tom Greenwood, wahrscheinlich 2019 oder 2020. Laut Recherchen wirken sich Farben unterschiedlich auf die Akkulaufzeit von Geräten mit OLED-Displays aus. Schwarz verbraucht am wenigsten Energie, Rot kommt an zweiter Stelle, Grün an dritter, Blau an vierter und Weiß verbraucht am meisten Energie.

Das klang spannend. Und warf eine Menge Fragen auf.

Inhalt des Artikels

Sollen wir alle (buchstäblich) grün werden? Sollten wir alle dunkle Farben verwenden? Verlieren wir mit diesem Ansatz die Farbvielfalt?

Nee. Nee. Nee.

Und ich sag dir auch warum.

  1. Die Farben wirken sich nur bei OLED-Bildschirmen auf die Lebensdauer der Batterie aus. Das liegt daran, dass bei OLED-Bildschirmen jedes Pixel einzeln beleuchtet wird. Bei anderen Displays wie beispielsweise LEDs ist das nicht der Fall.
  2. Nicht jeder Bildschirm ist ein OLED-Display. Nur die neuesten Smartphones und Laptops verwenden OLED.
  3. Manche Menschen finden es einfacher, mit dunkleren Farben zu lesen. Andere finden es einfacher, mit helleren Farben zu lesen. Bestimmte Farbkombinationen können sogar zu Überanstrengung und Ermüdung der Augen führen. Es gibt keine Einheitslösung.

Also warum drum kümmern?

OLED-Bildschirme werden immer beliebter und werden in den nächsten zehn Jahren weiter zunehmen.

Google fand heraus, dass der Nachtmodus (mit dunkleren Farben) je nach überprüfter App 30 % bis 65 % weniger Strom verbraucht als der helle “Tages”-Modus. Sie fanden auch heraus, dass Blau 25 Prozent mehr Strom verbraucht als Grün oder Rot.

Eine weitere Schätzung stammt von Tom Greenwood, der sagt, dass “einschließlich der Übertragungsnetze von Datenzentren, die CPU-Energie auf dem Gerät des Benutzers […] ein Design mit dunklem Hintergrund etwa 10 % der Gesamtenergie im Vergleich zu einem Design mit weißem Hintergrund auf OLED-Bildschirmen einsparen könnte”.

Das sind eine Menge Zahlen. Aber du bekommst einen Eindruck davon, was gemeint ist. Je nach Webseite oder Anwendung kannst du mit energieeffizienten Farbpaletten Akkulaufzeit sparen. Achte aber auch auf die Barrierefreiheit. Was heißt das genau? Gehen wir mal etwas näher darauf ein.  


Dunkler Modus oder heller Modus – Was ist barrierefreier?

Der Dark Mode und damit die Verwendung dunkler Farben ist ein seeeeehr großes Thema. Deshalb werde ich es in diesem Blogbeitrag nur ganz kurz anschneiden. Keine Sorge, ich werde es in Zukunft behandeln, aber ich möchte mich heute mehr auf die farbenfrohe Seite der Design-Entscheidungen konzentrieren.

Zwei Dinge will ich aber dazu gesagt haben:

Nr. 1: Bitte, bitte, bitte verwende niemals strahlend weißen Text auf rein schwarzem Hintergrund. Diese Farbkombination hat extreme Auswirkungen auf Augenbelastung, Ermüdung und Lesbarkeit. Das ist schon bei sehr guten Sehfähigkeiten schlimm, aber noch schlimmer ist es für Nutzer:innen mit Glaukom oder ähnlichen Problemen. Alles verschwimmt, die Augen schmerzen, das Gehirn brummt. Übrigens ist es auch nicht gut, rein schwarzen Text auf strahlend weißem Hintergrund zu verwenden. Das kann ähnliche Probleme verursachen. Weichere Farben machen es viel einfacher.

Nr. 2: Biete, wenn möglich, sowohl den hellen als auch den dunklen Modus an. Wenn du beide Varianten zur Verfügung stellst, machst du es deinen Nutzer:innen am einfachsten. Sie können die für sich selbst beste Option auswählen und haben damit eine top Usability. Da es immer Menschen geben wird, die lieber das eine oder das andere wählen, sorgst du für eine bessere Barrierefreiheit und ein besseres Nutzererlebnis. (Und ja, auch auf meiner Website fehlt noch ein Toggle. Ich hab’s auf meiner Liste. 😊)


Ideen für deine energieeffiziente Farbpalette

Du bist mitten in der Auswahl von Farben für eine neue Marke oder ein Redesign. Warum schaust du dich dann nicht mal bei energieeffizienten Farbpaletten um?

Klingt gut.

Nur eine Sache, bevor wir dazu kommen: Bei der Auswahl einer Farbpalette gibt es eine Vielzahl von Aspekten. Farbpsychologie, Branding und Barrierefreiheit sind einige davon. Das heißt, Energieeffizienz ist wichtig, aber nicht das einzige Kriterium für deine Farbauswahl.

Betrachte also die folgenden Ideen als Anregungen und nicht als Muss-ich-so-machen.

Lass uns mal reinschauen.


Sommer Farbpaletten

Ich liebe den Sommer! Sommerfarben sind vor allem lebendig und mit hoher Sättigung.


Herbst Farbpaletten

Herbstfarben sind sehr erdige Farben. Vielleicht ist dir auch aufgefallen, dass die Farbpalette von Green the Web ebenfalls in diese Kategorie passt.


Winter Farbpalette

Winterfarben können entweder sehr hart und kontrastreich oder sehr gedämpft sein. Die gedämpften Winterfarben sind das, was ich persönlich in meinen Wintern viel mehr erlebe (grau, grau, grau).


Frühling Farbpalette

Der Frühling bringt immer frische Farben mit sich. Normalerweise kommt er mit sehr hellen Pastelltönen daher, weswegen ich die folgenden Farbpaletten ein wenig für meine Energiesparabsicht optimiert habe.


Resumé

Farbpaletten sind ein wunderschönes Thema. Man kann viel Wissen in sie einfließen lassen und dabei ein Gleichgewicht zwischen Branding, Farbpsychologie, Barrierefreiheit und jetzt auch Energieeffizienz herstellen. Berücksichtige dabei immer alle Aspekte und nicht nur einen.

Dunkle Farben, Rot und Grün sind die energieeffizienteren Farben bei Geräten mit OLED-Displays. Achte aber darauf, wie sich die Farbkombinationen auf die Lesbarkeit und Barrierefreiheit auswirken. Und verwende niemals reines Weiß auf reinem Schwarz oder umgekehrt.

Und was ist mit Blau und Weiß?

Es ist nichts falsch daran, Farben wie Blau oder Weiß zu nutzen. Sie sind keine verbotenen Früchte. Es ist nur so, dass sie einen gewissen Einfluss auf die Akkulaufzeit von Geräten mit OLED-Displays haben.

Eine kleine Lösung könnte darin bestehen, dass du als Hintergrundfarbe ein Off-White anstelle von reinem Hellweiß verwendest. Off-white ist ein Weiß, das cremigere Farbtöne hat und daher weniger Energie benötigt. Außerdem ist es weicher für die Augen.

Was sind deine Lieblings-Farbpaletten?

Liebe,
Sandy

Hi, ich bin Sandy, die Autorin dieses Blogs und UX/UI-Designerin mit 10+ Jahren Erfahrung. 2019 hab ich Green the Web gegründet, um meine Leidenschaft, Ideen und Visionen für ein nachhaltiges Web mit Changemakern wie dir zu teilen. Lass uns auf LinkedIn oder auf Instagram @greentheweb connecten, diskutieren und Ideen auzutauschen.