Musterbaustein als pdf

201

6 Farben im Web *Farben sind das Erste, was ein Besucher Ihrer Website wahr-nimmt. Da es für den ersten Eindruck keine zweite Chance gibt,sollten Sie sich mit der Farbgestaltung im Web intensiv ausein-andersetzen.

Im ersten Kapitel werden wichtige Begriffe zur Farbgestaltungeingeführt:

� »Was ist Farbe?«, S. 202

Für die Darstellung von Farben auf dem Monitor werden das RGB-und das HSB-Farbmodell eingesetzt, für Farbdrucker das CMYK-Farbmodell:

� »Farbmodelle«, S. 205

Die Qualität der Farbgestaltung wird durch die drei K´s (Komple-mentärfarben, Kontrast und Kombination) beeinflusst:

� »Die 3 K’s der Farbgestaltung«, S. 212

Mit Farben sind bestimmte Assoziationen verbunden, die manbei der Gestaltung einer Website kennen sollte:

� »Farb-Psychologie«, S. 216

Je nach dem gewünschten Effekt können Farben nach unter-schiedlichen Gesichtspunkten kombiniert werden:

� »Farben kombinieren«, S. 219

Eine gute Lesbarkeit der Texte auf dem Monitor wird durch einegeeignete Kombination von Schrift- und Hintergrundfarben er-reicht:

� »Schriftfarbe und Hintergrund«, S. 226

Etwa 8 Prozent aller Männer sind farbenblind. Wie sieht ein Far-benblinder die Farben einer Website?

� »Farbenblindheit«, S. 229

Die praktische Umsetzung des Farb-Designs für eine Websitewird anhand der Fallstudie gezeigt:

� »Ökostromanbieter: Farb-Design«, S. 235

Dieses Kapitel enthält zahlreiche Beispiele zur Farbgestaltung. Hinweis

Leider ist es technisch nicht möglich, Bildschirmfarben or-ginalgetreu auf Druckfarben abzubilden. Außerdem könnenDruckfarben ganz unterschiedlich ausfallen. Daher kann essein, dass einige der beschriebenen Farbeffekte hier nichtsichtbar sind. Die »echten« Farben können Sie im zugehöri-gen kostenlosen E-Learning-Kurs »Farb-Design für Websites«sehen.

202 6 Farben im Web *

6.1 Was ist Farbe? *Lichtfarben entstehen durch Übereinanderprojektion von far-bigem Licht und werden unter anderem auf Bildschirmen ver-wendet. Alle Lichtfarben lassen sich durch additive Mischungaus den Primärfarben mischen. Körperfarben werden sichtbar,wenn Gegenstände Licht reflektieren. Sie werden unter anderemim Druckbereich verwendet. Hier entstehen neue Farben durchsubtraktive Farbmischung.

Das Sonnenlicht besteht aus elektromagnetischen Wellen unter-Was isteigentlich

Farbe?schiedlicher Wellenlänge. In der Netzhaut gibt es drei verschie-dene Typen farbempfindlicher Sehzellen, die auch Zapfen ge-nannt werden: für kurzwelliges, mittelwelliges und langwelligesLicht. Die Zapfen sammeln die Lichtstrahlen ihrer Wellenlängeund leiten sie an das Gehirn weiter, wo dann die eigentliche Far-bempfindung entsteht.

Kurzwelliges Licht sehen Sie als Blau, mittelwelliges als Grün undlangwelliges als Rot. Da die Lichtstrahlen farblose Energiestrah-len sind, kann man sagen: Farbe entsteht im Auge des Betrach-ters. Außer dem sichtbaren, gibt es den unsichtbaren Bereich desLichts: das ultraviolette Licht (unterhalb des sichtbaren Bereichs)und das Infra-Rot-Licht (oberhalb des sichtbaren Bereichs).

Grundsätzlich lassen sich zwei Erscheinungsformen von Farbenunterscheiden:

� Lichtfarben und� Körperfarben.

LichtfarbenLichtfarben sind die Farben, die von einer Lichtquelle, z. B. derSonne oder einer Glühlampe aber auch bei Fernsehern, Compu-ter-Bildschirmen oder Videoprojektoren, direkt in das Auge ge-langen (Abb. 6.1-1).

Abb. 6.1-1: Das Sonnenlicht setzt sich aus Licht unterschiedlicher Wellenlängenzusammen. Rote, grüne und blaue Wellenlängen nehmen wir in der Summe alsweißes Licht wahr.

Alle Lichtfarben lassen sich aus den drei Primärfarben Rot,Primärfarbendes Lichts 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 AdditiveFarbmischungfür Lichtfarben

Gelb. Reines Gelb besitzt 100 % Rotanteil und 100 % Grünanteil,aber keinen Blau-Anteil. Da rotes und grünes Licht zu einer neu-en Farbe »addiert« werden, spricht man von additiver Farb-mischung. Wie die Abb. 6.1-3 zeigt, entsteht Gelb aus Rot undGrün, Magenta aus Rot und Blau, Cyan aus Grün und Blau. Wei-ßes Licht entsteht durch die Überlagerung aller Wellenlängen zujeweils gleichen Teilen. Oder anders ausgedrückt: Die Mischungaller drei Primärfarben zu gleichen Teilen (100 % Rot, 100 % Grünund 100 % Blau) ergibt Weiß. Fällt kein Licht auf die Sehzellen,dann »sieht« man die Farbe Schwarz. In diesem Fall liegt einevollständige Abwesenheit aller Primärfarben vor.

Abb. 6.1-3: Durch additive Mischung von Rot, Grün und Blau entsteht Weiß.

KörperfarbenKörperfarben werden sichtbar, wenn Licht von Gegenständenreflektiert wird. Fällt weißes Licht auf einen Gegenstand, dannwird ein Teil davon absorbiert (verschluckt) und ein anderer Teilder Strahlen reflektiert (zurückgeworfen). Die Farbe, die Sie voneinem Gegenstand wahrnehmen, setzt sich aus diesen reflektier-ten Strahlen zusammen (Abb. 6.1-4). Körperfarben nehmen Sieimmer wahr, wenn Sie Gegenstände des Alltags betrachten: IhreKleidung, eine Zeitschrift oder die Fliesen auf dem Boden. WieSie die Farbe eines Gegenstands wahrnehmen, hängt sehr stark


von dem einfallenden Licht ab. Daher sehen Kleidung oder Bilderoft bei Sonnenlicht und Kunstlicht ganz unterschiedlich aus. MitKörperfarben wird im Druckbereich gearbeitet.

Abb. 6.1-4: Betrachten wir einen Körper, so nehmen wir nur die reflektiertenStrahlen des Lichts wahr. Bei einer Fläche, die uns cyanfarben erscheint, wirdder rotwellige Anteil des Lichts absorbiert, Blau und Grün werden reflektiert undergeben im Auge des Betrachters in der Summe Cyan.

Wenn Sie einen Farb-Tintenstrahldrucker besitzen, dann wissenPrimärfarbenim Druck Sie, dass er vier Patronen mit den Farben Cyan, Magenta, Gelb

und Schwarz enthält. Die Farben Cyan, Magenta und Gelb sinddie Primärfarben im Druckbereich (Abb. 6.1-5). Theoretisch las-sen sich alle druckbaren Farben aus diesen drei Primärfarben mi-schen. In der Praxis wird Schwarz dazugegeben, um dem Druck-bild mehr Tiefe zu geben und um reines Schwarz nicht ausden drei Grundfarben mischen zu müssen. Da man beim Druckalle Farben aus den Farben Cyan, Magenta, Gelb (Yellow) undSchwarz (Black) bildet, spricht man von CMYK-Farben. Näheresdazu finden Sie im Kapitel »Farbmodelle«, S. 205.

Abb. 6.1-5: Im Druckbereich sind die Primärfarben Cyan, Gelb (Yellow) undMagenta.

Das Weglassen bzw. Subtrahieren der Farbe Blau ergibt für denSubtraktiveMischung fürKörperfarben

Betrachter die Farbe Gelb. Das Fehlen der Farbe Rot nimmt manals Cyan wahr und das Herausfiltern von Grün als Magenta. Wirdkeine Farbe subtrahiert, dann entsteht die Farbe Weiß, währenddie Subtraktion aller Farben Schwarz erzeugt. Bei den Druckfar-ben 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 sub-traktiven Mischung von Bedeutung, welche Farben herausgefil-tert (subtrahiert) werden bzw. welche reflektiert werden.

6.2 Farbmodelle *Für Bildschirmfarben gibt es mehrere Farbmodelle. Am häufigs-ten wird wohl das RGB-Farbmodell verwendet. Beim HSB-Farb-modell werden die Farben durch Angabe von Farbton, Sättigungund Helligkeit definiert. Werden Webseiten gedruckt, dann müs-sen Lichtfarben auf Druckfarben abgebildet werden. Die Dru-cker verwenden hierfür das CMYK-Farbmodell. Die websicherenFarben bilden eine Palette von 216 Farben, die auf Windows-und Macintosh-Computern gleich dargestellt werden.

RGB-FarbmodellDas RGB-Farbmodell ist das Standardmodell für Lichtfarben.Computer-Bildschirme stellen Farben dar, in dem unterschied-liche Mischungen der Farben Rot, Grün und Blau verwendet wer-den (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ünund Blau zusammen.

Ein reines Rot besitzt 100 % Rotanteile und keinerlei Anteile an Primärfarbenim RGB-Modellden 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 durchWerte von 0 bis 255 definiert. Analog besitzt ein reines Gründen Farbwert (0 R, 255 G, 0 B) und ein reines Blau den Farbwert


(0 R, 0 G, 255 B). Die Anteile der Primärfarben werden im RGB-Farbmodell immer in der Reihenfolge Rot-Grün-Blau angegeben.Daher gilt: (x R, y G, z B) = (x,y,z).

Durch Mischung der drei Primärfarben entstehen weitere Farben.Farben mischen

Da die Rot-, Grün- und Blauanteile jeweils die Werte von 0 bis255 annehmen können, ergeben sich ca. 16 Millionen darstell-bare Farben. Werden jeweils zwei Primärfarben gemischt, dannergeben sich die Farben der Abb. 6.2-2. Natürlich lassen sich dieFarben auch in beliebigen Verhältnissen mischen, wie beispiels-weise in Abb. 6.2-3.

Abb. 6.2-2: Durch Mischung der drei Primärfarben entstehen weitere Farben wieGelb, Magenta und Cyan.

Abb. 6.2-3: Durch beliebige Mischung der drei Primärfarben entstehen weitereFarben wie Orange, Hellgrau und Lila.

Reine Grautöne besitzen im RGB-Farbmodell stets gleiche WerteGrautöne

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.

Farben werden in Bildbearbeitungsprogrammen oft durch ihreFarbwerte

dezimalen RGB-Werte spezifiziert. Bei der Verwendung in HTMLund CSS werden Hexadezimal-Codes angegeben. Beispielsweisebesitzt die Farbe Rot = (255 R, 0 G, 0 B) den Wert #FF 00 00. Diesehexadezimalen Werte entstehen dadurch, dass die drei einzelnenWerte des RGB-Codes in das hexadezimale Zahlensystem konver-tiert und dann hintereinander geschrieben werden. Die RGB-Wer-te einer Farbe können alternativ prozentual ausgedrückt werden,wobei der Wert 255 100 % Farbe entspricht.

HSB-FarbmodellAußer durch den RGB-Wert können Farben durch folgende Anga-ben beschrieben werden:


� Farbton (hue)� Sättigung (saturation)� Helligkeit (brightness)

Man spricht hier vom HSB-Farbmodell. Das Akronym HSB stehtfür hue, saturation und brightness. Dieses Farbmodell wird auchals HSV-Farbmodell bezeichnet. Hier wird für das Akronym an-stelle der Helligkeit der Begriff value (Farbwert) verwendet.

Der Farbton gibt die eigentliche Farbigkeit einer Farbe wieder, Farbton (hue)

die auf einem Kreis in Grad-Schritten zwischen 0 und 360 Gradgemessen wird. Beispielsweise besitzt die Primärfarbe Rot denFarbton 0 Grad, die Primärfarbe Grün den Farbton 120 Grad unddie Primärfarbe Blau den Farbton 240 Grad.

Die Sättigung lässt die Farben stärker oder schwächer hervortre- Sättigung(saturation)ten. Sie wird in Werten von 0 % bis 100 % angegeben. Abb. 6.2-4

zeigt, wie für den Farbton 240 Grad bei konstanter Helligkeit von100 % die Sättigung in Stufen von 25 % abnimmt. 0% Sättigung er-gibt die Farbe Weiß.

Abb. 6.2-4: Für den Farbton 240 und die Helligkeit 100 % variiert die Sättigungzwischen 100 % und 0 %.

Die Helligkeit beschreibt, wie sehr ein Farbton heller oder dunk- Helligkeit(brightness)ler aussehen kann. Sie wird ebenfalls in Werten zwischen 0% und

100 % definiert. Abb. 6.2-5 zeigt, wie für den Farbton 240 Gradbei konstanter Sättigung von 100 % die Helligkeit in Stufen von25 % abnimmt. 0 % Helligkeit ergibt die Farbe Schwarz.

Abb. 6.2-5: Für den Farbton 240 und die Sättigung von 100 % variiert die Hellig-keit zwischen 100 und 0 %.

Das HSB-Farbmodell ist besonders gut geeignet, wenn man ge- Einsatz desHSB-Modellszielt bestimmte Farben erzeugen will [Pris03]. Abb. 6.2-6 zeigt,

wie man beispielsweise bei dem Bildbearbeitungsprogramm Pho-toshop den Farbton 240 Grad variieren kann. Ein möglichst rei-nes Blau erhalten Sie bei hoher Sättigung und hoher Helligkeit(rechts oben). Verringern Sie bei konstanter Sättigung die Hel-ligkeit, dann erhalten Sie ein dunkles Blau, das schließlich in


Schwarz übergeht (unterer Rand). Helle Blautöne erhalten Sie beigeringer Sättigung und hoher Helligkeit (links oben).

Abb. 6.2-6: Die Markierung zeigt 30 % Sättigung und 70 % Helligkeit für den Farb-ton 240 (Photoshop).

Mit abnehmender Sättigung erhalten die Farben einen immer hö-Grautöne

heren Grauanteil. Man spricht hier von entsättigten Farben. Rei-ne Grautöne erhält man bei einer Sättigung von 0%. Sie könnenje nach der Helligkeitsstufe zwischen Weiß (100 % Helligkeit) undSchwarz (0 % Helligkeit) variieren. Reine Grautöne werden auchals ungesättigte Farben bezeichnet.

Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm?Wenn ja, dann können Sie diese Übung durchführen:� Gehen Sie von der Primärfarbe Rot aus und erstellen Sie dazu

einen hellroten Ton, der keine Grautöne enthält.� Erstellen Sie für den gleichen Farbton ein helles Graurot.� Variieren Sie das reine Rot zu einem Dunkelrot, wobei der

Farbton unverändert bleiben soll.

Sicher haben Sie schon festgestellt, dass Farben auf verschiede-VerschiedeneMonitore nen Monitoren ganz unterschiedlich wirken können. Wie Farben

am Bildschirm angezeigt werden, hängt unter anderem von derverwendeten Grafikkarte im Computer ab. Zusätzlich lassen sicham Bildschirm weitere Einstellungen wie Kontrast und Helligkeitdurchführen.


CMYK-FarbmodellCMYK ist ein weltweiter Arbeitsstandard in der Druckindus- Druckindustrie

trie. Fast alle Zeitschriften, Zeitungen und Magazine werdenim CMYK-Farbmodell gedruckt. Es wird überall dort eingesetzt,wo Farbpigmente im Halbtonverfahren auf Materialien gedrucktwerden (Offsetdruck, Siebdruck, Laserfarbdruck, Plotter). BeimCMYK-Farbmodell setzt sich jede Farbe aus Cyan, Magenta,Gelb (Yellow) und Schwarz (Black) zusammen. Theoretisch wäreSchwarz nicht notwendig, denn Cyan, Magenta und Gelb erge-ben zusammen die Farbe Schwarz. Beim Vierfarbdruck wird je-doch die Farbe Schwarz dazugemischt, um dem Druckbild mehrTiefe und Kontraste zu geben und um reines Schwarz nicht ausden drei Primärfarben mischen zu müssen. Daher verwendet einFarbdrucker die vier Farbpatronen in Cyan, Magenta, Gelb undSchwarz.

CMYK-Farben werden durch prozentuale Angaben für die Anteile CMYK-Farbenspezifizierenvon Cyan, Magenta, Gelb und Schwarz ausgedrückt. Beispielswei-

se wird ein Orangeton durch die Farbwerte (5 C, 70 M, 90 Y, 0 K)spezifiziert. Im Allgemeinen variieren die einzelnen Farbanteilevon Stufen von 5 % oder 10 %, da genauere Angaben in der Praxiskaum umgesetzt werden können. Abb. 6.2-7 zeigt CMYK-Farbenfür einen konstanten Gelbanteil von 90 % und 0 % Schwarzanteil.Die Magenta-Anteile variieren zwischen 0 % und 100 %, die Cyan-Anteile bei diesem Ausschnitt zwischen 0 % und 30 %. Die CMYK-Farbe mit der Nummer 32 besitzt beispielsweise den Wert (10 C,60 M, 90 Y, 0 K).

Abb. 6.2-7: Ausschnitt aus einer CMYK-Farbkarte für einen konstanten Gelbanteilvon 90 % und 0 % Schwarz.


Grautöne lassen sich im CMYK-Modell auf zwei Arten spezifizie-Grautöne

ren. Sie können einen Grauton durch reines Schwarz definieren,z. B. (0 C, 0 M, 0 Y, 50 K). Nach den Umrechnungsformeln derBildbearbeitungsprogramme erhalten Sie die gleiche CMYK-Far-be auch durch eine Mischung von Cyan, Magenta, Gelb und ggf.Schwarz. Photoshop errechnet beispielsweise für obigen Grau-ton den CMYK-Wert (45 C, 36 M, 35 Y, 1 K). Für das Auge könnendiese Grautöne aber durchaus unterschiedlich aussehen.

Wenn Sie eine Webseite auf dem Farbdrucker ausgeben, dannWebseitendrucken wandelt der Drucker die RGB-Farben automatisch in CMYK-Far-

ben um. Vielleicht haben Sie schon festgestellt, dass die Drucker-ausgabe ganz anders aussieht als auf dem Bildschirm. Oft wirkenIhre brillianten Bildschirmfarben auf dem Ausdruck relativ mattund blass. Da man beim Bildschirm in eine Lichtquelle schaut,besitzen die Farben in der Regel eine stärkere Leuchtkraft alsgedruckte Farben, die nur das im Raum vorhandene Licht reflek-tieren. Ein weiteres Problem ist, dass beide Farbmodelle einengewissen Farbumfang haben, der nicht übereinstimmt. Obwohldie neuesten Programme raffinierte Algorithmen besitzen, umRGB-Farben möglichst originalgetreu in CMYK-Farben zu wan-deln, gibt es einige Farben, die nicht gedruckt werden können.Man spricht von CMYK-Farblöchern oder nicht-druckbaren Far-ben.

Wenn Sie einen CMYK-Farbwert in einem Bildbearbeitungspro-Farbkarten

gramm (z. B. Photoshop) einstellen und auf verschiedenen Dru-ckern ausgeben, dann werden Sie vermutlich sehr voneinanderabweichende Farbtöne erhalten. Da die verwendeten Tinten undToner chemische Produkte sind, wird das Ergebnis durch Fakto-ren wie Temperatur, Lichtempfindlichkeit etc. beeinflusst. Auchdie Papiersorte ist zu berücksichtigen. Auf Hochglanzpapier se-hen Farben beispielsweise anders aus als auf grauem Papier. Wol-len Sie CMYK-Farbwerte exakt bestimmen, dann empfiehlt sichdie Verwendung von CMYK-Farbkarten, die mit unterschiedlichgroßen Farbpaletten erhältlich sind. Einen Ausschnitt aus einereinfachen Farbkarte zeigt Abb. 6.2-7.

Praktischer Einsatz der FarbmodelleDie beschriebenen Farbmodelle sind nebeneinander im Einsatz.HTML-Programmierer verwenden das RBG-Farbmodell. Für denFarbentwurf eignet sich das HSB-Farbmodell am besten. Für denVierfarbdruck auf dem Drucker werden alle Lichtfarben in denCMYK-Farbraum konvertiert.

Farben können zwischen dem RGB- und dem HSB-FarbmodellKonvertierung

problemlos konvertiert werden. Beispielsweise kann ein hellesRot durch den RBG-Wert (255 R, 125 G, 127 B), den HSB-Wert


(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 Bild-bearbeitung ist es möglich, eine Farbe auf mehrere Arten einzu-stellen. 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 hexade-zimal), LaB- und CMYK-Farbraum an.

Die Angabe »LaB« in der Abb. 6.2-8 steht für das Lab-Farbmo- Lab-Farbmodell

dell. Bei Bildern im RGB- oder im CMYK-Farbraum muss das ge-samte Bild für jeden Farbkanal (z. B. Rot, Grün und Blau bei RGB-Bildern) dargestellt werden, denn Farb- und Helligkeitsinforma-tionen werden pro Farbkanal zusammen beschrieben. Das Lab-Farbmodell geht hier einen grundsätzlich anderen Weg, indemes Farbinformationen von den Helligkeitsinformationen trennt.L (Luminanz) ist der Helligkeitskeitskanal. Hier wird die eigent-liche Zeichnung abgebildet. Der a- und der b-Kanal beschreibennur Farbinformationen.

Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm?Wenn ja, dann können Sie diese Übung durchführen:� Mit welchen Farbmodellen arbeitet das Programm?� Wie werden die Farben von einem Farbmodell in ein anderes

konvertiert?


6.3 Die 3 K’s der Farbgestaltung *Die 3 K’s der Farbgestaltung sind Komplementärfarben, Kon-traste und Kombination der Farben. Zur Bestimmung der 3 K’sdient der Farbkreis. Je nach beabsichtigtem Effekt können Far-ben unterschiedlich kombiniert werden, beispielsweise durchSplitten der Komplementärfarbe oder Aufspannen eines gleich-seitigen Dreiecks.

Eine gute Farbgestaltung macht die Webseiten nicht nur attrak-tiv, sondern macht es dem Benutzer auch leichter, sich darin zu-rechtzufinden und die dargestellten Informationen zu erfassen.Ein wirkungsvolles Mittel, um die Konzepte und Begrifflichkeitender Farbenlehre zu verstehen, ist der Farbkreis.

Für die Darstellung auf dem Bildschirm werden die PrimärfarbenFarbkreis fürLichtfarben 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 Magen-ta (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 derLichtfarben.

Aus Primär- und Sekundärfarben entsteht dann ein 6-teiligerFarbkreis bilden

Farbkreis mit den Farben Gelb, Rot, Magenta, Blau, Cyan undGrün. Werden nun wieder je zwei benachbarte Farben »ge-mischt«, dann entsteht ein 12-teiliger Farbkreis, in dem dasgraue Dreieck die drei Primärfarben zeigt (Abb. 6.3-1). Beispiels-weise ergeben Gelb (255 R, 255 G, 0 B) & Rot (255 R, 0 G, 0 B) dieFarbe Orange (255 R, 127 G, 0 B). Das Mischen der Farben erfolgtnach dem additiven Farbmischverfahren. Durch weiteres Mi-schen jeweils zweier benachbarter Farben kann der Farbkreis be-liebig weiter detailliert werden.

Der Farbkreis dient zur Bestimmung der 3 K’s der Farbgestaltung.3 K’s derFarbgestaltung Dies sind [CrCr01]:

� Komplementärfarben� Kontrast� Kombination

KomplementärfarbenWenn Sie Anzeigen in einer Illustrierte betrachten, dann fallenIhnen 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 geschickteingesetzt wurden.

Komplementärfarben liegen sich im Farbkreis genau ge- Was sindKomplementär-farben?

genüber. Beispielsweise ist die Komplementärfarbe von Oran-ge die Farbe Eisblau (Abb. 6.3-1). Ein reines Rot mit demWert (255 R, 0 G, 0 B) besitzt beispielsweise die Komplemen-tärfarbe (0 R, 255 G, 255 B). Auf der Website von ThomasGebhardt (http://www.zum.de/Faecher/Materialien/gebhardt/physik/optik/farben/kfarbe.htm) wird die Möglichkeit angeboten, auf ein-fache Art zu jeder beliebigen Farbe die Komplementärfarbe be-rechnen und anzeigen lassen.

Komplementärfarbe ermitteln Formel

Eine Farbe mit dem Wert (x R, yG, zB) besitzt die Komplemen-tärfarbe ((255-x) R, (255-y) G, (255-z) B.)

KontrastKomplementärfarben stellen gleichzeitig den höchstmöglichenFarbkontrast dar. Sie erzeugen Spannung und machen ein Bildlebendig. Wenn Sie Orangen vor einem blauen Hintergrund dar-stellen, dann wird das Bild viel »lebhafter« wirken als beispiels-weise vor einem gelben Hintergrund.

Kombination der FarbenDie Farben einer Website sollen dazu beitragen, dass die Web-site ein harmonisches Ganzes und nicht eine Sammlung vieler


einzelner Elemente bildet. Dabei spielt auch die Zielgruppe eineentscheidende Rolle. Daher ist es wichtig, von vornherein dieFarbpalette festzulegen. Die Frage, die sich in der Praxis stellt,lautet: Wie findet man geeignete Farbkombinationen?

Eine Kombination von drei Farben erhält man durch Splitten derKomplementsplitten Komplementärfarbe. Beispielsweise werden anstelle der direkten

Komplementärfarbe von Gelb die beiden benachbarten FarbenEisblau und Violett gewählt (Abb. 6.3-2). Eine Kombination mitfünf Farben erhält man, wenn man auf jeder Seite zwei Nach-barfarben des Komplements wählt. Beispielsweise können in derAbb. 6.3-2 für die Komplementärfarbe zu Gelb (d. h. Blau) dieNachbarbarben Cyan und Eisblau sowie Violett und Magenta mitGelb kombiniert werden.

Abb. 6.3-2: Für eine Kombination von drei Farben kann die Komplementärfarbegesplittet werden.

Werden aus dem Farbkreis drei Farben gewählt, die ein gleichsei-Farbklänge

tiges Dreieck aufspannen, dann entstehen Farbkombinationen,die kontrastreich wirken, aber dennoch harmonisch zusammen-passen und ästhetisch angenehm wirken. Es entsteht ein Farb-Dreiklang (Abb. 6.3-3). Analog lässt sich durch Aufspanneneines Quadrats im Farbkreis ein Farb-Vierklang bilden.

Farben, die auf dem Farbkreis direkt nebeneinander liegen, wer-BenachbarteFarben den 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 Be-trachter Ruhe und Ausgeglichenheit assoziiert. Es entstehenFarbkombinationen, 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 gleich-seitigen Dreiecks im Farbkreis.

Die Farben im Farbkreis lassen sich in kalte und warme Farben Warme undkalte Farbeneinteilen, wobei die Farben Grün und Magenta auf der Schnitt-

stelle liegen und als neutral angesehen werden (Abb. 6.3-4). Ge-nerell eignen sich die kalten Farben eher als Hintergrundfar-ben, weil sie optisch mehr zurücktreten. Die warmen Farbtönesollten dagegen für Texte und Objekte im Vordergrund gewähltwerden, weil sie dem Betrachter weiter vorne stehend erschei-nen.

Abb. 6.3-4: Der Farbkreis enthält je zur Hälfte kalte und warme Farben.


Erstellen Sie mit Ihrem Bildbearbeitungsprogramm Grafiken, dieaus verschiedenen Rechtecken bestehen. Alternativ können Siein HTML mehrspaltige Tabellen erstellen und die Hintergrund-farben der Zellen entsprechend wählen. Sie müssen dann mitHexadezimalwerten arbeiten:� Wählen Sie zwei Komplementärfarben.� Kombinieren Sie drei Farben durch Splitten des Komple-

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 Assoziatio-nen wecken Sie?

6.4 Farb-Psychologie **Die Wahrnehmung von Farben wird beeinflusst durch biologi-sche, kulturelle und individuelle Grundlagen. Im westlichen Kul-turkreis rufen Farben bestimmte Assoziationen hervor, die je-doch mehr oder weniger differieren können.

In vielen Websites werden Farben intensiv eingesetzt. Sie ma-chen eine Website aber nicht nur attraktiver, sondern könnenauch das Gegenteil bewirken. Oft werden Farben unbewusstwahrgenommen und lösen bei den Betrachtern unterschiedli-che Gefühle aus. Diese subjektive Farbwahrnehmung wird be-einflusst durch (vgl. [This00]):

1 Biologische Grundlagen2 Kulturelle Grundlagen3 Individuelle Grundlagen

Die Farbe Rot wird vom Menschen sehr viel stärker wahrgenom-1 BiologischeGrundlagen men, 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 be-sitzt das Auge nur ca. 2 % Sehzellen. Daher kann mit der FarbeRot unabhängig von allen anderen Einflüssen immer eine starkeAufmerksamkeit erreicht werden.

Der Kulturkreis, in dem ein Mensch lebt, besitzt ebenfalls einen2 KulturelleGrundlagen erheblichen Einfluss. Beispielsweise ist Weiß in der westlichen

Kultur die Farbe der Reinheit und Klarheit, während es in Län-dern wie Japan und China die Farbe des Todes und der Trauerist. Im Gegensatz zu klassischen Anwendungen werden Websitesrund um den Globus benutzt. Werden Farben ohne Berücksichti-gung ihrer Bedeutung in den Kulturkreisen eingesetzt, dann kön-

6.4 Farb-Psychologie ** 217

nen sie negative Assoziationen bei den Benutzern der Websitehervorrufen.

Jeder Mensch hat bewusst oder unbewusst bestimmte Vorlieben 3 IndividuelleGrundlagenund Abneigungen für spezielle Farben. Auch die Moderichtungen

können den individuellen Geschmack beeinflussen.

In unserem Kulturkreis rufen Farben innerhalb einer gewissen Farb-AssoziationenBandbreite ähnliche Assoziationen hervor. Wie vielfältig diese

sein können, zeigt die folgende Aufstellung:

Rot ist die Farbe des Feuers. Sie ist die kraftvollste und domi-nanteste Farbe und eine ideale Signalfarbe, um Aufmerksamkeitzu erregen.

� Aktivität, Dynamik, Vitalität, Energie, Entschlossenheit� Liebe, Kraft, Temperament, Leidenschaft, Aggression� Feuer, Gefahr, Warnung, Blut, Wut, Zorn, Brutalität, heiß, Feh-

ler, Stopp

Orange ist eine Power-Farbe, die lebendig, aktiv und energiege-laden wirkt.

� Wärme, Lebhaftigkeit, Ausgelassenheit, Wildheit, Aufge-schlossenheit, 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, Opti-

mismus, 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, Frischeund Hoffnung symbolisiert. Sie wirkt entspannend und beruhi-gend.

� Natur, Vegetation, Wachstum, Üppigkeit, Frische, Frucht-barkeit

� Ruhe, Ausgeglichenheit, Entspannung, Friedlichkeit, Hoff-nung

� Großzügigkeit, Sicherheit, Harmonie, Erneuerung des Lebens� Gift, Neid, Gleichgültigkeit, Stagnation, Müdigkeit


� 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 Of-fenheit, Freiheit

� Kühle und Distanz, Gefühl der Leere

Blau ist die Farbe der Weite (Himmel, Meer) und vermittelt Ruheund 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 ex-travagant 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äch-lich 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 kannfür Nüchternheit und Eleganz stehen, aber auch für Langeweileund Trostlosigkeit.

� Neutralität, Nüchternheit, Vorsicht, Zurückhaltung, Kompro-missbereitschaft

� Theorie, Nachdenklichkeit, Eleganz, Sachlichkeit, Tech-nologie

� Langeweile, Eintönigkeit, Trostlosigkeit, Elend, Unsicherheit,Lebensangst

� Bewölkt, Düsterkeit, Alter

Schwarz ist in unserer Kultur die Farbe von Trauer und Tod, wirktaber 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, Me-lancholie

Die aufgeführten Assoziationen wurden folgenden Literaturquel-len entnommen: [This00], [Powe00], [Crüg02]. Andere Literatur-quellen nennen teilweise gleiche und teilweise andere Assozia-tionen. Das zeigt, wie schwierig es ist, die Wirkung von Farbensystematisch zu erfassen.

Wie eine Farbe letztendlich empfunden wird, hängt noch von WeitereEinflussfaktorenweiteren Faktoren ab. Dazu gehören:

� Kombination, in der Farben auftreten (siehe Kapitel »Farbenkombinieren«, S. 219),

� Helligkeit und Sättigung einer Farbe (Hellblau wird andersempfunden als Marineblau) und

� Individueller Geschmack: Wer die Farbe Orange mit einem ne-gativen Erlebnis verbindet, wird in dieser Farbe nichts Positi-ves erkennen.

� Was ist Ihre Lieblingsfarbe?� Welche Farbe können Sie überhaupt nicht leiden?� Verbinden Sie mit den oben aufgeführten Farben die gleichen

Assoziationen, die hier angegeben sind?� 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 unterschiedlichkombiniert werden. Bewährte Kombinationen sind: Komplemen-tärfarben, benachbarte Farben, warme und kalte Farben. Wei-tere beliebte Kombinationen sind: bunte/unbunte Farben, hel-le/dunkle Farben sowie gesättigte/ungesättigte Farben. DurchSimultankontrast können Farben in Abhängigkeit von ihrer Um-gebung unterschiedlich aussehen.

Bei der Gestaltung einer Website sollten Sie nach der Devise »Ge-stalten Sie farbig und nicht bunt« vorgehen. Geschickt einge-setzte Farben schaffen mehr Übersichtlichkeit und Transparenz.Zu viele Farben verwirren und erzeugen Unruhe beim Benutzer.Farben lassen sich auf einer Website sehr unterschiedlich kom-binieren. Hier werden grundsätzliche Kombinationsmöglichkei-ten vorgestellt. Die meisten Websites verwenden mehrere dieserKombinationen, die sich außerdem überlagern können. Außer-dem wirkt jede Farbe für sich: beispielsweise hat reines Rot eine


andere Wirkung als reines Blau. Genaueres dazu finden Sie imKapitel »Farb-Psychologie«, S. 216.

Der Einsatz von Komplementärfarben ruft einen starken Farb-Komplementär-farben kontrast hervor und verschafft dadurch einer Website eine ge-

wisse Spannung. Wie stark dieser Kontrast ist, hängt aber nochzusätzlich von den verwendeten Farben ab. Bei gesättigten Far-ben wirkt der Kontrast besonders intensiv. Kombinationen vonentsättigten oder hellen Komplementärfarben besitzen eine we-niger starke Wirkung.

Auf der Website www.diba.de (Abb. 6.5-1) wird ein Komple-Beispiel

mentärkontrast Blau-Orange eingesetzt. Blau ist dabei die do-minierende Farbe, da es sachlich und seriös wirkt. Orange, alslebendige Farbe, bietet einen idealen Kontrast.

Abb. 6.5-1: Die Website diba.de arbeitet mit dem Komplementärkontrast Blau-Orange.

Benachbarte Farben (auch analoge Farben genannt) erweckenBenachbarteFarben oft einen harmonischen Eindruck der Website. Auch hier können

sehr unterschiedliche Wirkungen entstehen, weil einige Kombi-nationen von benachbarten Farben intensiver wirken als andere.

Auf der Website der Restaurantkette Subway (Abb. 6.5-2) wer-Beispiel

den die benachbarten Farben Grün und Gelb eingesetzt. Siesuggerieren zugleich Frische und Natürlichkeit sowie Heiter-keit und Freude und versuchen auf diese Weise das Image desUnternehmens zu transportieren.


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 ent- Warm vs. kalt

steht meistens eine gemütliche und persönliche Atmosphäre.Das gilt vor allem für Brauntöne und Farben im Orange- undRost-Bereich. Farbkombinationen mit hohem Rotanteil wirkenleicht etwas aggressiv. Kalte Farben vermitteln einen Eindruckvon Sachlichkeit und Funktionalität, können aber auch kalt undunpersönlich wirken. Bestehen Farbkombinationen ausschließ-lich aus warmen oder kalten Farben, dann entsteht im Allgemei-nen eine harmonische Gesamtwirkung. Handelt es sich zusätz-lich um benachbarte Farben, dann wird dieser Effekt noch stär-ker betont. Werden dagegen warme und kalte Farben miteinanderkombiniert, dann entsteht ein Kontrast , der eine gewisse Span-nung hervorruft. Handelt es sich bei den gewählten Farben zu-sätzlich um Komplementärfarben, dann wird dieser Effekt nochverstärkt.

Das Projekt CSS Zen Garden (http://www.csszengarden.com/) Beispiel

zeigt, wie unterschiedlich Webinhalte durch ihr Design wirkenkönnen. Die gleiche HTML-Seite wird auf immer neue Weise inSzene gesetzt. Abb. 6.5-3 zeigt im Vergleich ein kaltes und einwarmes Farbschema.

Bei den Farben wird unterschieden zwischen den bunten oder Bunt vs.unbunt

chromatischen Farben und den neutralen Farben, die als un-bunte oder nicht-chromatische Farben bezeichnet werden.Bunte Farben sind beispielsweise Rot, Blau oder Violett. Zu denunbunten Farben gehören Weiß, Schwarz und die verschiede-nen Grautöne. Die Kombination von bunten und unbunten Far-ben ist häufig zu finden und sehr beliebt. Unbunte Hintergrün-


de (insbesondere Schwarz) bringen bunte Farben stärker zumLeuchten.

Abb. 6.5-3: Beispiel für die Verwendung kalter und warmer Farben im Vergleich.

Die meisten Firmen verwenden als IdentifikationsmerkmalBeispiel

eine bestimmte Farbe. Wird diese auf der Website mit unbun-ten Farben kombiniert, wirkt sie noch stärker und die Markebzw. das Erkennungsmerkmal des Unternehmens wird best-möglich transportiert. Abb. 6.5-4 zeigt, wie das Grün, die»Markenfarbe« von E-Plus, deutlich hervorgehoben wird.

Der hellste Grauton, der von Weiß kaum unterschieden werdenTipp

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ß underhöhen alle drei Farbanteile gleichmäßig. Umgekehrt gehenSie bei dunklem Grau vom Schwarz aus.

Die Kombination von Farben, die sich nur in ihrer HelligkeitHelligkeit undSättigungvariieren

und/oder ihrer Sättigung unterscheiden, führt häufig zu einemharmonischen Gesamtbild.

Hellere Farben treten mehr in den Hintergrund und vermittelnHelligkeit

den Eindruck von Weite. Sie eignen sich besonders gut als Hin-tergrundfarben von Texten. Dunkle Farben können düster undbedrückend wirken. Sie heben aber auch hervor und sind alsSchriftfarbe gut geeignet.

Je stärker eine Farbe gesättigt ist, desto dominanter wirkt sieSättigung

und zieht den Blick des Betrachters vermehrt auf sich. Groß-flächig eingesetzt werden diese Farben als schreiend und grellempfunden. Farben mit einer geringen Sättigung besitzen einedezentere Wirkung und sind oft gut als Hintergrundfarben ein-setzbar. Entsättigte Farben besitzen weniger Leuchtkraft undwirken dadurch gedämpft. Im Modebereich werden sie als Pu-derfarben bezeichnet. Farbbereiche in entsättigten Farben tre-ten optisch weiter zurück und sind daher für die Darstellung


Abb. 6.5-4: Auf der Website www.eplus.de sieht man eine bunt-unbunte Farb-kombination. Das Grün, die Erkennungsfarbe des Unternehmens, sticht dadurchnoch deutlicher hervor.

von Perspektiven geeignet. Gesättigte Farben besitzen eine ho-he Leuchtkraft und können sehr aufdringlich wirken. Voll ge-sättigte Farben sollten daher nur für kleinere Bereiche verwen-det werden. Auch durch die Kombination mit unbunten Farbenund/oder entsättigten Farben wird ihre Wirkung gemildert.

In Abb. 6.5-5 ist zu erkennen, wie durch die Variation der Far- Beispiel

be Braun in unterschiedlichen Helligkeitsnuancen bzw. Sätti-gungsgraden ein sehr harmonischer Gesamteindruck entsteht.

Durch die Kombination sehr heller und gleichzeitig stark entsät- Pastellfarben

tigter Farben lassen sich Pastellfarben erzeugen, die sehr zartund leicht wirken und daher gut als Hintergrundfarben geeignetsind. Um zu einer beliebigen Farbe den passenden Pastellton zuerzeugen, sollten Sie eine hohe Helligkeit und einen sehr niedri-gen Sättigungsgrad wählen.

In Abb. 6.5-6 wird als Pastellfarbe ein sehr helles und stark Beispiel

entsättigtes Orange genutzt.


Abb. 6.5-5: Durch den Einsatz der Farbe Braun in unterschiedlichen Helligkeitsnu-ancen bzw. Sättigungsgraden entsteht ein sehr harmonischer Gesamteindruck.

Abb. 6.5-6: Der sehr helle und stark entsättigte Orangeton lässt die Website zartund leicht wirken.

Eine Farbe kann in Abhängigkeit von ihrer Umgebung ganz un-Simultan-kontrast terschiedlich wirken. Vor einem dunklen Hintergrund wirkt eine

Farbe heller als vor einem hellen Hintergrund. Vor einem Hin-tergrund in einer sehr kühlen Farbe wird dasselbe Farbobjekt»wärmer« wirken als vor einem Hintergrund in einer warmenFarbe. Helle Hintergründe lassen ein Farbobjekt eher in den Vor-


dergrund treten, während dunkle Hintergründe das gleiche Far-bobjekt mehr zurücknehmen. Dieser Effekt wird als Simultan-kontrast bezeichnet [Crüg02]. Die Ursache liegt darin, dass dasmenschliche Auge nicht dazu geschaffen ist, Farben möglichstoriginalgetreu wiederzugeben, sondern es ist besser geeignet,Farbunterschiede zu sehen. Wird beispielsweise für Hyperlinkseine bestimmte Textfarbe auf verschiedenen Hintergrund-Farbenverwendet, dann kann der Benutzer wegen des Simultankontras-tes zwei geringfügig unterschiedliche Farben wahrnehmen.

Die Abb. 6.5-7 zeigt im Vergleich die unterschiedliche Wir- Beispiel

kung der sich ähnelnden Blau- und Rottöne einmal vor einemdunklen und einmal vor einem hellen Hintergrund.

Abb. 6.5-7: Obwohl sich Blau- und Rottöne auf beiden Seiten sehr ähneln, unter-scheidet sich die Wirkung der Farbtöne deutlich. Der helle Hintergrund im Beispielrechts unten lässt die Farben mehr in den Vordergrund treten.

Analysieren Sie Farbkombinationen von Websites, die Sie häufigbesuchen:� Werden Komplementärfarben verwendet? Wenn ja, welche?� Welche benachbarten Farben werden verwendet?� Werden nur warme, nur kalte oder kalte und warme Farben

kombiniert eingesetzt?� Liegt eine bunte/unbunte Kombination vor?� Welche Farben werden für den Hintergrund verwendet?� Wirkt sich der Simultankontrast aus?


6.6 Schriftfarbe und Hintergrund *Gute Lesbarkeit wird durch einen hohen Kontrast von Schriftund Hintergrund erreicht. Ein rein weißer Hintergrund ermüdetjedoch die Augen stark. Auch weiße Schrift auf schwarzem Hin-tergrund erschwert die Lesbarkeit. Meistens ist dunkle Schriftauf einem pastellfarbenen Hintergrund am besten lesbar. Durchden Simultankontrast kann eine Schriftfarbe auf verschiede-nen Hintergründen unterschiedlich wirken. Bei Verwendung vonstark gesättigten Farben tritt der Chromostereopsis-Effekt auf.

Die richtige Wahl von Schrift- und Hintergrundfarben hat einenentscheidenden Einfluss auf die Lesbarkeit einer Website.

Der stärkste Kontrast wird durch die Farben Schwarz und WeißSchwarz aufWeiß erreicht. Ein hoher Kontrast erleichtert das Lesen – ein Grund,

warum die meisten Bücher mit schwarzer Schrift auf weißem Pa-pier gedruckt sind. Ein extremer Kontrast macht das Lesen aller-dings anstrengend. Daher wird bei vielen Büchern kein reinwei-ßes, sondern ein leicht abgetöntes Papier verwendet.

Wenn größere Textmengen auf dem Bildschirm gelesen werdenHintergrund-farben sollen, dann sollten Sie Weiß als Hintergrundfarbe möglichst ver-

meiden. Im Gegensatz zu Papier, von dem das Licht reflektiertwird, schaut der Benutzer bei einem Bildschirm direkt in dieLichtquelle. Je heller der Bildschirm ist, desto mehr werden dieSehzellen im Auge angeregt, was zu einer baldigen Ermüdungführt. Anstelle von Weiß sollten Sie für den Hintergrund Pastell-farben benutzen, die das Lesen längerer Texte wesentlich an-genehmer machen. Als Schriftfarben eignen sich außer Schwarzauch alle dunklen Farben. Insbesondere eine Ton-in-Ton-Kombi-nation kann sehr elegant wirken (Abb. 6.6-1).

Abb. 6.6-1: Hier wurde dunkelgrüne Schrift auf einem hellgrünen Hintergrundgewählt.

Weiße Schrift auf schwarzem Hintergrund ist besonders anstren-Weiß aufSchwarz gend zu lesen, weil Schwarz »schwerer« als Weiß wirkt und daher

die weiße Schrift sehr dünn aussehen lässt (siehe Marginalspal-te). Auch andere dunkle Hintergrundfarben bewirken diesen Ef-fekt. Wenn größere Textmengen gelesen werden sollen, solltenSie möglichst darauf verzichten. Für kürzere Texte (z. B. Hyper-links) stellt sich dieser Effekt aber nicht als Problem dar. HelleSchrift auf dunklem Grund wirkt oft prägnanter und ist auch bes-

6.6 Schriftfarbe und Hintergrund * 227

ser lesbar, wenn Fettschrift verwendet oder eine etwas größereSchrift gewählt wird.

Kontrast optimieren, nicht maximieren Tipp

Die beste Lesbarkeit erreichen Sie mit einem hohen Kontrast,jedoch nicht unbedingt mit dem höchstmöglichen Kontrast.

Hintergrundbilder können auf einer Website sehr attraktiv wir- Hintergrund-bilderken. Sie erschweren aber oft die Lesbarkeit von Texten enorm.

Bei größeren Textmengen sollten sie daher nicht verwendet wer-den. Bei kleineren Textpassagen kann man die Lesbarkeit verbes-sern, indem für den Text Fettschrift gewählt wird.

Warme Farben erscheinen dem Betrachter weiter vorne stehend Vordergrund/Hintergrundals kalte Farben. Sie sind daher für Schriftfarben gut geeignet.

Damit ein Text gut lesbar ist, reicht aber die richtige Wahl vonkalten und warmen Farben nicht aus. Bei der Abb. 6.6-2 werdenbeim oberen Text reine Komplementärfarben verwendet: für dieorangefarbene 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 Hin-tergrunds reduziert (h:211, s:30, b:100) und eine etwas dunklereSchrift gewählt (h:29, s:100, b:65). Das Ergebnis ist eine besse-re 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.

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 Hinter- Simultan-kontrastgründen den gleichen Farbwert, erscheint aber auf dem dunklen

Hintergrund wesentlich rötlicher als auf dem hellgelben Hinter-grund. Hier tritt der Simultankontrast auf. Zusätzlich wirkt derEffekt, dass das dunkle Blau die Schrift dünner erscheinen lässt.Hier wäre Fettschrift angebracht. Bei der orange-roten Schrift aufhellgelbem Hintergrund ist übrigens der Kontrast zu gering. Esist keine geeignete Kombination für längere Textpassagen, aberfür Hyperlinks etc. durchaus akzeptabel.


Abb. 6.6-3: Auch bei Schriftfarben kann sich der Simultankontrast auswirken.

Wenn stark gesättigte Farben verwendet werden, dann scheintChromo-stereopsis es, als ob dargestellte Objekte entweder etwas vor oder hinter

dem Bildschirm liegen. Das Auge hat Probleme diese Objekteexakt zu fokussieren. Das führt dazu, dass das Lesen von Textausgesprochen anstrengend wird und sogar Kopfschmerzen her-vorrufen kann. Dieser Effekt wird Chromostereopsis genannt(Abb. 6.6-4). Sie sollten diese Kombination unbedingt vermei-den – auch bei kurzen Textpassagen.

Abb. 6.6-4: Hier wirkt sich der Chromostereopsis-Effekt aus.

Unabhängig vom Chromostereopsis-Effekt eignen sich gesättigteGesättigteHintergrund-

farbeFarben im Allgemeinen nicht als Hintergrundfarbe, weil sie sehrdominant sind, es sei denn, man will diesen Effekt bewusst aus-nutzen. Die Schrift muss dann jedoch unbedingt in einer geeig-neten Farbe gewählt werden. Bei der Abb. 6.6-5 wird die gleicheSchriftart und -größe wie der Abb. 6.6-4 verwendet. Allein durchVermeiden des Chromostereopsis-Effekts entsteht eine sehr vielbessere Lesbarkeit.

Abb. 6.6-5: Hier werden gesättigte Hintergrundfarben ohne Chromostereopsis-Effekt verwendet.

Wenn Sie Grundkenntnisse in HTML oder einem komfortablenHTML-Editor besitzen, dann können Sie diese Übung durch-führen:� Erstellen Sie eine gut gefüllte Textseite mit schwarzer Schrift

auf weißem Hintergrund.� Erstellen Sie dann die gleiche Textseite mit einer schwarzen

Schrift auf pastellfarbenem Hintergrund und vergleichen Siedie Lesbarkeit beider Texte.

6.7 Farbenblindheit ** 229

� Erstellen Sie dann eine dritte Version mit blauer Schrift aufrotem 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 sicht-bar. Meistens tritt jedoch eine Rot-, Grün- oder Blaublindheitoder auch nur eine Farbschwäche auf. Die meisten »Farben-blinden« haben Probleme, Farben im Rot-Grün-Bereich zu un-terscheiden. Ein barrierefreies Webdesign muss die speziellenAnforderungen von Farbenblinden berücksichtigen.

Im Auge sind die Zapfen der Netzhaut dafür verantwortlich, Far- Wie entstehtFarbe?ben zu unterscheiden. Das menschliche Auge enthält normaler-

weise 3 Zapfentypen, die als

� 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 inder Netzhaut Stäbchen, die für die Unterscheidung von Hell undDunkel zuständig sind.

FarbenblindheitDie Augen »funktionieren« jedoch nicht bei allen Menschen aufdiese Weise. Einige kennen Farben nur vom Hörensagen und et-wa acht Prozent der Männer können die Farben Rot und Grünnicht einwandfrei unterscheiden. Bei einer Farbenblindheit un-terscheidet man

� eine totale Farbenblindheit (Monochromasie) und� eine partielle Farbenblindheit oder das Zweifarbensehen (Di-

chromasie), wobei hier nur zwei Zapfenarten aktiv sind.

Bei der totalen Farbenblindheit können keine Farben, son- TotaleFarbenblindheitdern nur Helligkeitsunterschiede wahrgenommen werden. Man

bezeichnet diese Menschen als Monochromaten. Sie sehen ihreUmwelt grau in grau ohne bunte Farben. Totale Farbenblindheittritt glücklicherweise nur sehr selten auf. Die Farbempfindungist besonders wichtig, wenn sich Objekte kaum in ihrer Hellig-keit, sondern fast nur in den verwendeten Farben unterschei-den. In der Abb. 6.7-1 sehen Sie – als normal Farbsichtiger! –einen herbstlichen Wald mit Farbtönen im roten und grünen Be-reich. Wie viele Informationen über die Farbe wahrgenommenwerden, zeigt die Abb. 6.7-2. Hier geht das Laub, das nur wenig


Helligkeitsunterschiede besitzt, ineinander über. Nur die weißenStä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 Helligkeitsunter-schiede wahrgenommen werden.

Bei der Rotblindheit (Protanopie) wird langwelliges Licht (Rot)Rotblindheit

nicht wahrgenommen. Die betreffenden Personen verwechselnRot, Gelb, Braun und Grün miteinander und können Violettnicht von Blau unterscheiden. Außerdem sehen sie Dunkelrot alsSchwarz. In der Abb. 6.7-3 kann der Betrachter rotes und grü-nes Laub der gleichen Helligkeit nicht unterscheiden. Besondersdeutlich ist dies zu sehen, wenn Sie den rechten Bildrand, wosich rote und grüne Blätter mischen, mit dem Originalbild ver-gleichen.

Bei der Grünblindheit (Deuteranopie) wird mittelwelliges LichtGrünblindheit

(Grün) nicht wahrgenommen. Mit Ausnahme der Dunkelrot-Schwarz-Verwechselung bestehen die gleichen Probleme wie beider Rotblindheit, d.h., grünblinde Personen verwechseln Rot,


Abb. 6.7-3: Ein rotblinder Betrachter kann das rote Herbstlaub nicht vom grünenLaub unterscheiden.

Gelb, Braun und Grün miteinander und können Violett nicht vonBlau unterscheiden (Abb. 6.7-4). Da in beiden Fällen die Unter-scheidung von Rot und Grün problematisch ist, spricht man vonder Rot-Grün-Farbenblindheit.

Abb. 6.7-4: Ein grünblinder Betrachter kann rote, grüne und gelbgrüne Blätternicht unterscheiden.

Seltener als die Rot-Grün-Farbenblindheit ist die Blaublindheit Blaublindheit

(Tritanopie, auch: Blau-Gelb-Blindheit genannt). Blaublinde Be-trachter besitzen keine Farbempfindung im kurzwelligen Bereich(Blau). Das führt zu Unterscheidungsschwierigkeiten von Blauund Grün sowie von Gelbgrün und Grau. In der Abb. 6.7-5 siehtder blaublinde Betrachter beispielsweise das gelbgrüne Laub inGrautönen.

Sicher ist Ihnen aufgefallen, dass die Farbempfindungen von Rot- Auge erkenntFarbunter-schiede

und Grünblinden recht ähnlich sind. Wenn Sie die Abb. 6.7-4 be-trachten, fragen Sie sich vielleicht, warum grünblinde BetrachterGrüntöne sehen können. Der Grund dafür ist, dass die roten und


Abb. 6.7-5: Blaublinde Betrachter haben Probleme die Farben Gelbgrün und Grauzu unterscheiden.

grünen Zapfen ein sehr ähnliches Spektrum wahrnehmen. DasGehirn 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, dannbedeutet dies, dass sie keine Unterschiede zwischen roten undgrünen Farben wahrnehmen können. Daher sehen Abb. 6.7-3 undAbb. 6.7-4 relativ ähnlich aus [Visc03].

Farbfehlsichtigkeiten müssen nicht immer in der extremen FormFarbanomalie

vorkommen, dass ein Zapfentyp völlig ausfällt (Dichromasie).Es gibt auch eine abgeschwächte Form, die als Farbanomaliebezeichnet wird. Im Unterschied zur Dichromasie besitzen diebetroffenen Personen alle drei Zapfentypen, wobei ein Typ je-doch Veränderungen im Absorptionsspektrum besitzt. Die Be-troffenen verwechseln Rot und Grün nur unter ungünstigen Be-dingungen (z. B. im Straßenverkehr bei schlechter Sicht). Manspricht dann von einer Rotschwäche (Protanomalie), einer Grün-schwäche (Deuteranomalie) oder einer Blau-Gelb-Schwäche (Tri-tanomalie).

Abb. 6.7-6 zeigt, wie bei einer vorliegenden Grünschwäche derRot-/Grünschwäche Herbstwald gesehen wird. Abb. 6.7-7 zeigt im Vergleich dazu

das Motiv bei einer Rotschwäche. Auch hier tritt in beiden Fäl-len eine ähnliche Verfälschung der Farben auf. Im Gegensatzzur Rotblindheit bzw. Grünblindheit kann der Betrachter jedochRot- und Grüntöne als unterschiedliche Farben wahrnehmen. Dasich beide Farbanomalien relativ ähnlich auswirken, spricht manauch von einer Rot-/Grünschwäche.

Die meisten Störungen des Farbempfindens sind angeboren, sel-Häufigkeit

tener erworben. Es sind wesentlich mehr Männer (etwa 8%) alsFrauen (etwa 0,4 %) betroffen. Am häufigsten tritt eine Grün-


Abb. 6.7-6: So sehen Benutzer mit einer Grünschwäche das Motiv des Herbst-waldes.

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 Blau-bereich sind sehr selten, noch seltener ist eine totale Farben-blindheit.

Auf der Website von IchBinFarbenblind (http://www.ichbinfarbenblind.de) können Sie testen, ob Sie selbst far-benblind sind. Natürlich ist ein Test am Bildschirm nicht 100 %igaussagefähig, aber es lohnt sich trotzdem. Auf dieser Websitefinden Sie Lesenswertes und weitere Beispiele, um zu sehen, wieFarbenblinde die Umwelt wahrnehmen.

Webdesign für FarbenblindeDie Berücksichtigung der Anforderungen von farbenblinden Be-nutzern ist eine Aufgabe, die im Rahmen des barrierefreien De-signs anfällt. Darunter versteht man die Kunst, Webseiten so zu


gestalten, dass sie jedermann – auch ein Sehbehinderter – nutzenkann.

Um Websites für Farbenblinde zu entwerfen, müssen Sie die WeltBilder undWebsites wie ein

Farbenblindersehen

mit deren Augen sehen. Das Programm Vischeck ermöglicht es,auf einfache Art ein beliebiges JPG- oder GIF-Bild so zu wan-deln, wie es ein farbenblinder Betrachter sieht, wobei die ver-schiedenen Arten der Farbenblindheit unterschieden werden. Esberuht auf einer Studie über Farbwahrnehmung, in der Men-schen befragt wurden, die nur auf einem Auge farbenblind sind.Dieser Personenkreis kann mit dem gesunden Auge Farben kor-rekt wahrnehmen und kann durch Abdecken dieses Auges genauspezifizieren, wie die gleichen Farben mit dem farbenblindenAuge wahrgenommen werden.

Auf der Website von Vischeck (http://www.vischeck.com/) könnenSimulation

Sie direkt das zu wandelnde Bild hochladen oder einen Testfür Webseiten durchführen. Noch mehr Möglichkeiten zur Kon-vertierung bietet die Website Colorblind Webpage Filter (http://colorfilter.wickline.org). Außer den Simulationen für die dreiArten der Farbenblindheit können Sie Webseiten für die verschie-denen Formen der Farbschwäche umfärben lassen. Abb. 6.7-8 de-monstriert diese Konvertierung an der Startseite von McDonalds.Alle hier gezeigten Wahrnehmungen von Farbfehlsichtigen wur-den mit diesen beiden Simulationsprogrammen erstellt.

Abb. 6.7-8: Links sehen Sie die Startseite von www.mcdonalds.com, wie sie einNormalsichtiger wahrnimmt, rechts die Sichtweise eines grünblinden Betrachters.

Ein hoher Kontrast zwischen Vorder- und Hintergrund erleich-Kontrast

tert es farbenblinden Benutzern, Objekte eindeutig vom Hinter-grund zu unterscheiden. Beispielsweise können Sie bei allen obi-gen Bildern des Herbstwaldes die hellen Baumstämme leicht er-kennen. Der stärkste Kontrast wird mit den Farben Schwarz undWeiß erreicht. Diese Farben können immer problemlos erkanntwerden. Nachteilig ist allerdings, dass sie wegen des hohen Kon-trastes das Auge schnell ermüden.

6.8 Ökostromanbieter: Farb-Design * 235

Schwarz-Weiß-Druck Tipp

Um zu prüfen, ob eine Webseite kontrastreich genug ist, kön-nen Sie sie einfach auf einem Schwarz-Weiß-Drucker ausge-ben. Wenn sich Vorder- und Hintergrund deutlich voneinanderabheben, dann ist der Kontrast in Ordnung.

Hyperlinks sollten sich farblich von Texten unterscheiden. Wenn Hyperlinks

Farben für Links verwendet werden, dann ist es zwar akzeptabel,wenn sie von Farbenblinden anders gesehen werden, aber siesollten deutlich von den Textfarben unterscheidbar sein. Auchdie farbliche Differenzierung von besuchten und unbesuchtenHyperlinks sollte erhalten bleiben. Eine andere Möglichkeit ist,Links durch zusätzliches Unterstreichen zu kennzeichnen. Auchbei Verwendung von Rollovern sollten Sie die Farben so wäh-len, dass sich für Farbenblinde eine signifikante Unterscheidungergibt.

6.8 Ökostromanbieter: Farb-Design *Herr Himmel hat in der ersten Analysephase (Kapitel »Ökostrom-anbieter: Anforderungen«, S. 14) darauf hingewiesen, dass esihm besonders wichtig ist, das Thema Ökostrom und »grüneEnergie« optisch ansprechend zu transportieren und durch einpassendes Farb-Design zu untermalen. Des Weiteren ist es Ziel,dass sich GreenEnergy als Marke etabliert. Daher sind die Farbendes Logos (siehe Abb. 6.8-1) zu berücksichtigen.

Abb. 6.8-1: Logo GreenEnergy.

Die Webdesignerin Frau Schick überlegt zusammen mit Herrn Grün

Pilot, wie das Farb-Design auf den Nutzer wirken soll und welcheEmotionen geweckt werden sollen. Für beide steht fest, dass dieFarbe Grün in jedem Fall Verwendung finden muss. Sie ist Teildes Unternehmens-Namens und wird im Logo eingesetzt. Des-weiteren ist Grün die Farbe der Natur und steht wie keine andereFarbe für das Thema Ökologie und Umweltschutz.

Auch die Farbe Blau ist Bestandteil des Logos bzw. des Corporate Blau

Designs und somit für das Farb-Design der Website vorgegeben.Frau Schick und Herr Pilot sind sich einig, dass sich Blau als Far-be des Himmels (Windkraft) und des Wassers (Wasserkraft) auchim Hinblick auf die Farb-Psychologie hervorragend eignet.

Documents

Musterbaustein als pdf