Design · Gestaltung
Farbkonzept für Websites: Farben wählen, die wirken
Farben prägen den ersten Eindruck einer Website, lange bevor ein Satz gelesen wird. Wie aus wenigen Markenfarben ein Konzept wird, das in jeder Situation funktioniert.
Kurz beantwortet
Ein Farbkonzept für eine Website legt fest, welche Farben wofür verwendet werden: eine Grundfarbe für Flächen, eine Textfarbe, eine Akzentfarbe für Schaltflächen und Links sowie Farben für Hinweise und Fehler. Es leitet sich aus den Markenfarben ab und muss ausreichende Kontraste bieten, für normalen Text mindestens 4,5 zu 1 nach den Richtlinien für barrierefreie Inhalte.
Jede Farbe hat eine Aufgabe
Ein Farbkonzept ist mehr als eine Palette schöner Töne. Es ordnet jeder Farbe eine Aufgabe zu. So bleibt die Website einheitlich, und Besucher lernen schnell, was eine Farbe bedeutet, etwa dass Blau immer klickbar ist.
- GrundFlächen und Hintergründe
- Meist hell und zurückhaltend, oft kein reines Weiß, sondern ein leicht getönter Ton. Er trägt den größten Teil der Fläche.
- TextLesbarkeit
- Dunkel genug für hohen Kontrast, häufig ein fast schwarzer Ton statt reinem Schwarz.
- AkzentHandlung
- Die auffälligste Farbe, sparsam eingesetzt: Schaltflächen, Links, wichtige Hervorhebungen.
- NebenErgänzung
- Ein bis zwei weitere Töne für Abwechslung, etwa für abgesetzte Bereiche oder Grafiken.
- ZustandRückmeldung
- Farben für Erfolg, Warnung und Fehler, etwa in Formularen.
Aus den Markenfarben ableiten
Markenfarben aufnehmen
Die Farben aus Logo und bestehendem Auftritt mit genauen Werten erfassen.
Rollen verteilen
Welche Markenfarbe eignet sich als Akzent, welche als Grund? Nicht jede Markenfarbe taugt als Textfarbe oder für große Flächen.
Abstufungen bilden
Von jeder Hauptfarbe hellere und dunklere Stufen ableiten, etwa für Hover-Zustände oder Hintergründe.
Kontraste prüfen
Jede Kombination aus Text und Hintergrund gegen die Kontrastanforderungen prüfen.
Festschreiben
Alle Farben mit Namen und Aufgabe dokumentieren und im Code zentral hinterlegen.
Kontrast und Barrierefreiheit
Die Richtlinien für barrierefreie Webinhalte (WCAG) geben für die Stufe AA klare Mindestwerte für den Kontrast zwischen Text und Hintergrund vor:
| Element | Mindestkontrast |
|---|---|
| Normaler Text | 4,5 zu 1 |
| Großer Text (ab etwa 24 Pixeln, fett ab etwa 19 Pixeln) | 3 zu 1 |
| Bedienelemente und Grafiken | 3 zu 1 zur Umgebung |
Typische Problemfälle sind hellgrauer Text auf Weiß, weiße Schrift auf hellen Markenfarben wie Gelb oder Hellgrün und Text auf Fotos. Kostenlose Kontrastrechner im Netz zeigen schnell, ob eine Kombination genügt.
Wirkung von Farben, mit Vorsicht
Farben wecken Assoziationen: Blau wird oft mit Vertrauen und Technik verbunden, Grün mit Natur und Gesundheit, Orange mit Energie. Solche Zuordnungen sind aber kulturell geprägt und kein Naturgesetz. Wichtiger als die Farbpsychologie ist, dass die Farben zur Marke passen, sich vom Wettbewerb abheben und konsequent eingesetzt werden.
Helle und dunkle Bereiche
Viele moderne Websites wechseln zwischen hellen und dunklen Abschnitten. Das schafft Rhythmus, verlangt aber, dass jede Farbkombination auf beiden Hintergründen geprüft wird. Eine Akzentfarbe, die auf Weiß gut funktioniert, kann auf Schwarz zu grell oder zu schwach sein.
Aus der Praxis von KKM-Design
Häufige Fragen
Wie viele Farben sollte eine Website haben?
So wenige wie möglich, so viele wie nötig. Eine Grundfarbe, eine Textfarbe und ein Akzent reichen oft aus, ergänzt durch ein oder zwei Nebentöne.
Was mache ich, wenn meine Markenfarbe zu hell für Text ist?
Sie für Flächen, Linien und Grafiken verwenden und für Text und Schaltflächen eine dunklere Abstufung derselben Farbe ableiten.
Brauche ich einen dunklen Modus?
Nicht unbedingt. Wenn die Website ihn anbietet, muss das Farbkonzept für beide Modi geplant und geprüft werden.
Kay Strack · Webdesigner und Cloud Engineer · KKM-Design