Farbe und Screendesign

von Karin Büchner

Bildschirmarbeit ermüdet, das ist bekannt. Weniger bekannt scheint dagegen zu sein, dass gezielter Farbeinsatz im Screendesign die Augenbelastung reduziert und die Benutzerführung verbessert.

Die Grundlagen haben wir für Sie in vier Schritten aufbereitet: Von der Farbwahrnehmung und –empfindung über Farbeigenschaften und ihre Wirkung bis zu Farbpsychologie und dem Bildschirmsystem RGB.

A: Farbwahrnehmung und das Auge
Farben sind Teil des Lichts, Wellen im Raum, die als vergängliche Erscheinung im Auge wahrgenommen und im Gedächtnis gespeichert werden. Der Farbeindruck entsteht durch den Lichteinfall im Auge und seine Umwandlung auf der Netzhaut. Je nach Menge und Winkel des einfallenden Lichts öffnet oder schließt sich die Linse des Augapfels. Sie reguliert so die Lichtmenge und stellt das Netzhautbild scharf. Die Nervenzellen (Rezeptoren) der Netzhaut unterscheiden Farben, Kontraste und Strukturen.

Die unterschiedlichen Wellenlängen von Farben lösen im Auge unterschiedlich starke Reize aus. Das Auge ist Teil des Gehirns. Alles, was wir sehen, belastet unmittelbar das Gehirn. Am stärksten belastet volles, weißes Licht. Warme Farben (Gelb, Orange, Rot) belasten stärker als kalte (Blau, Violett) oder nicht gesättigte Farben.

Bildschirmwahrnehmung gleicht einem „Blitzlichtgewitter“ für Auge und Hirn. Die Reize erfolgen direkt, schnell und ohne Schutz für Auge und Gehirn. Monitorfarben strahlen direkt ins Auge.


Farbempfindung

B. Farbempfindung und Psyche
Farben wecken Empfindungen. Rot empfinden wir als aufreizend, warm, aktiv, nah. Gelb als anregend, warm, hell, Energie geladen, heiter, freundlich. Grün als beruhigend, harmonisch, spannungslos, entfernt. Blau als kühl, weit, ruhig, romantisch, geistig usw. Braun wird als erdig, langweilig, unerotisch empfunden. Je nach Farbton kann die Empfindung schwanken: auf ein sonniges Gelb treffen die genannten Empfindungen zu, Zitronengelb hingegen empfinden wir vielleicht als sauer, ein scharfes Gelb als alarmierend.

  1. Farben sind Stimmungsmacher. Geheime Energien. Stimulans. Jeder weiß das, speziell in Mode und Werbung wird dieses Wissen intensiv genutzt.
  2. Farbgefühl ist an sinnliche Eindrücke gekoppelt – wie schmecken und riechen.
  3. Farbbedeutung wird in Natur und Kultur erlernt:
    – Blutrot und »Rot = Liebe«.
    – Grasgrün und »Grün = Hoffnung«
    – Rabenschwarz und »Schwarz = Tod «,
    – andere Kulturen: Weiss = Tod. (Orient.)
  4. Rot und Rot sind nicht gleich.

C. Farblehre: Farbeigenschaften und ihre Wirkung im Design
Bisher haben wir Farben an sich unterschieden: Rot, Gelb, Blau, Grün, Orange – jede der genannten Farben kennt eine Vielfalt Nuancen, die nach ihren Eigenschaften unterscheidbar sind:

Kalt/warm -Kontrast
Vergleichen Sie etwa: Tomatenrot und Purpurrot, Dottergelb und Zitronengelb, Apfelgrün und Flaschengrün – Immer wirkt die erste Farbe wärmer als die zweite.
Gestaltungshinweis: Unterschiedliche Farben sind bei ähnlicher Farbtemperatur (warmes Rot, warmes Blau, warmes Gelb oder kaltes Rot, kaltes Blau, kaltes Gelb) gut kombinierbar. Umgekehrt kann eine Farbe gestalterisch auffallen, wenn sie sich in der Temperatur vom Umfeld unterscheidet.

Helligkeitskontrast
Unabhängig vom Farbton und Sättigung haben Farben verschiedene Helligkeitswerte. Gelb ist heller als Rot, grün heller als Violett. Jede Farbe kann in sich aufgehellt oder abgedunkelt werden – bei gleich bleibendem Kalt/Warm-Wert.

  • Gestaltungshinweise:
    Helligkeitskontrast sorgt für gute Lesbarkeit.
    Helle Farben treten im Raum (scheinbar) nach vorn, dunkle weichen zurück.

Qualitäts- oder Sättigungskontrast
Der Qualitätskontrast beruht auf dem Gegensatz zwischen einer reinen Primärfarbe und einer getrübten Farbe mit verringerter Sättigung. Aber. Je höher die Farbsättigung, desto stärker die Augenbelastung am Monitor. Daher sind pastellige Fonds beliebt, sie schonen die Augen.

Komplementärkontrast
Farbpaare, die in ihrer Wirkung gegensätzlich sind – Rot und Grün; Blau und Orange; Gelb und Violett nennen wir komplementär. In unmittelbarer Nachbarschaft zueinander steigern sie sich. Bei kleinteiliger Gestaltung (Schriften oder Punkte) „vernichten sie sich gegenseitig zu tristem Grau“.

  • Gestaltungstipp:
    Komplementäre Farben sind aufmerksamkeitsstark. Sie belasten die Augen.

Simultankontrast
Er hat mit Gleichzeitigkeit von Gegensatz im Sehprozess zu tun. Ein reines Grau (= ein prozentualer Schwarzwert) wirkt auf einem knallroten Hintergrund grünlich-grau, dasselbe reine Grau dagegen wirkt auf einem orangenfarbenen Hintergrund bläulich-grau. Das Auge projiziert hier die Komplementärfarbe, probieren Sie es bitte aus. So können Sie demnächst Ihrem Kunden erklären, warum das feine Gelb seiner Website seltsam grünlich daherkommt, und zwar unabhängig von der Bildschirmwiedergabe.

Menge, Proportion, Raumverhalten
Das Raumverhalten von Farben richtet sich vor allem nach Hell/Dunkel und Kalt/Warm-Bezügen von Farbe. Warme Farben haben die Tendenz, dem Betrachter entgegen zu kommen, kalte Töne weichen eher zurück.

Hier die Zusammenfassung der Farbeigenschaften

Jede Farbe ist in fünffacher Weise veränderbar.
1. In Charakter/ Nuance – warm oder kalt .
2. In der Helligkeit – zu Weiß oder Schwarz.
3. In der Qualität – Satte Farben sind voll gegenüber getrübten.
4. Durch ihr Umfeld – Der Hintergrund beeinflusst die Wahrnehmung.
5. Durch Proportion / Menge.

D. RGB: Screen versus Papier, RGB und CMYK
Farben setzen sich am Bildschirm anders zusammen, als die Pigmentfarben auf Papier.

Die vollen Primärfarben Rot /Grün/Blau = RGB des Bildschirms ergeben zusammen Weiß. Die Pigmentfarben des Vierfarbdrucks: Cyanblau+Magentarot+Yellow+K (=Kontrast=Schwarz) reflektieren auf weißem (!) Hintergrund Restlicht, im Zusammendruck ergeben sie Schwarz.

Achtung: gelbliches oder bläuliches Papier verändert die Farbwiedergabe. Bildschirmdarstellung gleicht in keinem Fall dem Druckergebnis. Ausdrucke auf Papier sind generell nur in CMYK möglich. Fertigen Sie daher Drucktests auf Papier für die Web-Seiten an, die Benutzer ausdrucken wollen, meist in Schwarzweiß.

Die Aufgabe von Farbe am Bildschirm ist, Inhalte zu visualisieren und Ziele zu unterstützen, wie

1. Wiedererkennbarkeit des Erscheinungsbildes
2. Gute Lesbarkeit von Text und Bild
3. Navigation und Benutzerführung durch systematischen Farbeinsatz
4. Animation und Zielgruppenansprache.

Noch ein Wort zur Beliebtheit von Farben
Nicht nur in der Mode, auch im persönlichen Umfeld oder im Marketing wechselt der Rang von Farben. Seit einigen Jahren steht bei uns Blau ganz oben auf der Beliebtheitsskala, gefolgt von Rot, Orange, Gelb. Grün rangiert weiter hinten, auch Braun gilt als wenig attraktiv.

Zum Schluss ein paar Regeln und Tipps zum Umgang mit Farben am Monitor.

  1. Weniger ist mehr. Buntheit lenkt ab und macht allgemein. Wirksamer ist ein bestimmtes Farbklima aus zwei Grundfarben. Erkennbarkeit (Corporate Design) und Orientierung (Navigation.)
  2. Augenfreundlich gestalten: große Hintergrundflächen vor denen gelesen wird, in strahlungsarmen Farben anlegen.
  3. Farben derselben Wellenlängen meiden, wo es um Lesbarkeit geht. Die Wellenlängen der Primärfarben RGB liegen so nah beieinander, dass sie im Auge Vibration erzeugen, es »flimmert«.
  4. Gute Lesbarkeit braucht Hell-Dunkel-Kontrast. Das muss nicht das harte Schwarz/Weiss oder das grelle Schwarz/Gelb sein, der Kontrast kann innerhalb einer Farbe liegen – dunkelblau auf lichtblau, gelbgrün vor flaschengrün.
  5. Inhaltsbezug und Zielgruppenakzeptanz berücksichtigen!
  6. Farbmengen. Warme, helle Farben zurückhaltend und gezielt einsetzen: kleine Flächen, kurze Verweildauer, hohe Aufmerksamkeitsstufe.
  7. Farben aus den 256 Bildschirmfarben wählen, das spart Speicher und Ladezeit.
  8. Schrift und Farbe: Lesbarkeit und Farbwirkung an unterschiedlichen Systemen und Bildschirmen testen. Für Schwarzweiß-Monitore und Ausdruck optimieren.
  9. Schwarz auf Weiß ergibt ein klar lesbares Schriftbild . Bei gleicher Schrifttype und demselbem Schriftgrad wirkt weiße Schrift auf schwarzem Fond fetter, die Buchstabenabstände erscheinen geringer, insbesondere bei Bildschirm-wiedergabe und Überstrahlung. Übrigens: 10% Schwarz in weißer Schrift machen Text lesefreundlicher, ebenso 10% der Fondfarbe in jedem anderen Farbfond.

Tipps zum Einsatz für Farbklima und Harmonisierung am Bildschirm

Die Wirkung im Umfeld berücksichtigen:

  • Gelb wirkt auf Blau hell und vordergründig. Auf Weiß verliert es seine Kraft und Ausstrahlung.
  • Blau wirkt auf Gelb dunkel, auf Dunkelbraun leuchtet und vibriert es, auf Rotorange strahlt es unwiderstehliche Kraft aus und auf Grün flieht es ins Rötliche.
  • Mehr als bei anderen Farben zählt bei Grün die Nuance! Getrübtes Grün wirkt lahm und faulig. Gelbliches Grün symbolisiert Frühling und Jugend – Blaugrün geheimnisvolle Tiefe. In der Kombination mit Weiß wirkt Grün frisch, in Verbindung mit Rot gewöhnlich.
  • In Rot ist Dunkelheit und Licht gleich weit entfernt. Es hat Signalcharakter. Auf Grün wirkt Rot laut und gewöhnlich.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Weitere Informationen zu Farbempfindung und Psyche bietet der Beitrag Farbe und Screendesign. […]

trackback
3 Jahre 8 Monate her

[…] […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen