Website Farben wählen viele Betriebe nach Gefühl: die Lieblingsfarbe der Chefin, dazu noch ein paar weitere, weil sie hübsch aussehen. Eine Physiotherapiepraxis in Linz hatte am Ende sieben Farben auf der Startseite. Niemand fand den Knopf für die Terminbuchung.
Dieser Beitrag zeigt, wie Sie in fünf Schritten eine kleine, stimmige Palette festlegen. Sie erfahren, wie viele Farben Sie brauchen, wie Sie sie verteilen und wie Sie prüfen, ob Texte gut lesbar bleiben.
Inhaltsverzeichnis
Was Farben auf einer Website leisten müssen
Farben haben auf einer Website zwei Aufgaben. Sie erzeugen einen Eindruck: ruhig, verspielt, hochwertig, bodenständig. Und sie lenken: Ein Knopf in einer auffälligen Farbe zeigt, wo es weitergeht. Die zweite Aufgabe wird oft vergessen, ist aber für Anfragen wichtiger.
Allgemeine Regeln wie „Blau wirkt seriös“ helfen nur begrenzt. Wie eine Farbe wirkt, hängt von Branche, Umgebung und Kombination ab. Ein dunkles Grün wirkt bei einer Gärtnerei natürlich, bei einer Steuerberatung eher traditionell.
Website Farben in fünf Schritten festlegen
Arbeiten Sie die Schritte der Reihe nach ab. Am Ende haben Sie drei bis fünf Farben mit klarer Aufgabe.
1. Vorhandenes sammeln
Schauen Sie zuerst, was es schon gibt: Logo, Firmenschild, Fahrzeuge, Arbeitskleidung, Drucksachen. Wenn Sie bereits ein Corporate Design haben, sind die Hauptfarben gesetzt. Dann geht es nur noch um die Ergänzung für den Bildschirm.
2. Eine Hauptfarbe bestimmen
Die Hauptfarbe trägt den Wiedererkennungswert. Sie taucht im Logo, in Überschriften oder Flächen auf. Haben Sie noch keine, hilft ein Moodboard mit Bildern, die Ihren Betrieb beschreiben. Häufig zeigt sich darin eine Farbe, die immer wieder vorkommt.
3. Neutrale Farben für Text und Hintergrund
Der größte Teil einer Website ist Text auf Hintergrund. Wählen Sie dafür ein sehr dunkles Grau oder fast Schwarz für Text und ein Weiß oder sehr helles Grau für Flächen. Reines Schwarz auf reinem Weiß kann hart wirken, ein leicht abgetöntes Grau ist angenehmer.
4. Eine Akzentfarbe für Handlungen
Die Akzentfarbe ist für Knöpfe und wichtige Links reserviert. Sie sollte sich deutlich von der Hauptfarbe abheben. Verwenden Sie sie sparsam, sonst verliert sie ihre Signalwirkung.
5. Kontrast prüfen
Prüfen Sie jede Kombination aus Text- und Hintergrundfarbe. Die Richtlinien für barrierefreie Webinhalte empfehlen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1, für große Schrift 3 zu 1. Details erklärt das W3C zum Mindestkontrast. Kostenlose Kontrastrechner im Browser zeigen das Verhältnis sofort an. Mehr zum Thema lesen Sie im Beitrag barrierefreie Website.
Die 60-30-10-Regel als Orientierung
Eine einfache Faustregel hilft bei der Verteilung: etwa 60 Prozent neutrale Flächen, 30 Prozent Hauptfarbe und 10 Prozent Akzent. Das ist keine Vorschrift, aber ein guter Startpunkt. Wer die Hauptfarbe großflächig einsetzt, braucht umso mehr Ruhe im Rest der Seite.
Beispiel: die Physiotherapiepraxis in Linz
Beispiel (fiktiv): Die Praxis reduziert ihre sieben Farben auf vier.
| Rolle | Farbe | Einsatz |
|---|---|---|
| Hauptfarbe | Petrol | Logo, Überschriften, Kopfbereich |
| Text | Dunkelgrau | Fließtext, Menü |
| Hintergrund | Warmes Hellgrau und Weiß | Flächen, Abschnitte |
| Akzent | Orange | Knopf „Termin buchen“, wichtige Links |
Der Termin-Knopf ist jetzt das einzige orange Element auf der Seite. Er fällt sofort auf. Die Seite wirkt ruhiger und die Texte sind besser lesbar. Passend dazu hat die Praxis ihre Schriftart für die Website vereinfacht.
Typische Fehler mit Website Farben
- Zu viele Farben: Jede neue Farbe braucht eine Aufgabe. Ohne Aufgabe stört sie.
- Akzentfarbe überall: Wenn Überschriften, Icons und Knöpfe gleich bunt sind, sticht nichts mehr hervor.
- Heller Text auf Foto: Ohne dunkle Abdeckung ist Schrift über Bildern oft kaum lesbar.
- Nur am großen Bildschirm geprüft: Kontraste wirken auf dem Smartphone im Sonnenlicht ganz anders.
- Farbe als einziges Signal: Fehler in Formularen sollten zusätzlich mit Text erklärt werden, nicht nur rot markiert.
Kurze Antworten auf häufige Fragen
Muss die Website genau die Logofarben haben? Die Hauptfarbe sollte passen. Für Akzente und Flächen dürfen Sie ergänzen, solange alles zusammen stimmig wirkt.
Ist ein dunkler Hintergrund sinnvoll? Für einzelne Abschnitte ja. Lange Texte lesen die meisten Menschen auf hellem Hintergrund angenehmer.
Wo trage ich die Farben in WordPress ein? In vielen Themes unter Design und Customizer oder bei Block-Themes im Website-Editor unter Stile. Legen Sie die Farben dort einmal als Palette an, statt sie in jedem Block einzeln zu setzen.
Checkliste für Ihre Farbpalette
- Vorhandene Farben aus Logo und Drucksachen gesammelt
- Eine Hauptfarbe festgelegt
- Neutrale Farben für Text und Hintergrund gewählt
- Eine Akzentfarbe nur für Handlungen reserviert
- Alle Textkombinationen auf Kontrast geprüft
- Palette im Theme zentral hinterlegt
Wenn Sie Ihre Website Farben gemeinsam mit Profis festlegen möchten, unterstützt Sie unser Team für Webseiten von der Palette bis zur fertigen Seite.