6 Farben im Web

201
6
Farben im Web *
Farben sind das Erste, was ein Besucher Ihrer Website wahrnimmt. Da es für den ersten Eindruck keine zweite Chance gibt,
sollten Sie sich mit der Farbgestaltung im Web intensiv auseinandersetzen.
Im ersten Kapitel werden wichtige Begriffe zur Farbgestaltung
eingeführt:
»Was ist Farbe?«, S. 202
Für die Darstellung von Farben auf dem Monitor werden das RGBund das HSB-Farbmodell eingesetzt, für Farbdrucker das CMYKFarbmodell:
»Farbmodelle«, S. 205
Die Qualität der Farbgestaltung wird durch die drei K´s (Komplementärfarben, Kontrast und Kombination) beeinflusst:
»Die 3 K’s der Farbgestaltung«, S. 212
Mit Farben sind bestimmte Assoziationen verbunden, die man
bei der Gestaltung einer Website kennen sollte:
»Farb-Psychologie«, S. 216
Je nach dem gewünschten Effekt können Farben nach unterschiedlichen Gesichtspunkten kombiniert werden:
»Farben kombinieren«, S. 219
Eine gute Lesbarkeit der Texte auf dem Monitor wird durch eine
geeignete Kombination von Schrift- und Hintergrundfarben erreicht:
»Schriftfarbe und Hintergrund«, S. 226
Etwa 8 Prozent aller Männer sind farbenblind. Wie sieht ein Farbenblinder die Farben einer Website?
»Farbenblindheit«, S. 229
Die praktische Umsetzung des Farb-Designs für eine Website
wird anhand der Fallstudie gezeigt:
»Ökostromanbieter: Farb-Design«, S. 235
Dieses Kapitel enthält zahlreiche Beispiele zur Farbgestaltung.
Leider ist es technisch nicht möglich, Bildschirmfarben orginalgetreu auf Druckfarben abzubilden. Außerdem können
Druckfarben ganz unterschiedlich ausfallen. Daher kann es
sein, dass einige der beschriebenen Farbeffekte hier nicht
sichtbar sind. Die »echten« Farben können Sie im zugehörigen kostenlosen E-Learning-Kurs »Farb-Design für Websites«
sehen.
Hinweis
202
6 Farben im Web *
6.1 Was ist Farbe? *
Lichtfarben entstehen durch Übereinanderprojektion von farbigem Licht und werden unter anderem auf Bildschirmen verwendet. Alle Lichtfarben lassen sich durch additive Mischung
aus den Primärfarben mischen. Körperfarben werden sichtbar,
wenn Gegenstände Licht reflektieren. Sie werden unter anderem
im Druckbereich verwendet. Hier entstehen neue Farben durch
subtraktive Farbmischung.
Was ist
eigentlich
Farbe?
Das Sonnenlicht besteht aus elektromagnetischen Wellen unterschiedlicher Wellenlänge. In der Netzhaut gibt es drei verschiedene Typen farbempfindlicher Sehzellen, die auch Zapfen genannt werden: für kurzwelliges, mittelwelliges und langwelliges
Licht. Die Zapfen sammeln die Lichtstrahlen ihrer Wellenlänge
und leiten sie an das Gehirn weiter, wo dann die eigentliche Farbempfindung entsteht.
Kurzwelliges Licht sehen Sie als Blau, mittelwelliges als Grün und
langwelliges als Rot. Da die Lichtstrahlen farblose Energiestrahlen sind, kann man sagen: Farbe entsteht im Auge des Betrachters. Außer dem sichtbaren, gibt es den unsichtbaren Bereich des
Lichts: das ultraviolette Licht (unterhalb des sichtbaren Bereichs)
und das Infra-Rot-Licht (oberhalb des sichtbaren Bereichs).
Grundsätzlich lassen sich zwei Erscheinungsformen von Farben
unterscheiden:
Lichtfarben und
Körperfarben.
Lichtfarben
Lichtfarben sind die Farben, die von einer Lichtquelle, z. B. der
Sonne oder einer Glühlampe aber auch bei Fernsehern, Computer-Bildschirmen oder Videoprojektoren, direkt in das Auge gelangen (Abb. 6.1-1).
Abb. 6.1-1: Das Sonnenlicht setzt sich aus Licht unterschiedlicher Wellenlängen
zusammen. Rote, grüne und blaue Wellenlängen nehmen wir in der Summe als
weißes Licht wahr.
Primärfarben
des Lichts
Alle Lichtfarben lassen sich aus den drei Primärfarben Rot,
Grün und Blau mischen (Abb. 6.1-2), man spricht daher von
6.1 Was ist Farbe? *
203
RGB-Farben. Näheres dazu finden Sie im Kapitel »Farbmodelle«,
S. 205.
Abb. 6.1-2: Aus diesen drei Primärfarben setzt sich jede Lichtfarbe zusammen.
Mischen sich rote und grüne Lichtstrahlen, so erscheint das Licht
Gelb. Reines Gelb besitzt 100 % Rotanteil und 100 % Grünanteil,
aber keinen Blau-Anteil. Da rotes und grünes Licht zu einer neuen Farbe »addiert« werden, spricht man von additiver Farbmischung. Wie die Abb. 6.1-3 zeigt, entsteht Gelb aus Rot und
Grün, Magenta aus Rot und Blau, Cyan aus Grün und Blau. Weißes Licht entsteht durch die Überlagerung aller Wellenlängen zu
jeweils gleichen Teilen. Oder anders ausgedrückt: Die Mischung
aller drei Primärfarben zu gleichen Teilen (100 % Rot, 100 % Grün
und 100 % Blau) ergibt Weiß. Fällt kein Licht auf die Sehzellen,
dann »sieht« man die Farbe Schwarz. In diesem Fall liegt eine
vollständige Abwesenheit aller Primärfarben vor.
Abb. 6.1-3: Durch additive Mischung von Rot, Grün und Blau entsteht Weiß.
Körperfarben
Körperfarben werden sichtbar, wenn Licht von Gegenständen
reflektiert wird. Fällt weißes Licht auf einen Gegenstand, dann
wird ein Teil davon absorbiert (verschluckt) und ein anderer Teil
der Strahlen reflektiert (zurückgeworfen). Die Farbe, die Sie von
einem Gegenstand wahrnehmen, setzt sich aus diesen reflektierten Strahlen zusammen (Abb. 6.1-4). Körperfarben nehmen Sie
immer wahr, wenn Sie Gegenstände des Alltags betrachten: Ihre
Kleidung, eine Zeitschrift oder die Fliesen auf dem Boden. Wie
Sie die Farbe eines Gegenstands wahrnehmen, hängt sehr stark
Additive
Farbmischung
für Lichtfarben
204
6 Farben im Web *
von dem einfallenden Licht ab. Daher sehen Kleidung oder Bilder
oft bei Sonnenlicht und Kunstlicht ganz unterschiedlich aus. Mit
Körperfarben wird im Druckbereich gearbeitet.
Abb. 6.1-4: Betrachten wir einen Körper, so nehmen wir nur die reflektierten
Strahlen des Lichts wahr. Bei einer Fläche, die uns cyanfarben erscheint, wird
der rotwellige Anteil des Lichts absorbiert, Blau und Grün werden reflektiert und
ergeben im Auge des Betrachters in der Summe Cyan.
Primärfarben
im Druck
Wenn Sie einen Farb-Tintenstrahldrucker besitzen, dann wissen
Sie, dass er vier Patronen mit den Farben Cyan, Magenta, Gelb
und Schwarz enthält. Die Farben Cyan, Magenta und Gelb sind
die Primärfarben im Druckbereich (Abb. 6.1-5). Theoretisch lassen sich alle druckbaren Farben aus diesen drei Primärfarben mischen. In der Praxis wird Schwarz dazugegeben, um dem Druckbild mehr Tiefe zu geben und um reines Schwarz nicht aus
den drei Grundfarben mischen zu müssen. Da man beim Druck
alle Farben aus den Farben Cyan, Magenta, Gelb (Yellow) und
Schwarz (Black) bildet, spricht man von CMYK-Farben. Näheres
dazu finden Sie im Kapitel »Farbmodelle«, S. 205.
Abb. 6.1-5: Im Druckbereich sind die Primärfarben Cyan, Gelb (Yellow) und
Magenta.
Subtraktive
Mischung für
Körperfarben
Das Weglassen bzw. Subtrahieren der Farbe Blau ergibt für den
Betrachter die Farbe Gelb. Das Fehlen der Farbe Rot nimmt man
als Cyan wahr und das Herausfiltern von Grün als Magenta. Wird
keine Farbe subtrahiert, dann entsteht die Farbe Weiß, während
die Subtraktion aller Farben Schwarz erzeugt. Bei den Druckfarben spricht man daher von der subtraktiven Farbmischung.
Im Gegensatz zur additiven Mischung, bei der es darum geht,
6.2 Farbmodelle *
205
welche Farben in einer Mischung enthalten sind, ist bei der subtraktiven Mischung von Bedeutung, welche Farben herausgefiltert (subtrahiert) werden bzw. welche reflektiert werden.
6.2
Farbmodelle *
Für Bildschirmfarben gibt es mehrere Farbmodelle. Am häufigsten wird wohl das RGB-Farbmodell verwendet. Beim HSB-Farbmodell werden die Farben durch Angabe von Farbton, Sättigung
und Helligkeit definiert. Werden Webseiten gedruckt, dann müssen Lichtfarben auf Druckfarben abgebildet werden. Die Drucker verwenden hierfür das CMYK-Farbmodell. Die websicheren
Farben bilden eine Palette von 216 Farben, die auf Windowsund Macintosh-Computern gleich dargestellt werden.
RGB-Farbmodell
Das RGB-Farbmodell ist das Standardmodell für Lichtfarben.
Computer-Bildschirme stellen Farben dar, in dem unterschiedliche Mischungen der Farben Rot, Grün und Blau verwendet werden (Abb. 6.2-1). Man spricht daher von RGB-Farben.
Abb. 6.2-1: Im RGB-Farbmodell setzt sich jedes Bild aus den Farben Rot, Grün
und Blau zusammen.
Ein reines Rot besitzt 100 % Rotanteile und keinerlei Anteile an
den Farben Grün und Blau. Das wird durch den Farbwert (255 R, 0
G, 0 B) ausgedrückt. Die Intensität des Rotanteils wird also durch
Werte von 0 bis 255 definiert. Analog besitzt ein reines Grün
den Farbwert (0 R, 255 G, 0 B) und ein reines Blau den Farbwert
Primärfarben
im RGB-Modell
206
6 Farben im Web *
(0 R, 0 G, 255 B). Die Anteile der Primärfarben werden im RGBFarbmodell immer in der Reihenfolge Rot-Grün-Blau angegeben.
Daher gilt: (x R, y G, z B) = (x,y,z).
Farben mischen
Durch Mischung der drei Primärfarben entstehen weitere Farben.
Da die Rot-, Grün- und Blauanteile jeweils die Werte von 0 bis
255 annehmen können, ergeben sich ca. 16 Millionen darstellbare Farben. Werden jeweils zwei Primärfarben gemischt, dann
ergeben sich die Farben der Abb. 6.2-2. Natürlich lassen sich die
Farben auch in beliebigen Verhältnissen mischen, wie beispielsweise in Abb. 6.2-3.
Abb. 6.2-2: Durch Mischung der drei Primärfarben entstehen weitere Farben wie
Gelb, Magenta und Cyan.
Abb. 6.2-3: Durch beliebige Mischung der drei Primärfarben entstehen weitere
Farben wie Orange, Hellgrau und Lila.
Grautöne
Reine Grautöne besitzen im RGB-Farbmodell stets gleiche Werte
für alle drei Farbanteile, d. h. (x R, x G, x B) mit x= 0..255. Der
»Grauton« (255 R, 255 G, 255 B) entspricht reinem Weiß und der
»Grauton« (0 R, 0 G, 0 B) reinem Schwarz.
Farbwerte
Farben werden in Bildbearbeitungsprogrammen oft durch ihre
dezimalen RGB-Werte spezifiziert. Bei der Verwendung in HTML
und CSS werden Hexadezimal-Codes angegeben. Beispielsweise
besitzt die Farbe Rot = (255 R, 0 G, 0 B) den Wert #FF 00 00. Diese
hexadezimalen Werte entstehen dadurch, dass die drei einzelnen
Werte des RGB-Codes in das hexadezimale Zahlensystem konvertiert und dann hintereinander geschrieben werden. Die RGB-Werte einer Farbe können alternativ prozentual ausgedrückt werden,
wobei der Wert 255 100 % Farbe entspricht.
HSB-Farbmodell
Außer durch den RGB-Wert können Farben durch folgende Angaben beschrieben werden:
6.2 Farbmodelle *
207
Farbton (hue)
Sättigung (saturation)
Helligkeit (brightness)
Man spricht hier vom HSB-Farbmodell. Das Akronym HSB steht
für hue, saturation und brightness. Dieses Farbmodell wird auch
als HSV-Farbmodell bezeichnet. Hier wird für das Akronym anstelle der Helligkeit der Begriff value (Farbwert) verwendet.
Der Farbton gibt die eigentliche Farbigkeit einer Farbe wieder,
die auf einem Kreis in Grad-Schritten zwischen 0 und 360 Grad
gemessen wird. Beispielsweise besitzt die Primärfarbe Rot den
Farbton 0 Grad, die Primärfarbe Grün den Farbton 120 Grad und
die Primärfarbe Blau den Farbton 240 Grad.
Farbton (hue)
Die Sättigung lässt die Farben stärker oder schwächer hervortreten. Sie wird in Werten von 0 % bis 100 % angegeben. Abb. 6.2-4
zeigt, wie für den Farbton 240 Grad bei konstanter Helligkeit von
100 % die Sättigung in Stufen von 25 % abnimmt. 0 % Sättigung ergibt die Farbe Weiß.
Sättigung
(saturation)
Abb. 6.2-4: Für den Farbton 240 und die Helligkeit 100 % variiert die Sättigung
zwischen 100 % und 0 %.
Die Helligkeit beschreibt, wie sehr ein Farbton heller oder dunkler aussehen kann. Sie wird ebenfalls in Werten zwischen 0 % und
100 % definiert. Abb. 6.2-5 zeigt, wie für den Farbton 240 Grad
bei konstanter Sättigung von 100 % die Helligkeit in Stufen von
25 % abnimmt. 0 % Helligkeit ergibt die Farbe Schwarz.
Helligkeit
(brightness)
Abb. 6.2-5: Für den Farbton 240 und die Sättigung von 100 % variiert die Helligkeit zwischen 100 und 0 %.
Das HSB-Farbmodell ist besonders gut geeignet, wenn man gezielt bestimmte Farben erzeugen will [Pris03]. Abb. 6.2-6 zeigt,
wie man beispielsweise bei dem Bildbearbeitungsprogramm Photoshop den Farbton 240 Grad variieren kann. Ein möglichst reines Blau erhalten Sie bei hoher Sättigung und hoher Helligkeit
(rechts oben). Verringern Sie bei konstanter Sättigung die Helligkeit, dann erhalten Sie ein dunkles Blau, das schließlich in
Einsatz des
HSB-Modells
208
6 Farben im Web *
Schwarz übergeht (unterer Rand). Helle Blautöne erhalten Sie bei
geringer Sättigung und hoher Helligkeit (links oben).
Abb. 6.2-6: Die Markierung zeigt 30 % Sättigung und 70 % Helligkeit für den Farbton 240 (Photoshop).
Grautöne
Mit abnehmender Sättigung erhalten die Farben einen immer höheren Grauanteil. Man spricht hier von entsättigten Farben. Reine Grautöne erhält man bei einer Sättigung von 0 %. Sie können
je nach der Helligkeitsstufe zwischen Weiß (100 % Helligkeit) und
Schwarz (0 % Helligkeit) variieren. Reine Grautöne werden auch
als ungesättigte Farben bezeichnet.
Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm?
Wenn ja, dann können Sie diese Übung durchführen:
e Gehen Sie von der Primärfarbe Rot aus und erstellen Sie dazu
einen hellroten Ton, der keine Grautöne enthält.
e Erstellen Sie für den gleichen Farbton ein helles Graurot.
e Variieren Sie das reine Rot zu einem Dunkelrot, wobei der
Farbton unverändert bleiben soll.
Verschiedene
Monitore
Sicher haben Sie schon festgestellt, dass Farben auf verschiedenen Monitoren ganz unterschiedlich wirken können. Wie Farben
am Bildschirm angezeigt werden, hängt unter anderem von der
verwendeten Grafikkarte im Computer ab. Zusätzlich lassen sich
am Bildschirm weitere Einstellungen wie Kontrast und Helligkeit
durchführen.
6.2 Farbmodelle *
209
CMYK-Farbmodell
CMYK ist ein weltweiter Arbeitsstandard in der Druckindustrie. Fast alle Zeitschriften, Zeitungen und Magazine werden
im CMYK-Farbmodell gedruckt. Es wird überall dort eingesetzt,
wo Farbpigmente im Halbtonverfahren auf Materialien gedruckt
werden (Offsetdruck, Siebdruck, Laserfarbdruck, Plotter). Beim
CMYK-Farbmodell setzt sich jede Farbe aus Cyan, Magenta,
Gelb (Yellow) und Schwarz (Black) zusammen. Theoretisch wäre
Schwarz nicht notwendig, denn Cyan, Magenta und Gelb ergeben zusammen die Farbe Schwarz. Beim Vierfarbdruck wird jedoch die Farbe Schwarz dazugemischt, um dem Druckbild mehr
Tiefe und Kontraste zu geben und um reines Schwarz nicht aus
den drei Primärfarben mischen zu müssen. Daher verwendet ein
Farbdrucker die vier Farbpatronen in Cyan, Magenta, Gelb und
Schwarz.
Druckindustrie
CMYK-Farben werden durch prozentuale Angaben für die Anteile
von Cyan, Magenta, Gelb und Schwarz ausgedrückt. Beispielsweise wird ein Orangeton durch die Farbwerte (5 C, 70 M, 90 Y, 0 K)
spezifiziert. Im Allgemeinen variieren die einzelnen Farbanteile
von Stufen von 5 % oder 10 %, da genauere Angaben in der Praxis
kaum umgesetzt werden können. Abb. 6.2-7 zeigt CMYK-Farben
für einen konstanten Gelbanteil von 90 % und 0 % Schwarzanteil.
Die Magenta-Anteile variieren zwischen 0 % und 100 %, die CyanAnteile bei diesem Ausschnitt zwischen 0 % und 30 %. Die CMYKFarbe mit der Nummer 32 besitzt beispielsweise den Wert (10 C,
60 M, 90 Y, 0 K).
CMYK-Farben
spezifizieren
Abb. 6.2-7: Ausschnitt aus einer CMYK-Farbkarte für einen konstanten Gelbanteil
von 90 % und 0 % Schwarz.
210
6 Farben im Web *
Grautöne
Grautöne lassen sich im CMYK-Modell auf zwei Arten spezifizieren. Sie können einen Grauton durch reines Schwarz definieren,
z. B. (0 C, 0 M, 0 Y, 50 K). Nach den Umrechnungsformeln der
Bildbearbeitungsprogramme erhalten Sie die gleiche CMYK-Farbe auch durch eine Mischung von Cyan, Magenta, Gelb und ggf.
Schwarz. Photoshop errechnet beispielsweise für obigen Grauton den CMYK-Wert (45 C, 36 M, 35 Y, 1 K). Für das Auge können
diese Grautöne aber durchaus unterschiedlich aussehen.
Webseiten
drucken
Wenn Sie eine Webseite auf dem Farbdrucker ausgeben, dann
wandelt der Drucker die RGB-Farben automatisch in CMYK-Farben um. Vielleicht haben Sie schon festgestellt, dass die Druckerausgabe ganz anders aussieht als auf dem Bildschirm. Oft wirken
Ihre brillianten Bildschirmfarben auf dem Ausdruck relativ matt
und blass. Da man beim Bildschirm in eine Lichtquelle schaut,
besitzen die Farben in der Regel eine stärkere Leuchtkraft als
gedruckte Farben, die nur das im Raum vorhandene Licht reflektieren. Ein weiteres Problem ist, dass beide Farbmodelle einen
gewissen Farbumfang haben, der nicht übereinstimmt. Obwohl
die neuesten Programme raffinierte Algorithmen besitzen, um
RGB-Farben möglichst originalgetreu in CMYK-Farben zu wandeln, gibt es einige Farben, die nicht gedruckt werden können.
Man spricht von CMYK-Farblöchern oder nicht-druckbaren Farben.
Farbkarten
Wenn Sie einen CMYK-Farbwert in einem Bildbearbeitungsprogramm (z. B. Photoshop) einstellen und auf verschiedenen Druckern ausgeben, dann werden Sie vermutlich sehr voneinander
abweichende Farbtöne erhalten. Da die verwendeten Tinten und
Toner chemische Produkte sind, wird das Ergebnis durch Faktoren wie Temperatur, Lichtempfindlichkeit etc. beeinflusst. Auch
die Papiersorte ist zu berücksichtigen. Auf Hochglanzpapier sehen Farben beispielsweise anders aus als auf grauem Papier. Wollen Sie CMYK-Farbwerte exakt bestimmen, dann empfiehlt sich
die Verwendung von CMYK-Farbkarten, die mit unterschiedlich
großen Farbpaletten erhältlich sind. Einen Ausschnitt aus einer
einfachen Farbkarte zeigt Abb. 6.2-7.
Praktischer Einsatz der Farbmodelle
Die beschriebenen Farbmodelle sind nebeneinander im Einsatz.
HTML-Programmierer verwenden das RBG-Farbmodell. Für den
Farbentwurf eignet sich das HSB-Farbmodell am besten. Für den
Vierfarbdruck auf dem Drucker werden alle Lichtfarben in den
CMYK-Farbraum konvertiert.
Konvertierung
Farben können zwischen dem RGB- und dem HSB-Farbmodell
problemlos konvertiert werden. Beispielsweise kann ein helles
Rot durch den RBG-Wert (255 R, 125 G, 127 B), den HSB-Wert
6.2 Farbmodelle *
211
(h: 0, s: 50, b: 100) und auch durch den CMYK-Wert (0 C, 64 M,
39 Y, 0 K) beschrieben werden. In vielen Programmen zur Bildbearbeitung ist es möglich, eine Farbe auf mehrere Arten einzustellen. Abb. 6.2-8 zeigt, wie Photoshop die Farbe (255 R, 127 G,
127 B) in die verschiedenen Farbmodelle umrechnet.
Abb. 6.2-8: Photoshop zeigt dieselbe Farbe im HSB-, RGB- (dezimal und hexadezimal), LaB- und CMYK-Farbraum an.
Die Angabe »LaB« in der Abb. 6.2-8 steht für das Lab-Farbmodell. Bei Bildern im RGB- oder im CMYK-Farbraum muss das gesamte Bild für jeden Farbkanal (z. B. Rot, Grün und Blau bei RGBBildern) dargestellt werden, denn Farb- und Helligkeitsinformationen werden pro Farbkanal zusammen beschrieben. Das LabFarbmodell geht hier einen grundsätzlich anderen Weg, indem
es Farbinformationen von den Helligkeitsinformationen trennt.
L (Luminanz) ist der Helligkeitskeitskanal. Hier wird die eigentliche Zeichnung abgebildet. Der a- und der b-Kanal beschreiben
nur Farbinformationen.
Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm?
Wenn ja, dann können Sie diese Übung durchführen:
e Mit welchen Farbmodellen arbeitet das Programm?
e Wie werden die Farben von einem Farbmodell in ein anderes
konvertiert?
Lab-Farbmodell
212
6 Farben im Web *
6.3 Die 3 K’s der Farbgestaltung *
Die 3 K’s der Farbgestaltung sind Komplementärfarben, Kontraste und Kombination der Farben. Zur Bestimmung der 3 K’s
dient der Farbkreis. Je nach beabsichtigtem Effekt können Farben unterschiedlich kombiniert werden, beispielsweise durch
Splitten der Komplementärfarbe oder Aufspannen eines gleichseitigen Dreiecks.
Eine gute Farbgestaltung macht die Webseiten nicht nur attraktiv, sondern macht es dem Benutzer auch leichter, sich darin zurechtzufinden und die dargestellten Informationen zu erfassen.
Ein wirkungsvolles Mittel, um die Konzepte und Begrifflichkeiten
der Farbenlehre zu verstehen, ist der Farbkreis.
Farbkreis für
Lichtfarben
Für die Darstellung auf dem Bildschirm werden die Primärfarben
Rot, Grün und Blau verwendet. Aus diesen Farben lassen sich
die folgenden Farben »mischen«:
Grün (0 R, 255 G, 0 B) und Rot (255 R, 0 G, 0 B) ergeben Gelb
(255 R, 255 G, 0 B)
Blau (0 R, 0 G, 255 B) und Rot (255 R, 0 G, 0 B) ergeben Magenta (255 R, 0 G, 255 B)
Grün (0 R, 255 G, 0 B) und Blau (0 R, 0 G, 255 B) ergeben Cyan
(0 R, 255 G, 255 B)
Man spricht bei diesen Farben auch von den Sekundärfarben der
Lichtfarben.
Farbkreis bilden
Aus Primär- und Sekundärfarben entsteht dann ein 6-teiliger
Farbkreis mit den Farben Gelb, Rot, Magenta, Blau, Cyan und
Grün. Werden nun wieder je zwei benachbarte Farben »gemischt«, dann entsteht ein 12-teiliger Farbkreis, in dem das
graue Dreieck die drei Primärfarben zeigt (Abb. 6.3-1). Beispielsweise ergeben Gelb (255 R, 255 G, 0 B) & Rot (255 R, 0 G, 0 B) die
Farbe Orange (255 R, 127 G, 0 B). Das Mischen der Farben erfolgt
nach dem additiven Farbmischverfahren. Durch weiteres Mischen jeweils zweier benachbarter Farben kann der Farbkreis beliebig weiter detailliert werden.
3 K’s der
Farbgestaltung
Der Farbkreis dient zur Bestimmung der 3 K’s der Farbgestaltung.
Dies sind [CrCr01]:
Komplementärfarben
Kontrast
Kombination
Komplementärfarben
Wenn Sie Anzeigen in einer Illustrierte betrachten, dann fallen
Ihnen einige eher ins Auge als andere. Der Grund dafür liegt oft
6.3 Die 3 K’s der Farbgestaltung *
213
Abb. 6.3-1: 12-teiliger Farbkreis für Lichtfarben.
darin, dass bei diesen Anzeigen Komplementärfarben geschickt
eingesetzt wurden.
Komplementärfarben liegen sich im Farbkreis genau gegenüber. Beispielsweise ist die Komplementärfarbe von Orange die Farbe Eisblau (Abb. 6.3-1). Ein reines Rot mit dem
Wert (255 R, 0 G, 0 B) besitzt beispielsweise die Komplementärfarbe (0 R, 255 G, 255 B). Auf der Website von Thomas
Gebhardt (http://www.zum.de/Faecher/Materialien/gebhardt/physik/
optik/farben/kfarbe.htm) wird die Möglichkeit angeboten, auf einfache Art zu jeder beliebigen Farbe die Komplementärfarbe berechnen und anzeigen lassen.
Komplementärfarbe ermitteln
Eine Farbe mit dem Wert (x R, yG, zB) besitzt die Komplementärfarbe ((255-x) R, (255-y) G, (255-z) B.)
Kontrast
Komplementärfarben stellen gleichzeitig den höchstmöglichen
Farbkontrast dar. Sie erzeugen Spannung und machen ein Bild
lebendig. Wenn Sie Orangen vor einem blauen Hintergrund darstellen, dann wird das Bild viel »lebhafter« wirken als beispielsweise vor einem gelben Hintergrund.
Kombination der Farben
Die Farben einer Website sollen dazu beitragen, dass die Website ein harmonisches Ganzes und nicht eine Sammlung vieler
Was sind
Komplementärfarben?
Formel
214
6 Farben im Web *
einzelner Elemente bildet. Dabei spielt auch die Zielgruppe eine
entscheidende Rolle. Daher ist es wichtig, von vornherein die
Farbpalette festzulegen. Die Frage, die sich in der Praxis stellt,
lautet: Wie findet man geeignete Farbkombinationen?
Komplement
splitten
Eine Kombination von drei Farben erhält man durch Splitten der
Komplementärfarbe. Beispielsweise werden anstelle der direkten
Komplementärfarbe von Gelb die beiden benachbarten Farben
Eisblau und Violett gewählt (Abb. 6.3-2). Eine Kombination mit
fünf Farben erhält man, wenn man auf jeder Seite zwei Nachbarfarben des Komplements wählt. Beispielsweise können in der
Abb. 6.3-2 für die Komplementärfarbe zu Gelb (d. h. Blau) die
Nachbarbarben Cyan und Eisblau sowie Violett und Magenta mit
Gelb kombiniert werden.
Abb. 6.3-2: Für eine Kombination von drei Farben kann die Komplementärfarbe
gesplittet werden.
Farbklänge
Werden aus dem Farbkreis drei Farben gewählt, die ein gleichseitiges Dreieck aufspannen, dann entstehen Farbkombinationen,
die kontrastreich wirken, aber dennoch harmonisch zusammenpassen und ästhetisch angenehm wirken. Es entsteht ein FarbDreiklang (Abb. 6.3-3). Analog lässt sich durch Aufspannen
eines Quadrats im Farbkreis ein Farb-Vierklang bilden.
Benachbarte
Farben
Farben, die auf dem Farbkreis direkt nebeneinander liegen, werden als benachbarte Farben oder analoge Farben bezeichnet.
Werden solche Farben kombiniert, z. B. Gelb, Gelbgrün, Grün,
dann entsteht ein harmonischer Gesamteindruck, der beim Betrachter Ruhe und Ausgeglichenheit assoziiert. Es entstehen
Farbkombinationen, die auch in der Natur vorkommen können
(Gelber Löwenzahn auf einer saftigen grünen Wiese).
6.3 Die 3 K’s der Farbgestaltung *
215
Abb. 6.3-3: Eine Kombination mit 3 Farben ergibt sich durch Bilden eines gleichseitigen Dreiecks im Farbkreis.
Die Farben im Farbkreis lassen sich in kalte und warme Farben
einteilen, wobei die Farben Grün und Magenta auf der Schnittstelle liegen und als neutral angesehen werden (Abb. 6.3-4). Generell eignen sich die kalten Farben eher als Hintergrundfarben, weil sie optisch mehr zurücktreten. Die warmen Farbtöne
sollten dagegen für Texte und Objekte im Vordergrund gewählt
werden, weil sie dem Betrachter weiter vorne stehend erscheinen.
Abb. 6.3-4: Der Farbkreis enthält je zur Hälfte kalte und warme Farben.
Warme und
kalte Farben
216
6 Farben im Web *
Erstellen Sie mit Ihrem Bildbearbeitungsprogramm Grafiken, die
aus verschiedenen Rechtecken bestehen. Alternativ können Sie
in HTML mehrspaltige Tabellen erstellen und die Hintergrundfarben der Zellen entsprechend wählen. Sie müssen dann mit
Hexadezimalwerten arbeiten:
e Wählen Sie zwei Komplementärfarben.
e Kombinieren Sie drei Farben durch Splitten des Komplee
e
e
e
e
ments.
Bilden Sie einen Farb-Dreiklang.
Bilden Sie einen Farb-Vierklang.
Kombinieren Sie drei benachbarte Farben.
Kombinieren Sie drei warme Farben.
Kombinieren Sie drei kalte Farben.
Wie wirken diese Farbkombinationen auf Sie? Welche Assoziationen wecken Sie?
6.4 Farb-Psychologie **
Die Wahrnehmung von Farben wird beeinflusst durch biologische, kulturelle und individuelle Grundlagen. Im westlichen Kulturkreis rufen Farben bestimmte Assoziationen hervor, die jedoch mehr oder weniger differieren können.
In vielen Websites werden Farben intensiv eingesetzt. Sie machen eine Website aber nicht nur attraktiver, sondern können
auch das Gegenteil bewirken. Oft werden Farben unbewusst
wahrgenommen und lösen bei den Betrachtern unterschiedliche Gefühle aus. Diese subjektive Farbwahrnehmung wird beeinflusst durch (vgl. [This00]):
1
2
3
Biologische Grundlagen
Kulturelle Grundlagen
Individuelle Grundlagen
1 Biologische
Grundlagen
Die Farbe Rot wird vom Menschen sehr viel stärker wahrgenommen, weil das Auge etwa doppelt so viele Sehzellen dafür besitzt
(ca. 64 %) wie für die Farbe Grün (ca. 34 %). Für die Farbe Blau besitzt das Auge nur ca. 2 % Sehzellen. Daher kann mit der Farbe
Rot unabhängig von allen anderen Einflüssen immer eine starke
Aufmerksamkeit erreicht werden.
2 Kulturelle
Grundlagen
Der Kulturkreis, in dem ein Mensch lebt, besitzt ebenfalls einen
erheblichen Einfluss. Beispielsweise ist Weiß in der westlichen
Kultur die Farbe der Reinheit und Klarheit, während es in Ländern wie Japan und China die Farbe des Todes und der Trauer
ist. Im Gegensatz zu klassischen Anwendungen werden Websites
rund um den Globus benutzt. Werden Farben ohne Berücksichtigung ihrer Bedeutung in den Kulturkreisen eingesetzt, dann kön-
6.4 Farb-Psychologie **
217
nen sie negative Assoziationen bei den Benutzern der Website
hervorrufen.
Jeder Mensch hat bewusst oder unbewusst bestimmte Vorlieben
und Abneigungen für spezielle Farben. Auch die Moderichtungen
können den individuellen Geschmack beeinflussen.
3 Individuelle
Grundlagen
In unserem Kulturkreis rufen Farben innerhalb einer gewissen
Bandbreite ähnliche Assoziationen hervor. Wie vielfältig diese
sein können, zeigt die folgende Aufstellung:
FarbAssoziationen
Rot ist die Farbe des Feuers. Sie ist die kraftvollste und dominanteste Farbe und eine ideale Signalfarbe, um Aufmerksamkeit
zu erregen.
Aktivität, Dynamik, Vitalität, Energie, Entschlossenheit
Liebe, Kraft, Temperament, Leidenschaft, Aggression
Feuer, Gefahr, Warnung, Blut, Wut, Zorn, Brutalität, heiß, Fehler, Stopp
Orange ist eine Power-Farbe, die lebendig, aktiv und energiegeladen wirkt.
Wärme, Lebhaftigkeit, Ausgelassenheit, Wildheit, Aufgeschlossenheit, Kontaktfreude, Jugendlichkeit, Gesundheit,
Selbstvertrauen
Aktivität, Aufmerksamkeit, Mut, Spaß, Glück, Optimismus,
Lebensfreude
herbstlich, Halloween, untergehende Sonne
Leichtlebigkeit, Aufdringlichkeit, Ausschweifung, billig und
unseriös
Gelb ist die Farbe der Sonne, die Licht und Heiterkeit vermittelt.
Sonne, Wärme, Helligkeit, Licht
Heiterkeit, Freude, Lebhaftigkeit, Verspieltheit, Glück, Optimismus, Freundlichkeit, Hoffnung
Wissen, Weisheit, Vernunft, Logik
Wert, Gold
Vorsicht
Schmutzige Gelbtöne: Täuschung, Rachsucht, Pessimismus,
Egoismus, Geiz, Neid
Grün ist die Farbe der Wiesen und Wälder, die Wachstum, Frische
und Hoffnung symbolisiert. Sie wirkt entspannend und beruhigend.
Natur, Vegetation, Wachstum, Üppigkeit, Frische, Fruchtbarkeit
Ruhe, Ausgeglichenheit, Entspannung, Friedlichkeit, Hoffnung
Großzügigkeit, Sicherheit, Harmonie, Erneuerung des Lebens
Gift, Neid, Gleichgültigkeit, Stagnation, Müdigkeit
218
6 Farben im Web *
Unerfahrenheit, Neuheit
Cyan (Türkis) ist die Farbe des Meeres an einem sonnigen Tag.
Sie wirkt frisch und klar.
Großzügigkeit, Wachheit, Bewusstsein, Klarheit, geistige Offenheit, Freiheit
Kühle und Distanz, Gefühl der Leere
Blau ist die Farbe der Weite (Himmel, Meer) und vermittelt Ruhe
und Vertrauen.
Himmel, Meer, Unendlichkeit, Weite
Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht
Harmonie, Intuition, Ausgeglichenheit, Glaubwürdigkeit
Kühle, Passivität, Traumtänzerei, Nachlässigkeit, Melancholie
Violett ist eine würdevolle Farbe, die außergewöhnlich und extravagant wirkt.
Inspiration, Mystik, Magie, Kunst
Außergewöhnlichkeit und Extravaganz
Frömmigkeit, Buße, Opferbereitschaft
Stolz, Arroganz, Unmoral
Magenta (Pink) ist eine sanfte Farbe, die in der Natur hauptsächlich als Blütenfarbe vorkommt.
Idealismus, Dankbarkeit, Engagement, Ordnung, Mitgefühl
Snobismus, Arroganz, Dominanz
Weiß ist in unserer Kultur die Farbe der Reinheit und Klarheit.
Reines Weiß kann auch sehr kalt wirken.
Reinheit, Klarheit, Ordnung, Sauberkeit
Vollkommenheit, Erhabenheit, Unschuld, Authentizität
Unnahbarkeit, Empfindsamkeit, kühle Reserviertheit
Winter, Kälte, Eis, Schnee
Grau ist die Farbe des Himmels an einem trüben Tag. Sie kann
für Nüchternheit und Eleganz stehen, aber auch für Langeweile
und Trostlosigkeit.
Neutralität, Nüchternheit, Vorsicht, Zurückhaltung, Kompromissbereitschaft
Theorie, Nachdenklichkeit, Eleganz, Sachlichkeit, Technologie
Langeweile, Eintönigkeit, Trostlosigkeit, Elend, Unsicherheit,
Lebensangst
Bewölkt, Düsterkeit, Alter
Schwarz ist in unserer Kultur die Farbe von Trauer und Tod, wirkt
aber auch elegant.
Eleganz, Würde, Ansehen, Feierlichkeit, Schwere
6.5 Farben kombinieren *
219
Nacht, Geheimnis, Undurchdringlichkeit, Unergründlichkeit,
Unabänderlichkeit
Schlechtes, Negation, Spuk, Angst, Furcht, Tod, Trauer, Melancholie
Die aufgeführten Assoziationen wurden folgenden Literaturquellen entnommen: [This00], [Powe00], [Crüg02]. Andere Literaturquellen nennen teilweise gleiche und teilweise andere Assoziationen. Das zeigt, wie schwierig es ist, die Wirkung von Farben
systematisch zu erfassen.
Wie eine Farbe letztendlich empfunden wird, hängt noch von
weiteren Faktoren ab. Dazu gehören:
Kombination, in der Farben auftreten (siehe Kapitel »Farben
kombinieren«, S. 219),
Helligkeit und Sättigung einer Farbe (Hellblau wird anders
empfunden als Marineblau) und
Individueller Geschmack: Wer die Farbe Orange mit einem negativen Erlebnis verbindet, wird in dieser Farbe nichts Positives erkennen.
e Was ist Ihre Lieblingsfarbe?
e Welche Farbe können Sie überhaupt nicht leiden?
e Verbinden Sie mit den oben aufgeführten Farben die gleichen
Assoziationen, die hier angegeben sind?
e Welche Farben werden auf den Websites verwendet, deren
Farbgestaltung Ihnen am besten gefällt?
6.5
Farben kombinieren *
Je nach gewünschtem Effekt können Farben unterschiedlich
kombiniert werden. Bewährte Kombinationen sind: Komplementärfarben, benachbarte Farben, warme und kalte Farben. Weitere beliebte Kombinationen sind: bunte/unbunte Farben, helle/dunkle Farben sowie gesättigte/ungesättigte Farben. Durch
Simultankontrast können Farben in Abhängigkeit von ihrer Umgebung unterschiedlich aussehen.
Bei der Gestaltung einer Website sollten Sie nach der Devise »Gestalten Sie farbig und nicht bunt« vorgehen. Geschickt eingesetzte Farben schaffen mehr Übersichtlichkeit und Transparenz.
Zu viele Farben verwirren und erzeugen Unruhe beim Benutzer.
Farben lassen sich auf einer Website sehr unterschiedlich kombinieren. Hier werden grundsätzliche Kombinationsmöglichkeiten vorgestellt. Die meisten Websites verwenden mehrere dieser
Kombinationen, die sich außerdem überlagern können. Außerdem wirkt jede Farbe für sich: beispielsweise hat reines Rot eine
Weitere
Einflussfaktoren
220
6 Farben im Web *
andere Wirkung als reines Blau. Genaueres dazu finden Sie im
Kapitel »Farb-Psychologie«, S. 216.
Komplementärfarben
Beispiel
Der Einsatz von Komplementärfarben ruft einen starken Farbkontrast hervor und verschafft dadurch einer Website eine gewisse Spannung. Wie stark dieser Kontrast ist, hängt aber noch
zusätzlich von den verwendeten Farben ab. Bei gesättigten Farben wirkt der Kontrast besonders intensiv. Kombinationen von
entsättigten oder hellen Komplementärfarben besitzen eine weniger starke Wirkung.
Auf der Website www.diba.de (Abb. 6.5-1) wird ein Komplementärkontrast Blau-Orange eingesetzt. Blau ist dabei die dominierende Farbe, da es sachlich und seriös wirkt. Orange, als
lebendige Farbe, bietet einen idealen Kontrast.
Abb. 6.5-1: Die Website diba.de arbeitet mit dem Komplementärkontrast BlauOrange.
Benachbarte
Farben
Beispiel
Benachbarte Farben (auch analoge Farben genannt) erwecken
oft einen harmonischen Eindruck der Website. Auch hier können
sehr unterschiedliche Wirkungen entstehen, weil einige Kombinationen von benachbarten Farben intensiver wirken als andere.
Auf der Website der Restaurantkette Subway (Abb. 6.5-2) werden die benachbarten Farben Grün und Gelb eingesetzt. Sie
suggerieren zugleich Frische und Natürlichkeit sowie Heiterkeit und Freude und versuchen auf diese Weise das Image des
Unternehmens zu transportieren.
6.5 Farben kombinieren *
221
Abb. 6.5-2: Auf www.subway-sandwiches.de werden die benachbarten (analogen)
Farben Grün und Gelb verwendet.
Werden ausschließlich warme Farben kombiniert, dann entsteht meistens eine gemütliche und persönliche Atmosphäre.
Das gilt vor allem für Brauntöne und Farben im Orange- und
Rost-Bereich. Farbkombinationen mit hohem Rotanteil wirken
leicht etwas aggressiv. Kalte Farben vermitteln einen Eindruck
von Sachlichkeit und Funktionalität, können aber auch kalt und
unpersönlich wirken. Bestehen Farbkombinationen ausschließlich aus warmen oder kalten Farben, dann entsteht im Allgemeinen eine harmonische Gesamtwirkung. Handelt es sich zusätzlich um benachbarte Farben, dann wird dieser Effekt noch stärker betont. Werden dagegen warme und kalte Farben miteinander
kombiniert, dann entsteht ein Kontrast , der eine gewisse Spannung hervorruft. Handelt es sich bei den gewählten Farben zusätzlich um Komplementärfarben, dann wird dieser Effekt noch
verstärkt.
Das Projekt CSS Zen Garden (http://www.csszengarden.com/)
zeigt, wie unterschiedlich Webinhalte durch ihr Design wirken
können. Die gleiche HTML-Seite wird auf immer neue Weise in
Szene gesetzt. Abb. 6.5-3 zeigt im Vergleich ein kaltes und ein
warmes Farbschema.
Bei den Farben wird unterschieden zwischen den bunten oder
chromatischen Farben und den neutralen Farben, die als unbunte oder nicht-chromatische Farben bezeichnet werden.
Bunte Farben sind beispielsweise Rot, Blau oder Violett. Zu den
unbunten Farben gehören Weiß, Schwarz und die verschiedenen Grautöne. Die Kombination von bunten und unbunten Farben ist häufig zu finden und sehr beliebt. Unbunte Hintergrün-
Warm vs. kalt
Beispiel
Bunt vs.unbunt
222
6 Farben im Web *
de (insbesondere Schwarz) bringen bunte Farben stärker zum
Leuchten.
Abb. 6.5-3: Beispiel für die Verwendung kalter und warmer Farben im Vergleich.
Beispiel
Die meisten Firmen verwenden als Identifikationsmerkmal
eine bestimmte Farbe. Wird diese auf der Website mit unbunten Farben kombiniert, wirkt sie noch stärker und die Marke
bzw. das Erkennungsmerkmal des Unternehmens wird bestmöglich transportiert. Abb. 6.5-4 zeigt, wie das Grün, die
»Markenfarbe« von E-Plus, deutlich hervorgehoben wird.
Tipp
Der hellste Grauton, der von Weiß kaum unterschieden werden
kann, ist (254 R, 254 G, 254 B), der dunkelste (1 R, 1 G, 1 B).
Um helle Grautöne zu erreichen, beginnen Sie bei Weiß und
erhöhen alle drei Farbanteile gleichmäßig. Umgekehrt gehen
Sie bei dunklem Grau vom Schwarz aus.
Helligkeit und
Sättigung
variieren
Die Kombination von Farben, die sich nur in ihrer Helligkeit
und/oder ihrer Sättigung unterscheiden, führt häufig zu einem
harmonischen Gesamtbild.
Helligkeit
Hellere Farben treten mehr in den Hintergrund und vermitteln
den Eindruck von Weite. Sie eignen sich besonders gut als Hintergrundfarben von Texten. Dunkle Farben können düster und
bedrückend wirken. Sie heben aber auch hervor und sind als
Schriftfarbe gut geeignet.
Sättigung
Je stärker eine Farbe gesättigt ist, desto dominanter wirkt sie
und zieht den Blick des Betrachters vermehrt auf sich. Großflächig eingesetzt werden diese Farben als schreiend und grell
empfunden. Farben mit einer geringen Sättigung besitzen eine
dezentere Wirkung und sind oft gut als Hintergrundfarben einsetzbar. Entsättigte Farben besitzen weniger Leuchtkraft und
wirken dadurch gedämpft. Im Modebereich werden sie als Puderfarben bezeichnet. Farbbereiche in entsättigten Farben treten optisch weiter zurück und sind daher für die Darstellung
6.5 Farben kombinieren *
223
Abb. 6.5-4: Auf der Website www.eplus.de sieht man eine bunt-unbunte Farbkombination. Das Grün, die Erkennungsfarbe des Unternehmens, sticht dadurch
noch deutlicher hervor.
von Perspektiven geeignet. Gesättigte Farben besitzen eine hohe Leuchtkraft und können sehr aufdringlich wirken. Voll gesättigte Farben sollten daher nur für kleinere Bereiche verwendet werden. Auch durch die Kombination mit unbunten Farben
und/oder entsättigten Farben wird ihre Wirkung gemildert.
In Abb. 6.5-5 ist zu erkennen, wie durch die Variation der Farbe Braun in unterschiedlichen Helligkeitsnuancen bzw. Sättigungsgraden ein sehr harmonischer Gesamteindruck entsteht.
Durch die Kombination sehr heller und gleichzeitig stark entsättigter Farben lassen sich Pastellfarben erzeugen, die sehr zart
und leicht wirken und daher gut als Hintergrundfarben geeignet
sind. Um zu einer beliebigen Farbe den passenden Pastellton zu
erzeugen, sollten Sie eine hohe Helligkeit und einen sehr niedrigen Sättigungsgrad wählen.
In Abb. 6.5-6 wird als Pastellfarbe ein sehr helles und stark
entsättigtes Orange genutzt.
Beispiel
Pastellfarben
Beispiel
224
6 Farben im Web *
Abb. 6.5-5: Durch den Einsatz der Farbe Braun in unterschiedlichen Helligkeitsnuancen bzw. Sättigungsgraden entsteht ein sehr harmonischer Gesamteindruck.
Abb. 6.5-6: Der sehr helle und stark entsättigte Orangeton lässt die Website zart
und leicht wirken.
Simultankontrast
Eine Farbe kann in Abhängigkeit von ihrer Umgebung ganz unterschiedlich wirken. Vor einem dunklen Hintergrund wirkt eine
Farbe heller als vor einem hellen Hintergrund. Vor einem Hintergrund in einer sehr kühlen Farbe wird dasselbe Farbobjekt
»wärmer« wirken als vor einem Hintergrund in einer warmen
Farbe. Helle Hintergründe lassen ein Farbobjekt eher in den Vor-
6.5 Farben kombinieren *
225
dergrund treten, während dunkle Hintergründe das gleiche Farbobjekt mehr zurücknehmen. Dieser Effekt wird als Simultankontrast bezeichnet [Crüg02]. Die Ursache liegt darin, dass das
menschliche Auge nicht dazu geschaffen ist, Farben möglichst
originalgetreu wiederzugeben, sondern es ist besser geeignet,
Farbunterschiede zu sehen. Wird beispielsweise für Hyperlinks
eine bestimmte Textfarbe auf verschiedenen Hintergrund-Farben
verwendet, dann kann der Benutzer wegen des Simultankontrastes zwei geringfügig unterschiedliche Farben wahrnehmen.
Die Abb. 6.5-7 zeigt im Vergleich die unterschiedliche Wirkung der sich ähnelnden Blau- und Rottöne einmal vor einem
dunklen und einmal vor einem hellen Hintergrund.
Abb. 6.5-7: Obwohl sich Blau- und Rottöne auf beiden Seiten sehr ähneln, unterscheidet sich die Wirkung der Farbtöne deutlich. Der helle Hintergrund im Beispiel
rechts unten lässt die Farben mehr in den Vordergrund treten.
Analysieren Sie Farbkombinationen von Websites, die Sie häufig
besuchen:
e Werden Komplementärfarben verwendet? Wenn ja, welche?
e Welche benachbarten Farben werden verwendet?
e Werden nur warme, nur kalte oder kalte und warme Farben
kombiniert eingesetzt?
e Liegt eine bunte/unbunte Kombination vor?
e Welche Farben werden für den Hintergrund verwendet?
e Wirkt sich der Simultankontrast aus?
Beispiel
226
6 Farben im Web *
6.6 Schriftfarbe und Hintergrund *
Gute Lesbarkeit wird durch einen hohen Kontrast von Schrift
und Hintergrund erreicht. Ein rein weißer Hintergrund ermüdet
jedoch die Augen stark. Auch weiße Schrift auf schwarzem Hintergrund erschwert die Lesbarkeit. Meistens ist dunkle Schrift
auf einem pastellfarbenen Hintergrund am besten lesbar. Durch
den Simultankontrast kann eine Schriftfarbe auf verschiedenen Hintergründen unterschiedlich wirken. Bei Verwendung von
stark gesättigten Farben tritt der Chromostereopsis-Effekt auf.
Die richtige Wahl von Schrift- und Hintergrundfarben hat einen
entscheidenden Einfluss auf die Lesbarkeit einer Website.
Schwarz auf
Weiß
Der stärkste Kontrast wird durch die Farben Schwarz und Weiß
erreicht. Ein hoher Kontrast erleichtert das Lesen – ein Grund,
warum die meisten Bücher mit schwarzer Schrift auf weißem Papier gedruckt sind. Ein extremer Kontrast macht das Lesen allerdings anstrengend. Daher wird bei vielen Büchern kein reinweißes, sondern ein leicht abgetöntes Papier verwendet.
Hintergrundfarben
Wenn größere Textmengen auf dem Bildschirm gelesen werden
sollen, dann sollten Sie Weiß als Hintergrundfarbe möglichst vermeiden. Im Gegensatz zu Papier, von dem das Licht reflektiert
wird, schaut der Benutzer bei einem Bildschirm direkt in die
Lichtquelle. Je heller der Bildschirm ist, desto mehr werden die
Sehzellen im Auge angeregt, was zu einer baldigen Ermüdung
führt. Anstelle von Weiß sollten Sie für den Hintergrund Pastellfarben benutzen, die das Lesen längerer Texte wesentlich angenehmer machen. Als Schriftfarben eignen sich außer Schwarz
auch alle dunklen Farben. Insbesondere eine Ton-in-Ton-Kombination kann sehr elegant wirken (Abb. 6.6-1).
Abb. 6.6-1: Hier wurde dunkelgrüne Schrift auf einem hellgrünen Hintergrund
gewählt.
Weiß auf
Schwarz
Weiße Schrift auf schwarzem Hintergrund ist besonders anstrengend zu lesen, weil Schwarz »schwerer« als Weiß wirkt und daher
die weiße Schrift sehr dünn aussehen lässt (siehe Marginalspalte). Auch andere dunkle Hintergrundfarben bewirken diesen Effekt. Wenn größere Textmengen gelesen werden sollen, sollten
Sie möglichst darauf verzichten. Für kürzere Texte (z. B. Hyperlinks) stellt sich dieser Effekt aber nicht als Problem dar. Helle
Schrift auf dunklem Grund wirkt oft prägnanter und ist auch bes-
227
6.6 Schriftfarbe und Hintergrund *
ser lesbar, wenn Fettschrift verwendet oder eine etwas größere
Schrift gewählt wird.
Kontrast optimieren, nicht maximieren
Die beste Lesbarkeit erreichen Sie mit einem hohen Kontrast,
jedoch nicht unbedingt mit dem höchstmöglichen Kontrast.
Tipp
Hintergrundbilder können auf einer Website sehr attraktiv wirken. Sie erschweren aber oft die Lesbarkeit von Texten enorm.
Bei größeren Textmengen sollten sie daher nicht verwendet werden. Bei kleineren Textpassagen kann man die Lesbarkeit verbessern, indem für den Text Fettschrift gewählt wird.
Hintergrundbilder
Warme Farben erscheinen dem Betrachter weiter vorne stehend
als kalte Farben. Sie sind daher für Schriftfarben gut geeignet.
Damit ein Text gut lesbar ist, reicht aber die richtige Wahl von
kalten und warmen Farben nicht aus. Bei der Abb. 6.6-2 werden
beim oberen Text reine Komplementärfarben verwendet: für die
orangefarbene Schrift (255 R, 125 G, 0B) bzw. (h:29, s:100, b:100)
und für den blauen Hintergrund (0 R, 125 G, 255 B) bzw. (h:211,
s: 100, b:100). Beim mittleren Text wurde die Sättigung des Hintergrunds reduziert (h:211, s:30, b:100) und eine etwas dunklere
Schrift gewählt (h:29, s:100, b:65). Das Ergebnis ist eine bessere Lesbarkeit. Ein noch stärker entsättigter Hintergrund (h:211,
s:10, b:100) und eine noch dunklere Schrift (h:29, s:100, b:35)
führt beim unteren Text zu einer weiteren Verbesserung.
Vordergrund/
Hintergrund
Abb. 6.6-2: Ein hoher Kontrast garantiert nicht automatisch eine gute Lesbarkeit.
Bei der Abb. 6.6-3 besitzt der orange-rote Text auf beiden Hintergründen den gleichen Farbwert, erscheint aber auf dem dunklen
Hintergrund wesentlich rötlicher als auf dem hellgelben Hintergrund. Hier tritt der Simultankontrast auf. Zusätzlich wirkt der
Effekt, dass das dunkle Blau die Schrift dünner erscheinen lässt.
Hier wäre Fettschrift angebracht. Bei der orange-roten Schrift auf
hellgelbem Hintergrund ist übrigens der Kontrast zu gering. Es
ist keine geeignete Kombination für längere Textpassagen, aber
für Hyperlinks etc. durchaus akzeptabel.
Simultankontrast
228
6 Farben im Web *
Abb. 6.6-3: Auch bei Schriftfarben kann sich der Simultankontrast auswirken.
Chromostereopsis
Wenn stark gesättigte Farben verwendet werden, dann scheint
es, als ob dargestellte Objekte entweder etwas vor oder hinter
dem Bildschirm liegen. Das Auge hat Probleme diese Objekte
exakt zu fokussieren. Das führt dazu, dass das Lesen von Text
ausgesprochen anstrengend wird und sogar Kopfschmerzen hervorrufen kann. Dieser Effekt wird Chromostereopsis genannt
(Abb. 6.6-4). Sie sollten diese Kombination unbedingt vermeiden – auch bei kurzen Textpassagen.
Abb. 6.6-4: Hier wirkt sich der Chromostereopsis-Effekt aus.
Gesättigte
Hintergrundfarbe
Unabhängig vom Chromostereopsis-Effekt eignen sich gesättigte
Farben im Allgemeinen nicht als Hintergrundfarbe, weil sie sehr
dominant sind, es sei denn, man will diesen Effekt bewusst ausnutzen. Die Schrift muss dann jedoch unbedingt in einer geeigneten Farbe gewählt werden. Bei der Abb. 6.6-5 wird die gleiche
Schriftart und -größe wie der Abb. 6.6-4 verwendet. Allein durch
Vermeiden des Chromostereopsis-Effekts entsteht eine sehr viel
bessere Lesbarkeit.
Abb. 6.6-5: Hier werden gesättigte Hintergrundfarben ohne ChromostereopsisEffekt verwendet.
Wenn Sie Grundkenntnisse in HTML oder einem komfortablen
HTML-Editor besitzen, dann können Sie diese Übung durchführen:
e Erstellen Sie eine gut gefüllte Textseite mit schwarzer Schrift
auf weißem Hintergrund.
e Erstellen Sie dann die gleiche Textseite mit einer schwarzen
Schrift auf pastellfarbenem Hintergrund und vergleichen Sie
die Lesbarkeit beider Texte.
6.7 Farbenblindheit **
229
e Erstellen Sie dann eine dritte Version mit blauer Schrift auf
rotem Grund, wobei Sie gesättigte Farben verwenden sollten.
Wie empfinden Sie nun die Lesbarkeit?
6.7
Farbenblindheit **
Bei einer totalen Farbenblindheit sind nur noch Grautöne sichtbar. Meistens tritt jedoch eine Rot-, Grün- oder Blaublindheit
oder auch nur eine Farbschwäche auf. Die meisten »Farbenblinden« haben Probleme, Farben im Rot-Grün-Bereich zu unterscheiden. Ein barrierefreies Webdesign muss die speziellen
Anforderungen von Farbenblinden berücksichtigen.
Im Auge sind die Zapfen der Netzhaut dafür verantwortlich, Farben zu unterscheiden. Das menschliche Auge enthält normalerweise 3 Zapfentypen, die als
Wie entsteht
Farbe?
L-Typ (für lange Wellenlänge = Rot)
M-Typ (für mittlere Wellenlänge = Grün) und
S-Typ (für kurze Wellenlänge = Blau)
bezeichnet werden. Vereinfachend spricht man auch von roten,
grünen und blauen Zapfen. Außer den Zapfen befinden sich in
der Netzhaut Stäbchen, die für die Unterscheidung von Hell und
Dunkel zuständig sind.
Farbenblindheit
Die Augen »funktionieren« jedoch nicht bei allen Menschen auf
diese Weise. Einige kennen Farben nur vom Hörensagen und etwa acht Prozent der Männer können die Farben Rot und Grün
nicht einwandfrei unterscheiden. Bei einer Farbenblindheit unterscheidet man
eine totale Farbenblindheit (Monochromasie) und
eine partielle Farbenblindheit oder das Zweifarbensehen (Dichromasie), wobei hier nur zwei Zapfenarten aktiv sind.
Bei der totalen Farbenblindheit können keine Farben, sondern nur Helligkeitsunterschiede wahrgenommen werden. Man
bezeichnet diese Menschen als Monochromaten. Sie sehen ihre
Umwelt grau in grau ohne bunte Farben. Totale Farbenblindheit
tritt glücklicherweise nur sehr selten auf. Die Farbempfindung
ist besonders wichtig, wenn sich Objekte kaum in ihrer Helligkeit, sondern fast nur in den verwendeten Farben unterscheiden. In der Abb. 6.7-1 sehen Sie – als normal Farbsichtiger! –
einen herbstlichen Wald mit Farbtönen im roten und grünen Bereich. Wie viele Informationen über die Farbe wahrgenommen
werden, zeigt die Abb. 6.7-2. Hier geht das Laub, das nur wenig
Totale
Farbenblindheit
230
6 Farben im Web *
Helligkeitsunterschiede besitzt, ineinander über. Nur die weißen
Stämme heben sich deutlich von den Blättern ab.
Abb. 6.7-1: So sieht ein normal sehender Betrachter einen herbstlichen Wald.
Abb. 6.7-2: Sichtweise eines Monochromaten. Hier können nur Helligkeitsunterschiede wahrgenommen werden.
Rotblindheit
Bei der Rotblindheit (Protanopie) wird langwelliges Licht (Rot)
nicht wahrgenommen. Die betreffenden Personen verwechseln
Rot, Gelb, Braun und Grün miteinander und können Violett
nicht von Blau unterscheiden. Außerdem sehen sie Dunkelrot als
Schwarz. In der Abb. 6.7-3 kann der Betrachter rotes und grünes Laub der gleichen Helligkeit nicht unterscheiden. Besonders
deutlich ist dies zu sehen, wenn Sie den rechten Bildrand, wo
sich rote und grüne Blätter mischen, mit dem Originalbild vergleichen.
Grünblindheit
Bei der Grünblindheit (Deuteranopie) wird mittelwelliges Licht
(Grün) nicht wahrgenommen. Mit Ausnahme der DunkelrotSchwarz-Verwechselung bestehen die gleichen Probleme wie bei
der Rotblindheit, d. h., grünblinde Personen verwechseln Rot,
6.7 Farbenblindheit **
231
Abb. 6.7-3: Ein rotblinder Betrachter kann das rote Herbstlaub nicht vom grünen
Laub unterscheiden.
Gelb, Braun und Grün miteinander und können Violett nicht von
Blau unterscheiden (Abb. 6.7-4). Da in beiden Fällen die Unterscheidung von Rot und Grün problematisch ist, spricht man von
der Rot-Grün-Farbenblindheit.
Abb. 6.7-4: Ein grünblinder Betrachter kann rote, grüne und gelbgrüne Blätter
nicht unterscheiden.
Seltener als die Rot-Grün-Farbenblindheit ist die Blaublindheit
(Tritanopie, auch: Blau-Gelb-Blindheit genannt). Blaublinde Betrachter besitzen keine Farbempfindung im kurzwelligen Bereich
(Blau). Das führt zu Unterscheidungsschwierigkeiten von Blau
und Grün sowie von Gelbgrün und Grau. In der Abb. 6.7-5 sieht
der blaublinde Betrachter beispielsweise das gelbgrüne Laub in
Grautönen.
Blaublindheit
Sicher ist Ihnen aufgefallen, dass die Farbempfindungen von Rotund Grünblinden recht ähnlich sind. Wenn Sie die Abb. 6.7-4 betrachten, fragen Sie sich vielleicht, warum grünblinde Betrachter
Grüntöne sehen können. Der Grund dafür ist, dass die roten und
Auge erkennt
Farbunterschiede
232
6 Farben im Web *
Abb. 6.7-5: Blaublinde Betrachter haben Probleme die Farben Gelbgrün und Grau
zu unterscheiden.
grünen Zapfen ein sehr ähnliches Spektrum wahrnehmen. Das
Gehirn ermittelt rote und grüne Farbempfindungen nicht direkt,
in dem es die roten und grünen Zapfeninformationen auswertet,
sondern berechnet die Farbunterschiede. Wenn Rotblinde bzw.
Grünblinde keine roten bzw. keine grünen Zapfen besitzen, dann
bedeutet dies, dass sie keine Unterschiede zwischen roten und
grünen Farben wahrnehmen können. Daher sehen Abb. 6.7-3 und
Abb. 6.7-4 relativ ähnlich aus [Visc03].
Farbanomalie
Farbfehlsichtigkeiten müssen nicht immer in der extremen Form
vorkommen, dass ein Zapfentyp völlig ausfällt (Dichromasie).
Es gibt auch eine abgeschwächte Form, die als Farbanomalie
bezeichnet wird. Im Unterschied zur Dichromasie besitzen die
betroffenen Personen alle drei Zapfentypen, wobei ein Typ jedoch Veränderungen im Absorptionsspektrum besitzt. Die Betroffenen verwechseln Rot und Grün nur unter ungünstigen Bedingungen (z. B. im Straßenverkehr bei schlechter Sicht). Man
spricht dann von einer Rotschwäche (Protanomalie), einer Grünschwäche (Deuteranomalie) oder einer Blau-Gelb-Schwäche (Tritanomalie).
Rot-/
Grünschwäche
Abb. 6.7-6 zeigt, wie bei einer vorliegenden Grünschwäche der
Herbstwald gesehen wird. Abb. 6.7-7 zeigt im Vergleich dazu
das Motiv bei einer Rotschwäche. Auch hier tritt in beiden Fällen eine ähnliche Verfälschung der Farben auf. Im Gegensatz
zur Rotblindheit bzw. Grünblindheit kann der Betrachter jedoch
Rot- und Grüntöne als unterschiedliche Farben wahrnehmen. Da
sich beide Farbanomalien relativ ähnlich auswirken, spricht man
auch von einer Rot-/Grünschwäche.
Häufigkeit
Die meisten Störungen des Farbempfindens sind angeboren, seltener erworben. Es sind wesentlich mehr Männer (etwa 8 %) als
Frauen (etwa 0,4 %) betroffen. Am häufigsten tritt eine Grün-
6.7 Farbenblindheit **
Abb. 6.7-6: So sehen Benutzer mit einer Grünschwäche das Motiv des Herbstwaldes.
Abb. 6.7-7: Herbstwald mit den Augen eines rotschwachen Benutzers gesehen.
schwäche auf (50 % der Fälle), gefolgt von Grünblindheit (25 %),
Rotblindheit (15 %) und Rotschwäche (10 %). Störungen im Blaubereich sind sehr selten, noch seltener ist eine totale Farbenblindheit.
Auf
der
Website
von
IchBinFarbenblind
(http://www.
können Sie testen, ob Sie selbst farbenblind sind. Natürlich ist ein Test am Bildschirm nicht 100 %ig
aussagefähig, aber es lohnt sich trotzdem. Auf dieser Website
finden Sie Lesenswertes und weitere Beispiele, um zu sehen, wie
Farbenblinde die Umwelt wahrnehmen.
ichbinfarbenblind.de)
Webdesign für Farbenblinde
Die Berücksichtigung der Anforderungen von farbenblinden Benutzern ist eine Aufgabe, die im Rahmen des barrierefreien Designs anfällt. Darunter versteht man die Kunst, Webseiten so zu
233
234
6 Farben im Web *
gestalten, dass sie jedermann – auch ein Sehbehinderter – nutzen
kann.
Bilder und
Websites wie ein
Farbenblinder
sehen
Um Websites für Farbenblinde zu entwerfen, müssen Sie die Welt
mit deren Augen sehen. Das Programm Vischeck ermöglicht es,
auf einfache Art ein beliebiges JPG- oder GIF-Bild so zu wandeln, wie es ein farbenblinder Betrachter sieht, wobei die verschiedenen Arten der Farbenblindheit unterschieden werden. Es
beruht auf einer Studie über Farbwahrnehmung, in der Menschen befragt wurden, die nur auf einem Auge farbenblind sind.
Dieser Personenkreis kann mit dem gesunden Auge Farben korrekt wahrnehmen und kann durch Abdecken dieses Auges genau
spezifizieren, wie die gleichen Farben mit dem farbenblinden
Auge wahrgenommen werden.
Simulation
Auf der Website von Vischeck (http://www.vischeck.com/) können
Sie direkt das zu wandelnde Bild hochladen oder einen Test
für Webseiten durchführen. Noch mehr Möglichkeiten zur Konvertierung bietet die Website Colorblind Webpage Filter (http:
//colorfilter.wickline.org). Außer den Simulationen für die drei
Arten der Farbenblindheit können Sie Webseiten für die verschiedenen Formen der Farbschwäche umfärben lassen. Abb. 6.7-8 demonstriert diese Konvertierung an der Startseite von McDonalds.
Alle hier gezeigten Wahrnehmungen von Farbfehlsichtigen wurden mit diesen beiden Simulationsprogrammen erstellt.
Abb. 6.7-8: Links sehen Sie die Startseite von www.mcdonalds.com, wie sie ein
Normalsichtiger wahrnimmt, rechts die Sichtweise eines grünblinden Betrachters.
Kontrast
Ein hoher Kontrast zwischen Vorder- und Hintergrund erleichtert es farbenblinden Benutzern, Objekte eindeutig vom Hintergrund zu unterscheiden. Beispielsweise können Sie bei allen obigen Bildern des Herbstwaldes die hellen Baumstämme leicht erkennen. Der stärkste Kontrast wird mit den Farben Schwarz und
Weiß erreicht. Diese Farben können immer problemlos erkannt
werden. Nachteilig ist allerdings, dass sie wegen des hohen Kontrastes das Auge schnell ermüden.
235
6.8 Ökostromanbieter: Farb-Design *
Schwarz-Weiß-Druck
Um zu prüfen, ob eine Webseite kontrastreich genug ist, können Sie sie einfach auf einem Schwarz-Weiß-Drucker ausgeben. Wenn sich Vorder- und Hintergrund deutlich voneinander
abheben, dann ist der Kontrast in Ordnung.
Hyperlinks sollten sich farblich von Texten unterscheiden. Wenn
Farben für Links verwendet werden, dann ist es zwar akzeptabel,
wenn sie von Farbenblinden anders gesehen werden, aber sie
sollten deutlich von den Textfarben unterscheidbar sein. Auch
die farbliche Differenzierung von besuchten und unbesuchten
Hyperlinks sollte erhalten bleiben. Eine andere Möglichkeit ist,
Links durch zusätzliches Unterstreichen zu kennzeichnen. Auch
bei Verwendung von Rollovern sollten Sie die Farben so wählen, dass sich für Farbenblinde eine signifikante Unterscheidung
ergibt.
6.8
Tipp
Hyperlinks
Ökostromanbieter: Farb-Design *
Herr Himmel hat in der ersten Analysephase (Kapitel »Ökostromanbieter: Anforderungen«, S. 14) darauf hingewiesen, dass es
ihm besonders wichtig ist, das Thema Ökostrom und »grüne
Energie« optisch ansprechend zu transportieren und durch ein
passendes Farb-Design zu untermalen. Des Weiteren ist es Ziel,
dass sich GreenEnergy als Marke etabliert. Daher sind die Farben
des Logos (siehe Abb. 6.8-1) zu berücksichtigen.
Abb. 6.8-1: Logo GreenEnergy.
Die Webdesignerin Frau Schick überlegt zusammen mit Herrn
Pilot, wie das Farb-Design auf den Nutzer wirken soll und welche
Emotionen geweckt werden sollen. Für beide steht fest, dass die
Farbe Grün in jedem Fall Verwendung finden muss. Sie ist Teil
des Unternehmens-Namens und wird im Logo eingesetzt. Desweiteren ist Grün die Farbe der Natur und steht wie keine andere
Farbe für das Thema Ökologie und Umweltschutz.
Grün
Auch die Farbe Blau ist Bestandteil des Logos bzw. des Corporate
Designs und somit für das Farb-Design der Website vorgegeben.
Frau Schick und Herr Pilot sind sich einig, dass sich Blau als Farbe des Himmels (Windkraft) und des Wassers (Wasserkraft) auch
im Hinblick auf die Farb-Psychologie hervorragend eignet.
Blau