Der Einsatz von Farben im Webdesign

Gute Farbabstimmung ist Grundvoraussetzung für gute Lesbarkeit

Bei der Gestaltung der Webdseiten ist auf eine gute Farbzusammenstellung der einzelnen Elemente zu achten um vor allem eine gute Lesbarkeit der Texte zu gewährleisten und beim Betrachter keine Kopfschmerzen hervorzurufen. Mit falscher Farbwahl kann eine Webseite praktisch unlesbar werden. Farbkombinationen, die auf dem Papier noch lesbar wären, sind mitunter am Monitor zu anstrengend und nicht mehr zu akzeptieren.

Sicher ist es eine Frage des Geschmackes, wieviele Farben auf der Website eingesetzt werden und mancher Webdesigner liebt es auch bunt, was optimal aufeinander abgestimmt und zum Thema der Website passend, auch gut aussehen kann. Wie überall im Leben, bestätigen auch im Webdesign die Ausnahmen die Regel. Bei der Farbwahl für Weblayouts ist weniger jedoch meist mehr. Zwei zusammen passende Hauptfarben für Schrift und Hintergrund sollten das farbliche Grundgerüst der Website bilden. Dazu kann mit helleren oder dunkleren Farbtönen der beiden Grundfarben experimentiert werden um beispielsweise Navigationselemente wie Button oder Textfelder hervorzuheben. Steht Ihnen ein Bildbearbeitungsprogramm zur Verfügung können Sie die Harmonie der zu verwendenden Farben und die Lesbarkeit Ihrer Texte leicht testen. Einige Bildbearbeitungsprogramme zeigen den Hexadezimalwert der dargestellten Farben an, sodass Sie diese Werte mit der vorangestellten Raute (#) gleich in Ihren Html-Quelltext übernehmen können.

Schon etwas fortgeschrittenere Webmaster können dem Besucher auch mehrere Farb-Varianten einer Website durch laden verschiedener css-styles zur Auswahl geben. So kann sich der Besucher eine für ihn angenehme Farbkombination aussuchen.

Einen weiteren Punkt in der Farbwahl für Webseiten möchten wir nur am Rande erwähnen, weil er nicht direkt zum Webdesign gehöhrt sondern schon eher in Richtung Suchmaschinenoptimierung geht. Dies sind versteckte Texte, die durch Verwendung von gleicher Schrift- und Hintergrundfarbe erreicht werden. Solche Techniken sind aus der Internetsteinzeit und werden heute von Suchmaschinen durch Rauswurf der Website aus dem Index geahndet. Deshalb können wir nur dringend davon abraten, solche Techniken zu verwenden.

Farbliche Darstellung der Website auf verschiedenen PC-Systemen

Auf verschiedenen unkalibrierten Monitoren, wie sie wohl in den meisten Haushalten zu finden sind, kann es passieren, dass ein und dieselbe Website in ihrer farblichen Darstellung erheblich voneinander abweicht. Haben Sie die Möglichkeit Ihre Website auf verschiedenen PC-Systemen mit unterschiedlichen Monitoren zu testen, so ist dies sehr zu empfehlen. Sie werden erstaunt sein, welche Farbabweichungen Sie antreffen werden. Vor allem der Unterschied zwischen altem Röhrenmonitor und den heute üblichen Flachbildschirmen kann enorm sein. Röhrenmonitore waren meist sehr dunkel in ihrer Darstellung. Abweichungen kann es auch zwischen Mac und PC geben. So sind Mac's meist etwas heller voreingestellt als PC's.

Gegen einen vom Benutzer völlig verstellten Bildschirm können Sie allerdings nichts unternehmen. Sie können ihm höchstens Tipps geben, wie er seinen Bildschirm wieder richtig einstellen kann.

Auf der Website digitalfotografie.beitinger.org können Sie sich weitergehende Informationen zum komplexen Thema der Monitorkalibrierung holen.

Websichere Farben

Die ursprüngliche Farbpalette der websicheren Farben besteht aus 216 Farben. Als diese Farbpalette entwickelt wurde arbeiteten Monitore und Grafikkarten mit 8bit-Farbtiefe. Damals konnten nicht mehr als 256 Farben dargestellt werden. Es galt als ziemlich sicher, wenn die websicheren Farben auf einer Website einsetzt wurden, dass diese dann auf verschiedenen Computernsystemen annähernd gleich aussah. Heute haben websichere Farben zwar an Bedeutung verloren, da Monitore und Grafikkarten mit 24 oder mehr bit arbeiten und die websicheren Farben nicht wirklich sicher dargestellt werden können. Webbrowser sind aber in ihrer Farbdarstellung immer noch auf diese 216 Farben begrenzt und rechnen Farben, die dieser Farbpalette nicht entsprechen um. So kann es passieren, dass die farbliche Darstellung auf verschiedenen Computern mit unterschiedlichen Browsern von der gewüschten Darstellung abweicht.

Farbtabelle - websichere Farben

000
000000
003
000033
006
000066
009
000099
00C
0000CC
00F
0000FF
030
003300
033
003333
036
003366
039
003399
03C
0033CC
03F
0033FF

300
330000
303
306
309
30C
30F
330
333
336
339
33C
33F

600
603
606
609
60C
60F
630
633
636
639
63C
63F

900
903
906
909
90C
90F
930
933
936
939
93C
93F

C00
C03
C06
C09
C0C
C0F
C30
C33
C36
C39
C3C
C3F

F00
F03
F06
F09
F0C
F0F
F30
F33
F36
F39
F3C
F3F

060
063
066
069
06C
06F
090
093
096
099
09C
09F

360
363
366
369
36C
36F
390
393
396
399
39C
39F

660
663
666
669
66C
66F
690
693
696
699
69C
69F

960
963
966
969
96C
96F
990
993
996
999
99C
99F

C60
C63
C66
C69
C6C
C6F
C90
C93
C96
C99
C9C
C9F

F60
F63
F66
F69
F6C
F6F
F90
F93
F96
F99
F9C
F9F

0C0
0C3
0C6
0C9
0CC
0CF
0F0
0F3
0F6
0F9
0FC
0FF

3C0
3C3
3C6
3C9
3CC
3CF
3F0
3F3
3F6
3F9
3FC
3FF

6C0
6C3
6C6
6C9
6CC
6CF
6F0
6F3
6F6
6F9
6FC
6FF

9C0
9C3
9C6
9C9
9CC
9CF
9F0
9F3
9F6
9F9
9FC
9FF

CC0
CC3
CC6
CC9
CCC
CCF
CF0
CF3
CF6
CF9
CFC
CFF

FC0
FC3
FC6
FC9
FCC
FCF
FF0
FF3
FF6
FF9
FFC
FFF

Die Farbwerte werden mit einer vorangestellten Raute # in den Quelltext geschrieben. Verwenden Sie websichere Farben reicht es aus, wenn Sie für jeden Kanal einen Farbwert eintragen und somit nur drei Stellen verwenden. Normal besteht eine Farbangabe in der hexadezimalen Schreibweise aus sechs Stellen nach der Raute.

Beispiel: color:#003; gleichbedeutend ist color:#000033;

Monitore stellen die Farben des RGB-Farbraumes (Rot-Grün-Blau) dar. Vor allem im preiswerten Bereich haben sich die Hersteller von digitalen Fotokameras, Monitoren und Druckern auf den sRGB-Farbraum spezialisiert um die definierten Farben so genau wie möglich darstellen zu können. Die ersten beiden Stellen des Hexadezimalcodes stehen für die Farbe Rot, die beiden mittleren Stellen stehen für Grün und die letzten beiden Stellen stehen für Blau.

Anwendbarkeit websicherer Farben

Auch wenn die Farbtabelle der websicheren Farben auf den ersten Blick als vollkommen ausreichend erscheint, werden Sie sicher eine gewisse Einschränkung Ihrer Auswahlmöglichkeiten bei konsequenter Anwendung websicherer Farben auf Ihrer Website bemerken. Schon bei der Auswahl zwei gut aufeinander abgestimmter Farben für Text und Hintergrund stoßen Sie dabei nicht selten an die Grenzen Ihrer Farbempfindungen, außer Sie verwenden schwarz und weiß. Wollen Sie Farbabstufungen zu den beiden Grundfarben Ihrer Wahl aussuchen, wird dies fast unmöglich werden.

Auch bei bereits bestehender Corporate Identity wird sich die Einhaltung der websicheren Farben als schwierig bis unmöglich herausstellen.

Es scheint uns eine gute Alternative zu sein, die Auswahl der Hauptfarbe der Website, aus der Tabelle der websicheren Farben vorzunehmen und die weiteren Farben frei zu wählen. So dürfte die Farbabweichung in den unterschiedlichen Browsern am wenigsten auffallen. Liegt Ihnen viel an der richtigen Darstellung der Farben, bleibt Ihnen nur das Betrachten Ihrer Website auf so vielen Monitoren wie möglich und daraus Ihre Schlüsse zu ziehen. Mobile Endgeräte wie Handys, Smartphones, Iphones oder Tablets sollten sie bei Ihren Betrachtungen mit einbeziehen.

Farbnamen

Für viele Farben wurden englische Namen definiert, die statt des Hexadezimalwertes in den Quelltext geschrieben werden können. Dabei ist die Angabe color:red; beispielsweise gleichbedeutend mit color:#FF0000; im Stylesheet. Unter den Farbnamen sind auch Bezeichnungen, die von verschiedenen Browserherstellern definiert wurden. Diese können aber nicht von allen Browsern dargestellt werden. Wollen Sie nicht noch mehr Unsicherheit in Farbdarstellung Ihrer Website bringen, verwenden Sie besser den Hexadezimalcode, auch wenn sich Namen besser merken lassen als kryptische Zahlen- und Buchstabenkombinationen.

Weitere Farbsysteme

Neben RGB gibt es noch weitere Möglichkeiten Farben zu definieren. Der CMYK-Modus kommt beispielsweise im Digitaldruck zur Anwendung. Die Farben werden hier aus den vier Farben Cyan, Magenta, Yellow und einem Key gemischt. Offsetdruckereien verwenden Pantone-Farbwerte und in der Werbetechnik oder dem Bauwesen sind RAL-Farbwerte anzutreffen. Um das Corporate Design einer Firma in allen verwendeten Medien einzuhalten müssen die Farbwerte für die unterschiedlichen Farbsysteme entsprechend umgerechnet werden. Wollen Sie beispielsweise auf der Grundlage ihrer eigenen Homepage einen Flyer erstellen, sollten Sie sich vor Abgabe der druckfertigen Datei bei Ihrer Druckerei erkundigen in welchem Farbsystem die Daten vorliegen müssen um nicht nach dem Druck mit verfälschten Farben konfrontiert zu werden. Die meisten Druckereien weisen expliziet darauf hin, dass im Digitaldruck nur CMYK-Farben verarbeitet werden.

Professionelle Bildbearbeitungsprogramme besitzen Farbtafeln, in welchen die enstspechenden Werte von RGB in CMYK oder Pantone abgelesen werden können. Für Pantone und Ral gibt es darüber hinaus Farbfächer, mit denen Farben bestimmt werden können. Kein Farbsystem kann dabei alle Farben darstellen, sodass es durchaus zu Farbabweichungen kommen kann, wenn unterschiedliche Medien zur Anwendung kommen.

Fotodienstleister, die nicht nur Fotos ausbelichten, die im sRGB-Farbraum aufgenommen wurden oder in diesen konvertiert wurden, stellen meist eigene Profile zum Download bereit, in welches die Fotos konvertiert werden können. Das hat den Vorteil, dass auf Fotos, die im Raw-Format erstellt wurden, die beispielsweise im Adobe-RGB- oder im ProPhoto RGB-Farbraum bearbeitet wurden, auf Grund des größeren Farbumfanges von Adobe-RGB und ProPhoto RGB optimalerweise mehr Farben dargestellt werden können, als dies im sRGB-Farbraum möglich ist.