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