Farben im Webdesign

Farben stehen nie für sich allein, Farben kommunizieren, setzen Kontraste. Farben wecken Vorstellungen, beeinflussen Stimmungen und geben dem Betrachteten einen Charakter. Auch die Kombination verschiedener Farben zu Farbklängen erhält jeweils eine bestimmte Bedeutung.
Stand 30.06.2010

Inhaltsübersicht:

  1. Farbwahrnehmung
  2. Farbwirkung
  3. Farbklang

Farbwahrnehmung

Barrierefreies bzw. barrierearmes Webdesign wird durch viele Faktoren beeinflusst. Neben rein technischen Kriterien und strukturellen Herausforderungen spielt auch eine bedachte Farbwahl eine wichtige Rolle. Farben stehen nie für sich allein, Farben kommunizieren, setzen Kontraste. Eine Website in Schwarz-Weiß kann ein Zeichen für ein klassisches Unternehmen sein, aber auch die schlichte Eleganz der Produkte betonen. Schwache Farben und wenig Kontraste wirken schüchtern, eine ruhige Farbgebung mit kräftigen Kontrasten durchaus seriös und professionell. Zu viel Farbe und zu viele Kontraste lassen eine Website schnell unangenehm aussehen.

Die Farbe Rot wird vom Nutzer sehr stark wahrgenommen. Grün wirkt lebendig, vermittelt Balance und Harmonie. Blau gilt als die Lieblingsfarbe der meisten Nutzer. Gelb wirkt frisch, fröhlich und sonnig. Weiß hinterlässt einen ordentlichen und übersichtlichen Eindruck und wird deshalb gerne als Hintergrundfarbe verwendet. Schwarzer Hintergrund hingegen wird bei vielen Underground- oder Erotik-Websites eingesetzt. Ausschlaggebend für die Lesbarkeit von Schrift ist ein guter Kontrast zwischen Schriftfarbe und Hintergrundfarbe. Bei Positivdarstellung, dunkle Schrift auf hellem Hintergrund, ist die Schrift gut lesbar, z.B. Schwarz auf Weiß. Abzuraten ist von Mustern und Bildern im Hintergrund, die einen ungleichmäßigen Kontrast verursachen, das Auge vom Text ablenken und damit die Lesbarkeit verschlechtern.

Helligkeit und Sättigung der Farben spielen eine wichtige Rolle bei der Akzeptanz durch den Nutzer. Die meisten Nutzer betrachten Objekte in hellen und schwach gesättigten Farben zuerst und länger als Objekte in dunklen und stark gesättigten Farben. Komplementärfarben sind, in Kombination für Hintergrund und Schrift eingesetzt, schwer fokussierbar, wie z.B. roter Text auf grünem Hintergrund.

Farbwahrnehmung

Bildbeschreibung "Farbwahrnehmung": Vier Varianten von Farbkombinationen für Schriftfarbe und Hintergrundfarbe (von links nach rechts): schwarz auf weiß (Positivdarstellung), weiß auf schwarz (Negativdarstellung) sowie gelb auf blau und rot auf grün (Komplementärfarben).

Seitenanfang

Farbwirkung

Farben wecken Vorstellungen, beeinflussen Stimmungen und geben dem Betrachteten einen Charakter. Zu unterscheiden sind die psychologische, die symbolische und die kulturelle Wirkung. Die psychologische Wirkung wird durch automatische und unterbewusste Reaktionen und Assoziationen ausgelöst. Durch die Zuschreibung der Farbe zu bestimmten Begriffen entsteht die symbolische Wirkung. Die kulturelle Wirkung ergibt sich aus unterschiedlichen Lebensweisen.

Farben wirken sehr verschieden. Rot kann sowohl Liebe und Hass als auch Dynamik und Aktivität oder Gefahr und Warnung assoziieren. Grün symbolisiert die Natur und das Leben, Ruhe und Geborgenheit aber ebenso die Untreue. Blau steht einerseits für Treue, Sympathie sowie Harmonie und andererseits für die Lüge.

Einen Überblick der symbolischen und psychologischen Farbwirkung gibt die nachfolgende Liste:

Rot
Liebe und Hass, Zorn, Kraft, Glück, Dynamik und Aktivität, Korrektur und Kontrolle, Gefahr und Warnung
Grün
Natur und Leben, Gesundheit und Frische, Hoffnung und Zuversicht, Jugend und Unreife, Ruhe und Geborgenheit, Zuverlässigkeit und Sicherheit, Untreue
Blau
Ruhe und Ewigkeit, Sehnsucht und Treue, Frieden, Sympathie, Harmonie, Freundschaft und Vertrauen, Lüge
Gelb
Licht und Sonne, Natur, Weisheit, leicht, wertvoll, Gift und Neid, unsicher und unbeständig, Lüge und Betrug, alt und krank, Wahrnehmung
Orange
Wärme, Vergnügen, Sicherheit
Braun
Geborgenheit, Demut, konservativ und mittelmäßig, Vergänglichkeit, Faulheit, Dummheit
Violett
Macht, Ewigkeit, Gewalt, Mäßigung, Täuschung und Untreue, geheimnisvoll, reife Frau, Emanzipation, weibliche Sensibilität und Charme
Rosa
Zärtlichkeit, Träumerei, Homosexualität
Weiß
Weiblichkeit, Unschuld und Wahrheit, Reinheit, Leere, Sachlichkeit und Kälte
Grau
Eleganz, unscheinbar, Trübe und Eintönigkeit, Pünktlichkeit, Grauen, minderwertig, Alter, Vergangenheit
Schwarz
konservativ, Eleganz, Individualität und Abgrenzung, Negation, Wahrheit, Tod und Trauer, Unglück, böse, geheim und illegal

Seitenanfang

Farbklang

Auch die Kombination verschiedener Farben zu Farbklängen erhält jeweils eine bestimmte Bedeutung. Rot-Blau-Gold steht für Attraktivität, Mut und Leistung, Blau-Weiß für Wahrheit und geistige Tugenden sowie Wissenschaft, Konzentration und Sport. Die Kombination Blau-Weiß-Silber hingegen hat eine kühle Ausstrahlung. Gold-Rot-Grün symbolisiert das Glück mit Reichtum, Liebe und Gesundheit, während Gold-Violett die verderblichen Seiten des angenehmen Lebens, Genuss und Stolz in Kombination mit Maßlosigkeit und Überheblichkeit, repräsentiert. Die Kombination Rosa-Weiß steht für das Sanfte, das Zarte und die Sensibilität. Weiß-Gold-Blau wirkt vollkommen, ideal und gut, Weiß-Grau ergibt einen neutralen Farbklang.

Die Kombination verschiedener Farben zu Farbklängen erhält jeweils eine bestimmte Bedeutung:

Rot - Schwarz - Orange
höchste Aggressivität
Rot - Blau
körperliche und geistige Kräfte
Rot - Blau - Gold
Attraktivität, Mut, Leistung
Rot - Gelb - Orange
Feuer und Wärme
Rot - Violett - Rosa
Sexualität und Erotik, das Unmoralische
Grün - Rot
höchste Vitalität: das pflanzliche Leben - das animalische Leben
Gold - Rot - Grün
Glück: Reichtum - Liebe - Gesundheit
Grün - Gelb - Blau - Rosa
Wachstum und Frühling
Grün - Braun
herb und bitter
Grün - Gelb
sauer
Grün - Orange
aromatisch
Grün - Schwarz
Zerstörung
Blau - Violett - Orange
Phantasie
Blau - Weiß
Wahrheit, das Gute, Klugheit, geistige Tugenden, Wissenschaft, Konzentration und Sport
Blau - Grün - Weiß
Erholung: positive Erholung - aktive Freizeitgestaltung - Ruhe und wenig Aufregung
Blau - Weiß - Silber
Kühle
Blau - Gold
Leistung
Blau - Grün
positiv
Gelb - Grün
Ärger
Gelb - Schwarz
Unverstand und Unreinheit
Gelb - Grün
sauer (Zitrone, Limette)
Rot - Orange - Gelb
Energie und Aktivität, Aufregung und Begierde
Rot - Orange - Braun
Wärme
Braun - Rosa
Gemütlichkeit und Geborgenheit
Violett - Rosa - Gold
Eitelkeit
Violett - Rot
Wolllust
Violett - Rot - Rosa
Sexualität
Violett - Gold
Verderblichkeit: Maßlosigkeit, Überheblichkeit - Genuss, Stolz
Rosa - Violett
Eitelkeit
Rosa - Grün
das Kindliche und Naive
Rosa - Weiß
das Sanfte und Zarte, Sensibilität, Unschuld
Weiß - Grau
Neutralität
Weiß - Gold - Blau
Vollkommenheit, Ideal, das Gute
Grau - Braun
Dummheit und Faulheit
Grau - Blau - Schwarz
Nachdenklichkeit
Schwarz - Grau - Braun
Bedrängnis
Schwarz - Grau - Weiß
Einsamkeit
Schwarz - Grau - Gelb
Gefühllosigkeit
Schwarz - Gelb
Egoismus, Schuld und Lüge
Schwarz - Violett
Untreue
Schwarz - Rot
die Gefahr und das Verbotene

Weiterführende Literatur:

Jacobsen, Jens:
Buchdeckel Website-Konzeption
Website-Konzeption, Seite 174,
Addison-Wesley Verlag, München, 3. erweiterte Auflage 2005 (dpi),
ISBN 3827322499
Manhartsberger, Martina und Musil, Sabine:
Buchdeckel Web Usability
Web Usability - Das Prinzip des Vertrauens, Seite 192 ff.,
Galileo Press, Bonn, 1. Auflage 2002 (Galileo Design),
ISBN 3898421872
Bartel, Stefanie:
Buchdeckel Farben im Webdesign
Farben im Webdesign, Seite 40 ff. sowie Seite 48 ff.,
Springer Verlag, Berlin, 1. Auflage 2003 (X.media.press),
ISBN 3540439242

Seitenanfang