Farben für die Website wählen: Wirkung, Kontraste, Corporate Design

Bei kaum einem Thema wird in Website-Projekten so lange diskutiert wie bei Farben. Soll es das Blau aus dem Logo sein? Darf der Button orange werden? Wirkt Grün zu sehr nach Öko? Dabei geht es selten nur um Geschmack. Farben übernehmen auf einer Website handfeste Aufgaben – und wenn sie das nicht tun, leiden Lesbarkeit, Orientierung und am Ende die Zahl der Anfragen.

In diesem Beitrag zeigen wir, wie Sie eine Farbpalette für Ihre Firmenwebsite aufbauen, die zur Marke passt, Besucher führt und die Anforderungen an Kontraste erfüllt.

Was Farben auf einer Website leisten müssen

Farben haben auf einer Website vier Aufgaben:

• Wiedererkennung: Die Markenfarbe verbindet Website, Fahrzeuge, Arbeitskleidung und Briefpapier.
• Orientierung: Farbige Flächen gliedern Seiten in Bereiche und machen Zusammenhänge sichtbar.
• Hierarchie: Eine auffällige Farbe lenkt den Blick auf das Wichtigste, zum Beispiel den Anfrage-Button.
• Rückmeldung: Signalfarben zeigen Fehler, Warnungen oder Erfolg, etwa in Formularen.

Die Nielsen Norman Group weist darauf hin, dass ein Element nicht durch seine Farbe auffällt, sondern durch den Kontrast zur Umgebung. Ein orangefarbener Button wirkt auf einer ruhigen, hellen Seite stark – auf einer Seite voller orangefarbener Kästen geht er unter. Wie Kontrast, Größe und Abstand zusammenwirken, erklärt der Beitrag Visuelle Hierarchie und Weißraum.

Farbwirkung: was belegt ist und was nicht

Im Netz finden sich viele Listen nach dem Muster „Blau steht für Vertrauen, Rot für Leidenschaft, Grün für Natur“. Solche Zuordnungen sind nicht völlig aus der Luft gegriffen, aber stark vereinfacht. Farbwirkung hängt vom kulturellen Hintergrund, von der Branche, vom Farbton, von der Sättigung und vor allem vom Zusammenspiel mit anderen Farben ab. Ein gedecktes Dunkelgrün wirkt anders als ein grelles Neongrün.

Sinnvoller als Farbpsychologie aus dem Lehrbuch sind zwei praktische Fragen:

• Was erwarten Kunden in Ihrer Branche? Eine Steuerkanzlei in Pink kann auffallen, wird aber vielleicht nicht ernst genommen. Ein Garten- und Landschaftsbauer in Grün bedient Erwartungen, verschwindet aber leicht in der Masse. Beides kann richtig sein – je nachdem, ob Sie Vertrautheit oder Abgrenzung wollen.
• Welche Farben nutzen Ihre Wettbewerber? Wenn alle Elektriker in Ihrer Region Gelb und Blau verwenden, kann eine andere Farbe die Wiedererkennung stärken.

Eine Regel ist allerdings gut belegt: Rot sollte für Fehler und Warnungen reserviert sein. Die Nielsen Norman Group rät, Rot nicht für normale Hervorhebungen zu verwenden, weil Besucher es als Fehlersignal deuten.

Die Farbrollen einer Website-Palette

Eine gute Palette besteht nicht aus „Lieblingsfarben“, sondern aus Farben mit festen Aufgaben. Die folgende Übersicht zeigt die typischen Rollen:

Die Nielsen Norman Group empfiehlt für einfache Designs, mit höchstens zwei Haupt- und zwei Nebenfarben zu arbeiten. Neutraltöne und Signalfarben kommen hinzu, sollten aber zurückhaltend bleiben.

Die Faustregel 60-30-10

Aus der Innenraumgestaltung stammt die Faustregel, eine dominante Farbe für etwa 60 % der Fläche, eine zweite für etwa 30 % und eine Akzentfarbe für etwa 10 % zu verwenden. Wissenschaftlich belegt ist diese Aufteilung nicht, und auf Websites mit viel Weiß verschieben sich die Anteile ohnehin. Als Denkhilfe ist sie trotzdem nützlich: Die Akzentfarbe wirkt nur, wenn sie selten vorkommt.

Corporate Design ins Web übertragen

Die meisten Betriebe haben Logofarben, oft als CMYK- oder Pantone-Werte für den Druck definiert. Fürs Web brauchen Sie RGB- bzw. HEX-Werte, und dabei gibt es typische Stolpersteine:

• Farbräume weichen ab: Ein Druck-Blau sieht am Bildschirm anders aus. Lassen Sie den Webwert am Bildschirm abstimmen, statt ihn nur umzurechnen.
• Logofarben sind oft zu hell: Ein helles Grün oder Gelb funktioniert im Logo, erreicht als Textfarbe oder als Button mit weißer Schrift aber nicht den nötigen Kontrast.
• Abstufungen fehlen: Für Hover-Zustände, Hintergründe und Rahmen brauchen Sie hellere und dunklere Varianten der Markenfarbe.

Bewährt hat sich, aus jeder Markenfarbe eine Reihe von Abstufungen abzuleiten – von einem sehr hellen Ton für Hintergründe bis zu einem dunklen Ton für Text oder Buttons. Die Markenfarbe selbst bleibt erkennbar, wird aber dort, wo es um Lesbarkeit geht, durch eine dunklere Variante ersetzt. Alle Werte gehören in einen Styleguide, damit spätere Änderungen einheitlich bleiben.

Kontraste und Barrierefreiheit

Die Barrierefreiheits-Richtlinien WCAG 2.2 enthalten drei Erfolgskriterien, die direkt mit Farben zu tun haben:

• 1.4.3 Kontrast (Minimum), Stufe AA: Normaler Text braucht einen Kontrast von mindestens 4,5 : 1 zum Hintergrund, großer Text (ab etwa 24 Pixeln oder etwa 18,5 Pixeln fett) mindestens 3 : 1. Logos sind ausgenommen.
• 1.4.11 Nicht-Text-Kontrast, Stufe AA: Bedienelemente wie Eingabefelder und Buttons sowie Grafikteile, die zum Verständnis nötig sind, brauchen mindestens 3 : 1 zu angrenzenden Farben. Das gilt auch für den sichtbaren Fokusrahmen.
• 1.4.1 Benutzung von Farbe, Stufe A: Farbe darf nicht das einzige Mittel sein, um Informationen zu vermitteln, Aktionen anzuzeigen oder Elemente zu unterscheiden.

Für die Praxis heißt das: Links im Fließtext sollten zusätzlich unterstrichen sein oder sich anders deutlich abheben. Ein Pflichtfeld wird nicht nur rot umrandet, sondern bekommt einen Text wie „Bitte ausfüllen“. Diagramme nutzen neben Farben auch Beschriftungen oder Muster.

Ob die Anforderungen für Ihr Unternehmen gesetzlich verpflichtend sind, hängt vom Einzelfall ab; unabhängig davon verbessern gute Kontraste die Lesbarkeit für alle Besucher. Mehr zur Umsetzung finden Sie auf unserer Seite zur barrierefreien Website.

Schritt für Schritt zur Farbpalette

1. Ausgangsfarben sammelnLogofarben, Farben von Fahrzeugen, Schildern und Arbeitskleidung – mit den vorhandenen Farbwerten.
2. Webwerte festlegenDruckwerte in HEX übertragen und am Bildschirm abstimmen.
3. Rollen vergebenWelche Farbe ist Markenfarbe, welche Aktionsfarbe? Die Aktionsfarbe sollte sich deutlich von allen Flächenfarben abheben.
4. Abstufungen ableitenFür jede Hauptfarbe helle Töne für Hintergründe und dunkle Töne für Text und Buttons.
5. Neutraltöne und Signalfarben ergänzenTextfarbe, zwei bis vier Grautöne, Rot, Orange und Grün für Rückmeldungen.
6. Kontraste prüfenJede Kombination aus Text und Hintergrund, die tatsächlich vorkommt, mit einem Kontrastprüfer testen.
7. Am Entwurf testenPalette auf Startseite, Leistungsseite und Formular anwenden und mit dem Squint-Test prüfen, ob die Aktionsfarbe heraussticht.
8. DokumentierenAlle Werte und Rollen im Styleguide festhalten.

Wie Sie die Aktionsfarbe für Buttons richtig einsetzen, zeigt der Beitrag zum Call-to-Action.

Dunkelmodus: Pflicht oder Kür?

Viele Betriebssysteme bieten einen dunklen Modus an. Websites können über die CSS-Abfrage prefers-color-scheme erkennen, ob ein Besucher ein dunkles Farbschema eingestellt hat; laut MDN ist diese Funktion seit 2020 in allen gängigen Browsern verfügbar. Für die meisten Firmenwebsites ist ein eigener Dunkelmodus kein Muss. Wenn Sie ihn anbieten, gelten dieselben Kontrastregeln – und Logos, Fotos und Grafiken müssen auf dunklem Grund ebenfalls funktionieren.

Häufige Fehler bei Website-Farben

• Zu viele Akzentfarben: Wenn Buttons, Überschriften, Kästen und Symbole in verschiedenen kräftigen Farben leuchten, gibt es keine Hierarchie mehr.
• Aktionsfarbe für Nicht-Klickbares: Farbige Überschriften oder Kästen in der Button-Farbe verwirren.
• Hellgrauer Text: elegant im Entwurf, unlesbar auf dem Smartphone im Freien.
• Weiße Schrift auf hellen Markenfarben wie Gelb, Hellgrün oder Hellblau.
• Text auf Fotos ohne abdunkelnde Fläche dahinter – der Kontrast wechselt mit jedem Bildausschnitt.
• Nur Farbe als Signal bei Links, Pflichtfeldern oder Statusanzeigen.
• Uneinheitliche Farbwerte, weil jede Seite „ungefähr“ das gleiche Blau verwendet.

Checkliste: Farben für Ihre Website

• Jede Farbe hat eine feste Rolle: Marke, Aktion, Text, Neutral, Signal.
• Die Aktionsfarbe wird nur für klickbare Elemente verwendet.
• Höchstens zwei Haupt- und zwei Nebenfarben plus Neutral- und Signaltöne.
• Normaler Text erreicht mindestens 4,5 : 1, großer Text mindestens 3 : 1.
• Eingabefelder, Buttons und Fokusrahmen erreichen mindestens 3 : 1 zur Umgebung.
• Links, Fehler und Zustände sind nicht nur an der Farbe erkennbar.
• Logofarben haben hellere und dunklere Abstufungen für Flächen und Text.
• Text auf Bildern steht auf einer ausreichend kontrastreichen Fläche.
• Alle Farbwerte sind im Styleguide dokumentiert.

Farben und Schriften wirken immer zusammen; die passenden Richtwerte für Schriftgrößen und Zeilenabstände finden Sie im Beitrag Typografie im Webdesign.

Häufige Fragen

Quellen

1. W3C: Understanding WCAG 2.2 – Contrast (Minimum) (1.4.3)
2. W3C: Understanding WCAG 2.2 – Non-text Contrast (1.4.11)
3. W3C: Understanding WCAG 2.2 – Use of Color (1.4.1)
4. Nielsen Norman Group: Visual Hierarchy in UX – Definition (2021) – Kontrast, Farbanzahl, Rot für Fehler
5. MDN Web Docs: prefers-color-scheme