Farbe im Web

Der erste Eindruck einer Website entsteht innerhalb von 50 Millisekunden. Ob der Besucher dabei ein gutes oder ein schlechtes Gefühl bekommt, hängt stark von der richtigen Farbwahl ab. Denn jede Farbe und jeder Kontrast löst bestimmte Gefühle aus und kann den Betrachter somit aktiv beeinflussen.

Standard-Farbkreis

Wir empfehlen:
Photoshop-Video-Training - Basics & Tricks

Grundlegendes zu Farbe

Physikalisch gesehen ist Farbe „nur“ Licht, das in einer bestimmten Wellenlänge zwischen etwa 300 und 700 Nanometer auf die Zapfen der Netzhaut trifft und dort von den Rezeptoren als Information an unser Gehirn weitergeleitet wird. Dieses erzeugt letztlich, in einem bislang noch nicht genau geklärten Prozess, die Vorstellung von Farbe, die der jeweilige Mensch besitzt. In der Realität erleben wir die Wahrnehmung von Farbe zum Glück deutlich intuitiver und weniger technisch. Dennoch ist das Thema Farbe ein Kapitel, mit dem sich die Menschheit seit vielen Jahrhunderten intensiv beschäftigt.

Einen Grundstein für viele der Farbtheorien, die sich im Laufe der Zeit entwickelt haben, legte Sir Isaac Newton. Er war der Erste, der die prismatische Brechung von Licht beschrieb und die Farben zur besseren Übersicht in einem Kreis anordnete. Ein Ansatz, der in der Folge vielfach und unter anderen prominent von Goethe, dem Bauhaus (Itten) oder auch moderner von Harald Kueppers aufgegriffen wurde.

Auf der Basis eines Farbkreises (nachstehende Abbildung mit Winkelangaben) sollen auch in diesem Artikel Farbharmonien und Kontraste erläutert werden, die dabei helfen, eurer Website den richtigen Ausdruck zu verleihen. Dazu zählt natürlich auch die Wahl der richtigen Farbe, denn jede Farbe wird mit einer bestimmten Emotion verbunden, die uns maßgeblich beeinflussen kann.

Insbesondere in der Werbung, zu der ich auch alle kommerziellen Webseiten zähle, ist das geschickte Ausnutzen von Farbpsychologie ein ausschlaggebendes Kriterium für den Erfolg am Besucher. Die Farbgebung einer Website ist das erste entscheidende Kriterium beim Betreten einer Website. In Sekundenbruchteilen urteilt unser Gehirn über Gefallen oder Nicht-Gefallen und legt somit den ersten Grundstein, ob wir verweilen oder nicht.

Standard-Farbkreis

Anfang des Zwanzigsten Jahrhunderts hat das Bauhaus unter Kandinsky und Itten ein Konzept entwickelt, das den Primärfarben je eine Grundform zuweist, welche die Farbwirkung ganz besonders betonen soll:

Farben und deren zugeordnete Formen

Die Idee der Zuweisung von Form zu Farbe selbst ist jedoch nicht neu, sie geht auf die Zeit da Vincis zurück. Sofern man von diesem Ansatz überzeugt ist – es gibt in der Tat nicht wenige Skeptiker –, ließe sich diese Farb-Formsprache durch eine entsprechende Gestaltung von Rahmenelementen, Listenpunkten etc. auch innerhalb einer Website aufgreifen.

Abschließend zu dieser allgemeinen Einführung möchte ich noch eine sehr spannende, wenn auch fürs Webdesign eher sekundäre Eigenschaft von Farbe zitieren:

„Albert Einstein gelang es, …, die Doppelnatur des Lichts nachzuweisen, indem er Licht sowohl als Korpuskel (kleine Teilchen) als auch als Welle erkannte. Farbe wirkt nicht nur gemäß dem Wellenmodell auf den menschlichen Körper, sondern auch materiell nach dem Korpuskelmodell. Dies ist eine weitere mögliche Erklärung, warum Farben, die wir nicht sehen, auf uns wirken.“ (Quelle: Das große Buch der Farben; Klausbernd Vollmar, Königsfurt Urania, S.10).

Farbpsychologie

Jede Farbe, genau genommen sogar jeder Farbton, besitzt einen eigenen Charakter, der in uns bestimmte Gefühle auslöst. Welche Gefühle das sind, hängt von mehreren Faktoren ab. Zum einen spielt die Kultur, in der wir aufwachsen und leben, eine bedeutende Rolle. Auch geschichtliche Ereignisse können unser Bewusstsein stark prägen.

In Deutschland, oder allgemeiner gefasst, in den westlichen Staaten, besteht ein homogenes Grundbild, das durch das subjektive Farbempfinden, welches jeder Mensch individuell entwickelt, leichte Variationen hervorruft. Bewegt man sich weiter in den Osten nach China oder Japan, so ändert sich die Interpretation einzelner Farben hingegen deutlich.

Ein gängiges Beispiel ist die „Farbe“ Weiß: In Deutschland ein positives Symbol für Frieden, Reinheit oder auch Hoffnung, in China und Japan hingegen stellvertretend für den Tod. Auch die Farbe Rot, die unter anderem als Farbe für Energie, Wut, Zorn etc. gesehen werden kann, ist in vielen Kulturen, wie der Japans, ein Symbol für Leben und Energie, da sie mit der Sonne, der Lebensenergie, verglichen wird.

So enorm diese kulturelle Spaltung klingen mag, verdeutlicht es andererseits auch, dass die Unterschiede bei genauer Betrachtung gar nicht so groß sind, wie sie auf den ersten Blick scheinen. Denn der Tod muss nicht zwingend als etwas Negatives betrachtet werden, sondern kann auch als Erlösung, als Neuanfang gesehen werden.

Tatsächlich gibt es global betrachtet mehr Gemeinsamkeiten als Unterschiede in der Farbwahrnehmung. Ein Erklärungsversuch dafür ist, dass alle Menschen eine gleiche Beziehung zum Universum, dem Himmel, der Natur etc. haben.

Nach dem Schweizer Psychiater Carl Gustav Jung (* 26.7.1875, † 6.6.1961) ist das „kollektive Unterbewusstsein“ dafür verantwortlich: Die Erfahrung und das Wissen, das die Menschheit über Millionen von Jahren erworben hat, wird durch soziale und gesellschaftliche Evolution gespeichert und von Generation zu Generation weitergegeben. So ergibt sich eine insgesamt recht homogene Reaktion auf Farbe.

Die folgenden farbpsychologischen Erläuterungen konzentrieren sich auf die Auffassung in unserer westlichen Kultur. Nur ergänzend findet ihr einige Schlagworte zur Auffassung in anderen Kulturkreisen.

Die abschließend zu jeder Farbe genannten Prozentangaben bei „Charakteristik nach Birren“ basieren auf Studien des amerikanischen Kunsthistorikers Faber Birren (* 1900, † 1988), die in seinem Buch „Color Psychology and Color Therapy“ veröffentlicht wurden. Ein befragter Personenkreis sollte einem Begriff jeweils eine bestimmte Farbe zuordnen. Die Auswertung bezieht sich auf den nordamerikanischen Raum, trifft aber im Großen und Ganzen auch auf Mitteleuropa zu.

Gelb

Gelb ist eine „zweischneidige“ Farbe. Auf der einen Seite ist sie positiv belegt, steht für die Sonne, Energie und Bewegung und Geschwindigkeit. Gelb macht ideenreich und kreativ. Auf der anderen Seite kann sie auch schnell ins Gegenteil umkippen und gefährlich und kränklich wirken, wenn sie trübe wird oder der Grünanteil steigt. Gelb ist die Farbe mit der stärksten Leuchtkraft und erweckt schnell die Aufmerksamkeit des Betrachters.

Exemplarische Website in Gelb

Die Kombination Schwarz-Gelb bildet den stärkstmöglichen Kontrast und wird entsprechend gerne für Warnhinweise verwendet. Auch die Natur zeigt uns diese Signalwirkung am Beispiel von Wespen, Bienen und Hornissen auf. Die Farbe Gelb wirkt am intensivsten, wenn sie nicht mit Weiß oder Schwarz getrübt wird. Ein zu blasses Gelb wirkt kränklich und verkehrt den positiven Effekt, ebenso wie ein schmutziges Schwarz-Gelb, ins Negative (Gift, Schwefel, Geiz …)

Gelb ist eine exzellente Akzentfarbe, auf einer Website z.B. zum Kennzeichnen wichtiger Elemente oder Sonderaktionen. Eine übermäßige Nutzung wirkt jedoch aggressiv und verstörend. Angeblich ist es sogar erwiesen, dass Babys in Gelb gestrichenen Räumen mehr schreien …

Westliche Kultur:
Positiv: Freude, Hoffnung, Kommunikation, Geschwindigkeit
Negativ: Schwäche, Gefahr, Gift, aggressiv, Krankheit

Andere Kulturen:
Kaiserlich (Asien), Weisheit (Buddhismus), Mut (Japan), Handel/Händler (Indien)

Charakteristik nach Birren:
Spaß: 26% (Platz 2 nach Orange)
Geschwindigkeit: 7% (Platz 2 nach Rot)
Billig: 22% (Platz 2 nach Orange)

Rot

Rot ist in seiner reinen Form eine der dominantesten Farben und drängt sich stark in den Vordergrund. Aufgrund dieser Signalwirkung und auch, weil sich das Rot sehr gut von dem Grün der Natur abhebt, wurden Verkehrsschilder international auf Rot standardisiert. Auch auf Webseiten sind es rote Fehlermeldungen, die den Benutzer in der Regel auf einen Fehler hinweisen. Rot gebietet uns etwas – unsere Aufmerksamkeit wird erhöht. Insbesondere Kinder werden von starken Rottönen intensiv angesprochen.

Beispiel für eine rote Website

Ähnlich dem Gelb kann die Farbe Rot sowohl negative als auch positive Assoziationen wecken. Während warme, mit Gelb abgemischte Rottöne eher harmlos und freundlich auf den Betrachter wirken, steigern blauhaltige, kältere Rottöne die Abneigung und rufen Aggressionen hervor.

Westliche Kultur:
Positiv: Leidenschaft, Energie, Geschwindigkeit, Liebe, Wärme
Negativ: Wut, Gefahr, Hass, Krieg, Nervosität

Andere Kulturen:
Glück (China), Trauer (Südafrika), Reinheit (Indien)

Charakteristik nach Birren:
Geschwindigkeit: 76% (Platz 1)
Mut: 28% (Platz 2 nach Violett)
Angst/Terror: 41% (Platz 1)

Blau

Blau ist weltweit die beliebteste Farbe – geschlechterübergreifend. Sie wirkt in erster Linie beruhigend und vermittelt das Gefühl von Sicherheit, Ruhe, Geborgenheit und Frieden. Zudem steht sie wie keine andere Farbe für eine stabile Kraft und Seriosität. Helle Blautöne wirken besonders sauber und hygienisch und werden entsprechend gerne im Beauty-Bereich verwendet (z.B. Nivea).

Dunklere Blautöne wirken konservativer und versprechen Zuverlässigkeit. Während dunkle Blautöne einen komprimierenden Eindruck hinterlassen, öffnet eine hellblaue Fläche den Raum und lässt ihn größer erscheinen. Auch eine Website wirkt in hellen Blautönen leichter, luftiger und offen.

Beispielwebsite in Blau

All diesen positiven Eigenschaften zum Trotz kann Blau allerdings auch mit Depressionen und Melancholie assoziiert werden. Gerade dunkle Blautöne „ziehen“ den Betrachter in sich hinein.

Westliche Kultur:
Positiv: Ruhe, Heilung, Seriosität, Wissen
Negativ: Traurigkeit, Depression

Andere Kulturen:
Unsterblichkeit (China), Trauer (Iran), Schutz (Mittlerer Osten)

Charakteristik nach Birren:
Vertrauen: 34% (Platz 1)
Sicherheit: 28% (Platz 1)
Hohe Qualität: 20% (Platz 2 nach Schwarz)
Verlässlichkeit: 43% (Platz 1)

Grün

Ähnlich dem Blau hat auch die Farbe Grün eine beruhigende Wirkung und wird zudem von depressiven Menschen als stabilisierend empfunden. Insbesondere dominante Personen sollen sich nach neuesten Untersuchungen von Grün angesprochen fühlen. Grün ist die Farbe der Natur und Umwelt schlechthin und wird auch auf Webseiten aufgrund des zunehmenden Umweltbewusstseins vermehrt eingesetzt.

Doch auch in anderen Gebieten des Screendesigns „wildert“ die Farbe Grün. Waren Buttons und Schaltflächen bislang gerne in kräftigen Signalfarben wie Rot oder Gelb gestaltet, werden diese „Call-To-Action“-Elemente nun vermehrt in Grün verwendet. Der Besucher verbindet mit Grün mehr Positives und die Klickraten steigen erwiesenermaßen.

Beispielwebsite in Grün

Westliche Kultur:
Positiv: Hoffnung, Heilung, (Umwelt-) Schutz, Natur, Ruhe, Energie (Hellgrün)
Negativ: Gier, Neid (Dunkelgrün), Krankheit, Gift, Feigheit (Gelbgrün)

Andere Kulturen:
Leben (Japan), Islam (Indien)

Charakteristik nach Birren:
Vertrauen: 11% (Platz 3 nach Blau und Weiß)
Sicherheit: 12% (Platz 3 nach Blau und Schwarz)

Violett

Geschichtlich betrachtet ist Violett (Purpur) die Farbe des Adels und der Reichen. Als Färbemittel diente der verarbeitete Schleim der Purpurschnecken. „Dem Farbhistoriker Hans-Heinrich Vogt zufolge kostete das Färben von einem Kilogramm Wolle umgerechnet 3.500 Euro.

Damit konnten sich nur die Reichsten der Reichen purpurfarbene Kleidungsstücke leisten" (Quelle: Das große Buch der Farben; Klausbernd Vollmar, Königsfurt Urania, S.132). In der Praxis angewendet, ist die komplementäre Farbkombination Violett-Lila eine gute Mischung, um die Strahlkraft von Gelb zu stärken und somit spezielle Elemente besonders hervorzuheben. Rot-Violett hingegen kann aufdringlich wirken und sollte nicht in großem Stil verwendet werden.

Beispielwebsite in Violett

Westliche Kultur:
Positiv: Emanzipation, Demut, Buße, Königtum/Herrscher, Romantik (Rosa)
Negativ: Trauer, Frustration (dunkles Violett)

Andere Kulturen:
Trauer (Thailand), Tod (Katholizismus)

Charakteristik nach Birren:
Spaß: 17% (Platz 3 nach Orange und Gelb)
Mut: 29% (Platz 1)
Geschwindigkeit: 0%!

Orange

Die Farbe Orange wird im deutschsprachigen Raum nicht als eigenständige Sekundärfarbe betrachtet, sondern als ein mit Gelb aufgehelltes Rot. In Deutschland kommt die Farbe Orange vor allem im öffentlichen Leben häufig vor: Mülltonnen, städtische Fahrzeuge wie Müllwagen, Bauwagen, Verkehrsfahrzeuge usw.

Beispielwebsite in Orange

Aufgrund seiner starken Signalwirkung ist Orange in der Werbung die beliebteste Farbe neben Rot.

Westliche Kultur:
Positiv: Spaß, Kreativität, Wärme, Energie, Bewegung
Negativ: Betrug, Misstrauen

Andere Kulturen:
Heilige Farbe (Hinduismus)

Charakteristik nach Birren:
Spaß: 28% (Platz 1)
Billig: 26% (Platz 1)
Unbeliebteste Farbe: 30% (Platz 1)

Weiß

In unserem Kulturkreis wird mit Weiß vor allem Positives verbunden. Reinheit, Frieden (weiße Flagge), aber auch Qualität und Eleganz, wie es Apple vor allem mit den älteren i-Produkten (iPod, iMac etc. …) demonstriert hat. In den östlichen Kulturen steht Weiß hingegen für den Tod und die Trauer.

Vom Toten bleibt nichts als die bleichen, weißen Knochen über. Weiß ist ein optimaler neutraler Grund, um darauf mit beliebigen anderen Farben zu gestalten. Nicht umsonst ist Papier weiß. Beim Gestalten von Webseiten sollte als Hintergrundfarbe jedoch auf Reinweiß verzichtet werden. Das helle Strahlen ermüdet die Augen sehr schnell. Ein leichter Grauton ist hier aus Usability-Sicht die bessere Wahl.

Beispielwebsite in Weiß

Westliche Kultur:
Positiv: Friede, Eleganz, Reinheit, Unschuld, Leere
Negativ:

Andere Kulturen:
Tod (Japan, China), Trauer (Indien), Glück (Orient)

Charakteristik nach Birren:
Vertrauen: 21% (Platz 2 nach Blau)

Schwarz

Schwarz bedeutet die Abwesenheit von Licht und ist dementsprechend im eigentlichen Sinn keine Farbe. Neben der festen Verknüpfung von Schwarz mit Tod und Trauer steht es jedoch auch für eine zeitlose Eleganz, Qualität und Sicherheit und stärkt das Selbstbewusstsein (schwarzer Anzug).

Aufgrund seiner Neutralität ist Schwarz problemlos mit jeder Farbe kombinierbar und lässt helle und kräftige Farben noch kraftvoller erscheinen. Schwarz bzw. ein dunkles neutrales Grau sind auf einer Website die optimale Wahl, wenn ein stark bildhafter Inhalt (z.B. Fotogalerie) besser zur Geltung kommen soll.

Beispielwebsite in Schwarz

Westliche Kultur:
Positiv: Kraft, Eleganz, Qualität
Negativ: Tod, Beerdigung, Trauer

Andere Kulturen:
Unglück, Trauer (Thailand)

Charakteristik nach Birren:
Sicherheit: 16% (Platz 2)
Hohe Qualität: 43% (Platz 1)
Verlässlichkeit: 24% (Platz 2 nach Blau)
Angst/Terror: 38% (Platz 2 nach Rot)

Farbharmonien, Farbklänge und Kontraste

Mit der Wahl bestimmter Farbkombinationen sorgt ihr auf eurer Website für eine angenehme, harmonische Wirkung auf den Betrachter, bzw. baut bewusst spannungsgeladene Kontraste und Reizpunkte auf, um wichtige Elemente wie Buttons, Hyperlinks etc. hervorzuheben. Ergänzen sich zwei oder mehr Farben nicht harmonisch, spricht man von einer Disharmonie. Um welche Art von Harmonie, Farbklang oder Kontrast es sich bei einer Farbzusammenstellung handelt, entscheidet die Position auf dem Farbkreis.

Farbklänge

Eine der einfachsten Möglichkeiten, harmonische Farbkombinationen zu erhalten, ist die Verwendung eines Farbklangs. Hierbei wird zwischen der Triade (drei Farben), der Tetrade (vier Farben) und dem Pentagramm (fünf Farben) unterschieden. Ausgehend von einer Basisfarbe werden den Farbkreis entlang in gleichmäßigen Abständen die weiteren Farben ergänzt. Bei einer Triade also beispielsweise bei 0°, 120° und 240°.

Übersicht verschiedener Farbklänge: Triade, Tertrade und Pentagramm

In Photoshop lässt sich die Gradangabe unkompliziert als numerische Angabe im Farbwähler eintragen.

Harmonie der Nachbarfarbe

Farben, die im Farbkreis direkt nebeneinanderliegen, werden nach heutiger Ansicht als harmonisch empfunden. Dennoch wohnt Farbkombinationen wie Gelb/Orange eine gewisse Langeweile bei, da der fehlende Farbkontrast keine Spannung beim Betrachter erzeugen kann. Goethe lehnte seinerzeit diese „charakterlosen“ Farbkombinationen ab.

Beispielwebsite Harmonie der Nachbarfarbe

Kombination warmer bzw. kalter Farben

Ebenfalls harmonisch wirken Farbkombinationen, die ausschließlich eine kalte bzw. warme Charakteristik aufweisen. Grundlegend werden blauhaltige Farben wie Eisblau, Türkisgrün oder Stahlblau als kühl und distanzierend wahrgenommen, während rot/gelb-haltige Farben wie Maisgelb, Orange oder ein Lindgrün eine warme Anmutung besitzen.

Jeder Designer besitzt hierfür schon intuitiv das richtige Gespür. Neutrale Grautöne können mit einer leichten Zugabe von Blau bzw. Orange dezent in den warmen bzw. kalten Farbereich verschoben werden und ermöglichen somit eine weitestgehend neutrale Ergänzung zu anderen bunten Farben.

Kombination kalter bzw. warmer Farben

Komplementärkontrast

Im Farbkreis exakt gegenüberliegende Farben beschreiben einen Komplementärkontrast. Dieser „laute“ Kontrast kann, dezent eingesetzt, für sehr starke optische Reize sorgen, sollte jedoch mit Bedacht gewählt werden. Eine zu massive Verwendung von beispielsweise leuchtendem Grün und Rot auf der Website wirkt auf den Betrachter aggressiv und anstrengend.

Verwendet solche Kontraste grundsätzlich nur eingeschränkt für Details wie Überschriften oder interaktive Elemente, Störer (Werbeeinblendungen). Achtet zudem auch auf barrierearme Kontraste. Die Kombination Rot-Grün ist für Menschen mit Protanopie bzw. Deuteranopie eine starke Einschränkung (siehe Abschnitt „Farbe und Barrierefreiheit“).

Beispielwebsite mit Komplementärkontrast

Quantitätskontrast

Der Quantitätskontrast beschreibt das harmonische Zusammenspiel der Leuchtkraft zweier oder mehr Farben, kombiniert mit deren Flächenverhältnis zueinander. Was beim ersten Lesen kompliziert klingt, ist letztlich relativ einfach zu verstehen:

Jede Farbe besitzt eine bestimmte Leuchtkraft. Je höher die Leuchtkraft, desto stärker ist die Signalwirkung auf den Betrachter. Werden verschiedene Farben mit unterschiedlicher Leuchtkraft kombiniert, muss die intensivere Farbe eine kleinere Fläche einnehmen, um im Verhältnis zur weniger auffälligen Farbe harmonisch zu wirken.

Reine Primärfarben, also ungetrübt von Schwarz oder Weiß, besitzen folgende Werte für die Leuchtkraft:

Gelb: 9
Orange: 8
Rot: 6
Grün: 6
Blau: 4
Violett: 3

Wirkung des Quantitätkontrasts

Am Beispiel der Farbkombination Gelb-Violett lässt sich das veranschaulichen. Das Leuchtkraftverhältnis beider Farben ist 9:3 (3:1). Dementsprechend muss die violette Fläche dreimal so groß sein wie die gelbe Fläche, um harmonisch zu wirken. Die Abbildung zeigt links ein harmonisches Verhältnis von Gelb zu Violett. In der Mitte überstrahlt das Gelb dominant und rechts wird es von dem vielen Violett erdrückt.

Qualitätskontrast

Ausgehend von einer Basisfarbe werden die weiteren Farben des Kontrasts durch Trübung mit Weiß oder Schwarz erzielt.

Website mit Qualitätskontrast

Hell-Dunkel-Kontrast

Helle Farben werden mit dunklen Farben gemischt, wodurch die Leuchtkraft und Präsenz der hellen Farbe deutlich gesteigert wird. Der Helligkeitsunterschied (nicht gleichzusetzen mit der Farbigkeit!) zweier Farben lässt sich schnell prüfen, indem der Luminanzwert der Farben verglichen wird. In Photoshop ist das im L-Kanal des Farbwählers möglich.

Eine schnelle visuelle Kontrolle erhält man auch, wenn, bezogen aufs Webdesign, das Screendesign temporär in Graustufen angezeigt wird. Eine Möglichkeit dazu besteht in einem Graustufen-Farbproof, der mit der Tastenkombination Strg/Cmd+Y aktiviert wird. (Ansicht>Farbproof>Benutzerdefiniert>Graustufen-Arbeitsfarbraum).

Website mit Hell-Dunkel-Kontrast

Unbunt-bunt-Kontrast

Zwei Farben unterschiedlicher Sättigung werden miteinander gemischt. Dabei muss es sich bei einer der Farben nicht zwingend um einen Grauton handeln, um den Unbunt-Anteil zu erzeugen. Hier zählt der Unterschied zwischen den Farben. Ein stark leuchtendes Rot gegenüber einem pastelligen Blauton zählt ebenfalls als Unbunt-bunt-Kontrast.

Website mit Bunt-Unbunt-Kontrast

Farbe und Barrierefreiheit

Farbe soll nicht nur den Zweck einer gefälligen Optik erfüllen, sondern auch gliedern, strukturieren und Übersicht schaffen. Gerade im Webdesign, dessen Kernaspekt unbestritten die Informationsvermittlung ist, gehört eine barrierearme Aufbereitung mehr als nur zum guten Ton. Immerhin leidet etwa jeder elfte Mensch unter Farbfehlsichtigkeit. Farb- und Kontrastwahl spielen demnach eine entscheidende Rolle.

Am häufigsten verbreitet sind Fehlsichtigkeiten im Rot-/Grün-Bereich. Die Fachbegriffe hierfür sind Protanopie bzw. Deuteranopie, basierend auf den Namen der Zapfen Protos und Deuteros. Da sie über das X-Chromosom vererbt wird, sind insbesondere Männer davon betroffen. Weniger häufig ist eine vererbte Störung des Tritos-Zapfen, der für eine Schwächung des Wahrnehmens von Blau sorgt.

Lediglich 0,05% der Bevölkerung sind hiervon betroffen (Tritanopie). Achromasie, die komplette Farbenblindheit, ist der seltenste Fall und bedeutet eine Störung aller drei Zapfen. Sie führt zu einer besonders starken Blendempfindlichkeit. Am Tag ist eine Sehleistung von lediglich 10% zu erreichen.

Um eine Website also einem möglichst großen Spektrum an Besuchern gut zugänglich zu machen, gilt es einige gestalterische Regeln zu beachten:

• Vermeidet die Farbkombinationen Rot/Grün bzw. Blau/Violett im Allgemeinen, unbedingt aber bei wichtigen Seiteninhalten (Navigation, Links etc. …). Ebenfalls zu Verwechslungen kann es im Zusammenspiel der Farben Rot, Gelb, Braun und Grün kommen. Dunkelrot und Schwarz lassen sich mit Protanopie ebenfalls nicht auseinanderhalten:

Simulation von Farbdarstellung mit Protanopie

• Verwendet keinen reinweißen Seitenhintergrund für lange Texte. Die Strahlkraft einer hellen Fläche ermüdet das Auge beim Lesen – auch ohne Farbblindheit. Auch weiße Schrift auf schwarzem Grund überstrahlt und ermüdet das Auge. Wählt in beiden Fällen besser ein schwaches Grau.
• Sorgt dennoch für ein ausreichendes Kontrastverhältnis zwischen Text und Hintergrund. Dabei spielt es keine Rolle, ob richtiger Text verwendet wird oder aber eine gerasterte Textgrafik. Laut den aktuellen BITV-Bestimmungen (Update auf BITV 2.0 steht bald an) muss dieser bei 4.5:1 liegen. Dies entspricht der in den WCAG 2.0 festgelegten Formel und ersetzt die bisherige BITV-Richtlinie, anhand derer der Helligkeitskontrast im Luminanzkanal L als Grundlage verwendet wurde. Ein gutes Werkzeug zum Prüfen ist der Colour Contrast Check von snook.ca (http://www.snook.ca/technical/colour_contrast/colour.html). Diese Vorgabe gilt allerdings nicht für dekorativen Inhalt, der keine informationsvermittelnde Funktion besitzt.
• Entgegen der vorangegangenen Ausführung benötigen Personen mit kognitiven Störungen Farbkombinationen, die nur wenig Kontrast aufweisen. Die WCAG ermutigt zur Bereitstellung solch einer optionalen „Low-Contrast“-Farbvariante, ohne jedoch auf exakte Werte einzugehen.
• Visualisiert eine Veränderung an einem Element, wie z.B. den Hover-Zustand eines Links, nicht ausschließlich durch einen Farbwechsel. Verstärkt den Effekt durch einen Unterstrich, eine farbige Hinterlegung, das Fetten der Schrift, usw.
• Vermeidet Angaben wie „Löschen Sie Ihre Eingaben mit dem roten Button“. Blinde oder Besucher mit einer Farbfehlsichtigkeit können damit nichts anfangen.

Während der Gestaltung bietet Photoshop die Kontrollmöglichkeit, über Ansicht>Proof einrichten>Farbenblindheit (Protanopie/Deuteranopie) die entsprechende Fehlsichtigkeit zu simulieren und bereits vor der Umsetzung darauf zu reagieren. Gleiches bietet das Online-Tool Vischeck (http://www.vischeck.com), das auch als Downloadversion für den Offline-Betrieb verfügbar ist.

Auch für den Firefox gibt es ein sehr nützliches Plug-In, den WCAG Contrast Checker. Er ermöglicht die Analyse von Textinhalten auf ausreichend Kontrast hin. So lassen sich auch ohne eine Neugestaltung potenzielle Schwachstellen der bestehenden Website erkennen und diese mit geringem Aufwand barrierearmer gestalten.

Prüfen von Farbigkeit im Browser

Wir empfehlen:
Camera Raw-Video-Training

Unsere Empfehlung für dich

Photoshop für Einsteiger & Aufsteiger

Photoshop für Einsteiger & Aufsteiger

Du möchtest deine Bilder und Fotos bearbeiten, darin einzelne Elemente auswählen und entfernen, bestimmte Effekte erzeugen oder Retuschen durchführen und bei all dem das Programm verwenden, das als Flaggschiff der Bildbearbeitung gilt?!

  • Photoshop für Anfänger: 46 Lektionen in einem 5,5-stündigen Video-Tutorial von Gabor Richter
  • Verschaffe dir Überblick: Menüs und Funktionen, die für deinen Einstieg wichtig sind
  • Verstehe das Prinzip von Ebenen und Masken, lerne alle für dich relevanten Werkzeuge und Filter kennen
  • Inklusive: 35 Übungsdateien zum Mitmachen und zum praktischen Lernen

Zum Training