Farben auswählen und kombinieren

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wichtig für das Design einer Website ist die Auswahl von passenden Farbkombinationen. Wenn Sie auch schon einmal über eine Seite gesurft sind, auf der eine giftgrüne Schrift vor einem hellblauen Hintergrund flimmerte, wissen Sie, was ich damit meine.

Besonders gut zueinander passen sollten Farben für direkt nebeneinander liegende Flächen und für Kombinationen von Text mit Hintergründen. Hilfe für die richtige Auswahl bieten einige künstlerische Grundregeln, die für das Design von Websites genauso zählen wie für Landschaftsmalerei.

Am Anfang steht immer der Farbkreis. Im Web finden Sie dazu Hunderte von Seiten mit ebenso vielen Variationen davon. Eine der anschaulichsten und übersichtlichsten Beschreibungen habe ich bei den Entwicklern des Programms Color Wheel Pro™ in ihrem Artikel »Color Theory Basics« gefunden.

Um eine Farbauswahl für Ihr Design vorzunehmen, sollten Sie erst einmal einen Farbkreis mit den Farbtönen auswählen, die Sie einsetzen möchten. Alle Farben, die in dem Kreis direkt nebeneinander liegen und sich nur graduell voneinander unterscheiden, gelten als harmonisch und eigenen sich gut für angrenzende Flächen. Mit der Verwendung von zwei oder drei benachbarten Farben, die Sie für größere Flächen, etwa Hintergründe oder Menüs, verwenden, können Sie ganz reizvolle ästhetische Effekte in Ihren Designs erzielen.

Für Kombinationen mit größeren Kontrasten – etwa für Text und Hintergrund – sollten Sie wiederum Farben auswählen, die einander im Farbkreis möglichst genau gegenüber liegen. Diese Farben nennt man Komplementärfarben. Um passende Kombinationen mit drei Farben zu finden, legen Sie am besten ein gleichseitiges Dreieck auf die Mitte des Farbkreises und benutzen die Farbwerte, auf die die Ecken des Dreiecks deuten.

Viele Grafikprogramme und Webeditoren verfügen über Farbpaletten, mit denen sich Farben viel einfacher auswählen und ausprobieren lassen als mit RGB-Werten im CSS-Code. Die meisten Programme bieten auch die Palette der 216 »websicheren« Farben (engl. web-safe colors) – dies sind Farben, die von allen Systemen und Browsern unterstützt werden.

Farbige Texte auf farbigen Hintergründen zu positionieren, ist besonders problematisch, da schnell Flimmer- oder Wischeffekte auftreten, die die Lesbarkeit erschweren. Gute Kombinationen im Versuch-und-Irrtum-Verfahren zu finden ist unglaublich zeitintensiv, aber oftmals lässt sich ein gewünschter Effekt nur durch einigen Aufwand erreichen. Aber auch hierfür findet man Hilfe im Internet. Eine der besten Quellen ist Palettons Color Scheme Designer. Wenn Sie auf eine Farbe im Farbkreis klicken, werden Ihnen die passenden Farben angezeigt.

Auf dieser Seite gibt es auch eine Auswahlbox, in der die verschiedenen Arten der Farbenblindheit aufgelistet sind und die mit einem entsprechenden Filter verknüpft sind. Wenn Sie hier eine bestimmte Art der Farbenblindheit auswählen, werden Ihnen die Farben angezeigt, die der Betroffene sieht. Wenn Sie ein wenig damit experimentieren, verstehen Sie, welche Schwierigkeiten Menschen haben können, bestimmte Farbnuancen zu unterscheiden.

Farbkombinationen, durch die der Inhalt der Seiten unleserlich wird, sollten vermieden werden. Genauso wichtig ist es, Seiten so zu entwerfen, dass ihre Inhalte auch dann verstanden werden, wenn der Benutzer keine Farben sieht. Farben sollten nicht zum Transport von Informationen benutzt werden. Wenn Sie beispielsweise verschiedenfarbige Icons ohne zusätzliche Textinformationen verwenden, kann es sein, dass die Icons von manchen Benutzern nicht unterschieden werden können. Besuchen Sie die Seite Vischeck und lassen Sie sich Ihre Seite so anzeigen, wie sie ein Farbenblinder sieht.

Durchaus kann auch die eine oder andere nicht regelgerechte Farbkombination der Schulweisheit trotzen und hervorragend funktionieren. Scheuen Sie sich nicht davor, auch mal unorthodoxe Farben einzusetzen. Sie sollten nur immer auch ausgiebig testen, was hinterher auf Ihrer Website erscheinen wird.

  

<< zurück

vor >>