Vielleicht haben Sie in der Vergangenheit eine Webseite besucht und festgestellt, dass diese unrund aussieht, können aber nicht festmachen, was genau das Problem ist. Meist liegt es an einfachen Dingen wie der Größe von Symbolen oder Texten. Oder an den Farben, um die es in diesem Artikel gehen soll. Bereits kleine Fehler können, sofern sie nicht vermieden oder ausgebügelt werden, einen großen Einfluss auf die optische Qualität der Webseite oder Software haben. Wie wählt man also am besten Farben aus?
Die Farbwahl
In unserem Beispiel gehen wir einmal davon aus, dass wir unsere Farben frei wählen können und nicht durch Vorgaben wie Firmenfarben oder ähnliches eingeschränkt sind. Das Prinzip ist allerdings das Gleiche, auch wenn zum Beispiel Blau als Firmenfarbe vorgegeben ist. Zunächst wählen wir eine Primärfarbe. Bei vorgegebenen Firmenfarben wäre das Blau, wenn wir bei unserem Beispiel von vorhin bleiben. Bei freier Farbauswahl können wir im Prinzip aussuchen, was wir möchten.
Farbenpsychologie
Die Farbenpsychologie kann uns dabei helfen, die richtige Farbe für unser Projekt zu finden. Sie besagt, dass jeder Farbe bestimmte Bedeutungen zugeschrieben werden. Diese Bedeutungen nehmen wir als Menschen unbewusst wahr und assoziieren diese dann mit der Webseite. Die Bedeutungen lassen sich in etwa so zusammenfassen:
- Rot – Leben, Kraft, Aktivität, Dynamik, Stärke
- Gelb – Wärme, Aktivität, Kreativität
- Orange – Lebensfreude, Geselligkeit, Neugierde
- Rosa – Zuneigung, Zartheit, Weiblichkeit, Feinheit, Sensibilität
- Violett – Magie, Zauberei, Souveränität
- Blau – Wahrheit, Beständigkeit, Seriosität
- Grün – Natur, Harmonie, Natürlichkeit
- Braun – Zurückhaltung, Sicherheit
- Schwarz – Trauer, Nacht, Tod, Macht
- Weiß – Reinheit, Unschuld, Unberührtheit
- Grau – Alter, Nüchternheit
Durch das Mischen verschiedener Farben können dann kombinierte Assoziationen erzeugt werden (siehe Rosa). Zu beachten ist allerdings, dass diese Assoziationen in verschiedenen Kulturen unterschiedlich wahrgenommen werden. Je nach Zielgruppe kann eine Farbe also auch eine andere Bedeutung haben. Natürlich muss man sich nicht zwingend an die Farbenpsychologie halten, Ausnahmen bestätigen die Regel. Wenn Sie allerdings eine bestimmte Assoziation hervorrufen möchten, kann sie dabei helfen, ein bestimmtes Gefühl an die Webseitenbesucher bzw. potentielle Kunden zu übermitteln. Die Farbpsychologie kann auch bewusst gebrochen werden, um bestimmte Effekte zu erzielen, dies sollte allerdings vorsichtig und überlegt gemacht werden.
Aber zurück zu unserer Farbwahl. Nachdem wir unsere Primärfarbe gewählt haben, suchen wir noch zwei weitere Farben aus. Diese sollten sich von der zuvor gewählten Primärfarbe abgrenzen. Unsere neu gewählten Farben werden dann für den Hintergrund und verschiedene Elemente verwendet. Die Primärfarbe dient dann dazu, bestimmte Elemente besonders herauszustellen, aber dazu später mehr. Für die Auswahl können auch Tools verwendet werden, die zufällige Farben generieren oder passende Farben vorschlagen. Colorsinspo ist zum Beispiel praktisch, um sich zu Beginn inspirieren zu lassen. Als letztes wählen wir noch eine Textfarbe. Haben Sie zuvor eher dunkle Farben gewählt, sollte die Textfarbe hell sein und umgekehrt.
Kontraste
Es ist darauf zu achten, dass zwischen den Hintergrundfarben und der Textfarbe ein genügend hoher Kontrast entsteht. Das dient dazu, die Texte auf der Seite möglichst vielen Menschen zugänglich zu machen. Je höher der Kontrast, desto höher ist auch die Wahrscheinlichkeit, dass ihn mehr Menschen vernünftig lesen können. Hellgrauer Text auf weißem Hintergrund mag für Menschen mit gutem Sehvermögen vielleicht gerade noch lesbar sein, bei geringen Sehschwächen oder Farbfehlsichtigkeiten wird es dann aber schnell schwierig. Wenn Sie überprüfen möchten, ob die gewählten Farben genügend Kontrast zueinander haben, können Sie dafür entwickelte Tools verwenden (Beispielsweise: WCAG – Contrast Checker).
Nicht jedes Element muss sich deutlich vom Hintergrund abheben. Eine Textbox darf gerne Hellgrau auf weißem Hintergrund sein. Der darin enthaltene Text sollte aber dann einen guten Kontrast zur Hellgrauen Textbox haben (z.B. Schwarz). Zu viele miteinander kontrastierende Elemente können auch vom eigentlichen Inhalt ablenken. Deshalb sollten Sie sich auf den Kontrast zwischen Text und Hintergrund fokussieren. Andere Elemente sollten subtil eingebunden werden.
Die 60-30-10 Regel
Wie verwenden wir nun unsere ausgewählten Farben? Hier kommt die 60-30-10 Faustregel ins Spiel. Stellen wir uns vor, unsere Webseite benutzt 100% “Farbe”. Wir können unsere gewählten Farben nun mit der 60-30-10 Regel gewichten, um ein ausgewogenes Gesamtbild zu erhalten. Eine Farbe sollte zu 60% enthalten sein (Zum Beispiel eine helle Farbe für den Hintergrund). Eine weitere Farbe wird zu 30% verwendet (Etwa für Textboxen und ähnliche Elemente) und die letzte zu 10%. Letztere sollte diejenige sein, die auf besonderen Elementen verwendet wird, zum Beispiel bei Buttons und interaktiven Elementen. Denkbar sind auch Links oder Überschriften, auf die die Aufmerksamkeit der Nutzer gelenkt werden soll.
Als Beispiel habe ich ein simples Interface gestaltet, welches eine To Do Liste abbildet. Für den Hintergrund habe ich Beige (60%) gewählt. Die Elemente, die die Aufgaben enthalten sind weiß (30%) und der Knopf, mit dem neue Aufgaben hinzugefügt werden können ist Rot (10%). Man sieht also, dass die 60-30-10 Regel in etwa eingehalten wurde.
Die Gewichtungen können auch je nach Webseitenabschnitt verschieden gewählt werden. Man könnte zum Beispiel für die Landing Page die auffälligste Farbe als Hintergrund (60%) wählen und die anderen beiden für weitere Elemente und Buttons. In einem anderen Abschnitt wird dann die Gewichtung gewechselt: Unsere helle Farbe wird zur “60% Farbe” und die auffällige Farbe wird für Buttons verwendet. Wichtig ist, dass dies nur eine Faustregel ist. In bestimmten Fällen darf natürlich auch davon abgewichen werden. Aber die Regel bietet einen guten Anhaltspunkt, um eine schöne Farbbalance auf die Seite zu bringen, ohne dass der Nutzer von vielen bunten Elementen “erschlagen” wird.
Generell gilt: es benötigt Zeit und Übung, um die Arbeit mit Farben richtig zu machen. Am besten probieren Sie einmal einige Farbvarianten an einem Interface aus oder versuchen, Farbpaletten nachzubilden. Ich wünsche Ihnen viel Spaß und Erfolg dabei!