UI Design Grundlagen: Farben

Unsere Kunden haben meistens schon ein tolles Corporate Design (CD), bevor wir mit der Umsetzung des digitalen Auftritts starten, daher bekommen wir in der Regel schon eine Palette an vordefinierten Farbwerten, die die Marke repräsentieren. Diese Farben sind allerdings oft für die Anwendung im Druckbereich gewählt worden. Während sie also auf dem Papier perfekt aussehen, können sie auf dem Bildschirm zu Problemen mit der Barrierefreiheit führen. Farben im digitalen Bereich müssen andere Anforderungen erfüllen, als im Druck. Außerdem brauchen wir für einen gesamten Webauftritt mit Hierarchien und verschiedenen Inhaltstypen meistens mehr Farbtöne, als ursprünglich definiert.
Bevor wir also mit dem eigentlichen Design der Website für unsere Kunden beginnen, müssen wir die existierenden Farben analysieren. Wir müssen entscheiden, wie die Farben genutzt werden können, wo die Farbpalette erweitert werden muss und dabei immer die Farben auf Barrierefreiheit prüfen. Um das zu tun, teilen wir die Farben in drei Kategorien auf:

• Markenfarben: Die Farben, die die Marke repräsentieren und sich durch den gesamten Webauftritt ziehen aber trotzdem so gewählt verwendet werden sollten, dass sie nicht an Bedeutung verlieren.
• UI-Farben: Farbtöne, die genutzt werden um Strukturen und Hierarchien im Inhalt der Seite abbilden zu können.
• Feedback-Farben: Farben mit denen Systembenachrichtigungen wie zum Beispiel Fehlermeldungen dargestellt werden.

Was auf den ersten Blick etwas verwirrend aussieht, ist eigentlich ganz einfach: Die Farbkombination ist barrierefrei für großen und normalen Text, wenn unser Ziel der AA-Standard ist.
Die Standards sind von W3C in den Web Content Accessibility Guidelines definiert. es gibt im Grunde drei Level: A, AA und AAA.

Wir sehen also, Rot auf Dunkelgrau hat nicht den nötigen Kontrast um barrierefrei zu sein, daher müssen wir die Farbe anpassen. Das ist der Grund, warum du auf unserer b13.com feststellen wirst, dass Textlinks auf weißem Hintergrund zwar rot sind, aber auf dunkelgrauem Hintergrund gelb.

Wir konnten das Rot hier gegen eine andere Unternehmensfarben von uns austauschen, die besser funktioniert. Wenn du allerdings Anpassungen an deiner Unternehmensfarbe vornehmen willst, damit sie barrierefrei eingesetzt werden kann, solltest du das immer mit dem zuständigen Designteam absprechen.
Während dem gesamten Designprozess sollten eingesetzte Textfarben immer gegen ihre Hintergrundfarben geprüft werden, dabei sollte man auch die Farben in Hover-Zuständen nicht vergessen.

Um Inhalte auf der Website strukturiert darzustellen werden wir mit aller Wahrscheinlichkeit mehrere Farbtöne brauchen, um verschiedene Elemente und Bereiche abzugrenzen. In manchen Fällen liefert uns das CD schon einige Farbtöne, manchmal ist dort aber auch nur eine neutrale Farbe für Texte definiert.
Meisten sind die UI-Farben verschiedene Grautöne, die eventuell mit der Markenfarbe oder einer Kontrastfarbe getönt sind. Unser Ziel ist es, genügend Farbtöne zu haben, um unterschiedliche Elemente darstellen zu können, aber die Farbpalette trotzdem so begrenzt zu halten, dass es nicht zu viele Farbtöne gibt, die für den Nutzer sowieso gleich aussehen würden.
In der Regel wurde im CD schon ein dunkler neutraler Farbton zur Darstellung von Texten definiert, daher fangen wir mit diesem an. zusätzlich werden wir ein helleres Grau brauchen, dass immer noch als Textfarbe genutzt werden kann (hier kommt unsere Kontrastüberprüfung wieder zum Einsatz) um sekundären Text oder Rahmenlinien darzustellen. Als nächsten fügen wir ein weiteres, helleres Grau hinzu, um inaktive Elemente abzubilden und schließlich ein noch helleres Grau als Hintergrundfarbe.

Im Laufe des Designprozesses kann sich diese Palette natürlich noch ändern, aber wir versuchen immer sie einfach und ausdrucksstark zu halten.

Funktionale Farben zum Darstellen von Feedback werden im UI-Design oft etwas stiefmütterlich behandelt. Rot und Grün passen vielleicht einfach überhaupt nicht in das Farbschema aber mit einiger Wahrscheinlichkeit wird es einen Punkt geben, an dem Fehlerbenachrichtigungen oder anderes Feedback des Systems kommuniziert werden müssen. Als Designer können wir wenigstens dafür sorgen, dass die Feedback-Farben ein bisschen in das Farbschema passen und lesbar sind. Selbst wenn wir am Anfang noch keinen Verwendungszweck haben ist es besser, die Farben einmal definiert zu haben als später in der Umsetzung festzustellen, dass der Standard-Rotton #ff0000 für Fehlermeldungen verwendet wurde.
Wir definieren immer ein Rot für Fehlermeldungen und wenn wir wirklich gründlich sind auch noch ein Grün für positives Feedback, Gelb für Warnungen und eine subtile Farbe für Benachrichtigungen.

Wenn wir diese Schritte durchlaufen haben, haben wir ein tolles Farbschema aus den ursprünglichen Unternehmensfarben abgeleitet, das die Grundlage für unser UI-Design sein kann. Diese Farben müssen natürlich noch nicht final sein aber sie sind ein guter Start. Sie passen zum Markenauftritt, sind barrierefrei und unterstützen eine gute Website.