Farbe im Webdesign ist weniger eine Geschmacksfrage als eine Systemfrage. Wer jeder Farbe eine Rolle gibt und dann konsequent bleibt, bekommt ein Erscheinungsbild, das zusammenhält. Wer bei jedem Element neu entscheidet, bekommt eine Sammlung.
Rollen statt Palette
Ein brauchbares System besteht aus Werten mit Aufgaben:
| Rolle | Verwendung |
|---|---|
| Hauptfarbe | Marke, primäre Schaltflächen, Links |
| Hauptfarbe dunkel | Text in der Markenfarbe, Zustand beim Überfahren |
| Akzentfarbe | Hervorhebungen, Kennzeichnungen, kleine Flächen |
| Textfarbe dunkel | Überschriften und Fließtext |
| Textfarbe mittel | Sekundärtext, Beschriftungen |
| Fläche weiß | Karten, Inhaltsbereiche |
| Fläche hell | abgesetzte Abschnitte |
| Fläche dunkel | Kontrastabschnitte, Fußbereich |
| Rahmenfarbe | Trennlinien, Feldränder |
| Erfolg, Warnung, Fehler | Formularmeldungen und Zustände |
Zwei Beobachtungen aus der Praxis: Die Markenfarbe reicht selten für beide Aufgaben, also für Text auf hellem Grund und für Fläche mit Text darauf. Man braucht in der Regel zwei Abstufungen. Und die Rahmenfarbe wird häufig vergessen, obwohl sie auf jeder Seite dutzendfach vorkommt.
Kontrast begrenzt die Auswahl
Die Kontrastanforderungen sind keine Empfehlung, sondern seit dem BFSG für viele Anbieter Pflicht: 4,5 zu 1 für Fließtext, 3 zu 1 für große Schrift und für Bedienelemente.
Praktisch heißt das:
- Mittelhelle Farben sind als Textfarbe auf Weiß nicht nutzbar. Ein mittleres Blau erreicht oft knapp 4 zu 1 und fällt damit durch.
- Gelb und Hellgrün brauchen dunklen Text darauf, nicht weißen. Weiße Schrift auf Gelb ist praktisch immer zu schwach.
- Sekundärtext hat eine Untergrenze. Grautöne heller als etwa #767676 auf Weiß fallen durch.
Der pragmatische Weg: die Farbwerte einmal in einem Prüfwerkzeug gegen alle vorkommenden Flächen testen und nur die geprüften Kombinationen verwenden. Das kostet einen halben Tag und macht jede spätere Seite unproblematisch. Details in Kontraste prüfen.
Farbe darf nie die einzige Information sein
Ein Formularfeld, das im Fehlerfall nur einen roten Rand bekommt, ist für Menschen mit Farbfehlsichtigkeit unbrauchbar. Es braucht zusätzlich einen Text und idealerweise ein Symbol.
Dasselbe gilt für Diagramme mit farbigen Linien, für Statusanzeigen und für Links, die sich nur durch die Farbe vom Text unterscheiden. Bei Links im Fließtext ist die Unterstreichung deshalb keine altmodische Konvention, sondern die zweite Information.
Der schnelle Test: Seite in Graustufen ansehen. Was dann nicht mehr unterscheidbar ist, war allein durch Farbe kodiert.
Wie viel Farbe wo
Eine Verteilung, die sich bewährt hat: etwa 60 Prozent neutrale Flächen, 30 Prozent eine ruhige Sekundärfläche, 10 Prozent Farbe. Farbe wirkt durch Sparsamkeit. Eine Seite, auf der die Markenfarbe an fünfzehn Stellen auftaucht, hat keine Hierarchie mehr.
Konkret: Die primäre Handlung einer Seite ist farbig. Alles andere ist neutral oder als Umriss gestaltet. Wenn eine Seite drei gleichwertig farbige Schaltflächen hat, entscheidet der Besucher nicht schneller, sondern langsamer.
Die häufigsten Farbfehler
- Zu heller Text. Der verbreitetste Fehler im Web.
- Zu viele Farben, oft durch nachträglich hinzugefügte Elemente aus fremden Werkzeugen.
- Farbverläufe hinter Text, wodurch der Kontrast an einer Stelle stimmt und an einer anderen nicht.
- Text auf Fotos ohne Abdeckung. Der Kontrast ist damit vom Bildinhalt abhängig und wird beim nächsten Bildwechsel falsch.
- Nur Farbe als Information, bei Fehlermeldungen und Diagrammen.
- Halber Dunkelmodus, bei dem einzelne Bereiche weiß bleiben oder Kontraste kippen.
- Markenfarbe als Fließtextfarbe, wodurch der Text unruhig und häufig zu kontrastarm wird.
Ein System aufsetzen: die Reihenfolge
- Hauptfarbe festlegen, meist aus dem Logo
- Eine dunklere Variante für Text und eine hellere für Flächen ableiten
- Neutrale Reihe wählen: Weiß, ein sehr heller Ton, ein mittlerer, ein dunkler
- Zwei Textfarben festlegen und gegen alle Flächen prüfen
- Akzentfarbe wählen, die sich von der Hauptfarbe deutlich unterscheidet
- Zustandsfarben für Erfolg, Warnung und Fehler ergänzen
- Fokusfarbe festlegen, die gegen alle Flächen 3 zu 1 erreicht
- Alle geprüften Kombinationen dokumentieren und nur diese verwenden
Schritt 7 wird fast immer vergessen und ist der Punkt, an dem Barrierefreiheitsprüfungen später anschlagen. Wie Farbe mit Größe und Gewicht zusammen Hierarchie erzeugt, steht in Visuelle Hierarchie.