Farben im Webdesign: Psychologie, Schemata und Kontraste

Farbe gehört zu den ersten Dingen, die Nutzer an einer Website wahrnehmen. Eine Studie von Lindgaard u. a. (2006) zeigte, dass Menschen die visuelle Anmutung einer Webseite schon nach rund 50 Millisekunden beurteilen. Die oft zitierte Zahl, 62–90 % des ersten Urteils beruhten allein auf Farbe, stammt dagegen aus einer Literaturübersicht zu Produkten (Singh 2006) und bezieht sich auf ein Urteil innerhalb von 90 Sekunden. Für Websites ist sie nicht belegt. Sicher ist: Eine unpassende Farbwahl kann Vertrauen kosten, bevor ein einziges Wort gelesen wird.

Inhaltsverzeichnis

1. Farbpsychologie
2. Die 60-30-10-Regel
3. Farbschemata erstellen
4. Kontraste: WCAG-Anforderungen
5. Branchenspezifische Farbempfehlungen
6. FAQ Dieser Artikel erklärt die Grundlagen: Was kommuniziert jede Farbe? Wie erstellt man ein funktionierendes Farbschema? Welche Kontraste sind Pflicht? Und welche Farben passen zu welcher Branche?

---

Farbpsychologie: Was jede Farbe kommuniziert

Farbpsychologie ist keine exakte Wissenschaft. Kulturelle Unterschiede spielen eine Rolle. Die folgenden Assoziationen gelten für den westeuropäischen/DACH-Raum:

Blau

Assoziationen: Vertrauen, Seriosität, Kompetenz, Sicherheit, Ruhe Häufig verwendet von: Banken, Versicherungen, Tech-Unternehmen, Kanzleien, Medizin Beispiele: Deutsche Bank, Allianz, Facebook, LinkedIn, PayPal

Blau ist die sicherste Wahl für B2B-Websites. Es polarisiert nicht und funktioniert branchenübergreifend.

Grün

Assoziationen: Natur, Gesundheit, Wachstum, Nachhaltigkeit, Frische Häufig verwendet von: Bio-Marken, Gesundheit, Finanzen (Wachstum), Landwirtschaft Beispiele: Spotify, WhatsApp, Starbucks, GLS Bank

Rot

Assoziationen: Energie, Dringlichkeit, Leidenschaft, Gefahr, Appetit Häufig verwendet von: Gastronomie, Sale/Angebote, Medien, Sport Beispiele: Netflix, YouTube, Coca-Cola, DoorDash

Vorsicht: Rot als Primärfarbe kann aggressiv wirken. Als Akzentfarbe (CTAs, Badges, Warnungen) ist es effektiver.

Orange

Assoziationen: Kreativität, Freundlichkeit, Erschwinglichkeit, Energie Häufig verwendet von: Kreativbranche, E-Commerce, Jugendliche Marken Beispiele: Amazon (CTA-Button), ING, Fanta

Gelb

Assoziationen: Optimismus, Wärme, Aufmerksamkeit, Vorsicht Häufig verwendet von: Logistik, Kinder, Lebensmittel Beispiele: DHL, ADAC, McDonald’s

Vorsicht: Reines Gelb auf weissem Hintergrund hat fast keinen Kontrast. Immer mit dunklen Tönen kombinieren.

Violett

Assoziationen: Luxus, Kreativität, Weisheit, Spiritualität Häufig verwendet von: Beauty, Luxus, Kreativ, Coaching Beispiele: Twitch, Cadbury, Milka

Schwarz

Assoziationen: Eleganz, Luxus, Modernität, Kraft Häufig verwendet von: Mode, Luxus, Tech, Automotive Beispiele: Apple, Chanel, Nike

Weiss

Assoziationen: Sauberkeit, Einfachheit, Raum, Minimalismus Verwendung: Hintergrundfarbe, Weissraum als Designelement

---

Die 60-30-10-Regel

Eine bewährte Faustregel für die Farbverteilung, ursprünglich aus der Innenarchitektur:

Diese Verteilung erzeugt visuelle Balance. Mehr als 3 Farben (plus Schwarz/Weiss/Grau) überfordern das Auge.

Für KMU-Websites empfehlen wir:

• 1 Primärfarbe (aus der Marke)
• 1 Akzentfarbe (für CTAs, komplementär zur Primärfarbe)
• Neutrale Töne (Weiss, Grau-Abstufungen, Schwarz)

---

Farbschemata erstellen

Monochromatisch

Eine Grundfarbe in verschiedenen Helligkeits- und Sättigungsstufen.

Beispiel: Dunkelblau (#093075) → Mittelblau (#1E5BB7) → Hellblau (#E8F0FE)

Vorteile: Harmonisch, ruhig, professionell. Schwer falsch zu machen. Nachteile: Kann monoton wirken. CTAs brauchen eine Kontrastfarbe.

Komplementär

Zwei Farben, die sich im Farbkreis gegenüberliegen.

Beispiel: Blau (#2563EB) + Orange (#F97316)

Vorteile: Hoher Kontrast, starke visuelle Spannung, CTAs stechen hervor. Nachteile: Kann laut wirken. Sparsamst dosieren — 60-30-10-Regel einhalten.

Analog

Drei Farben, die im Farbkreis nebeneinander liegen.

Beispiel: Blau (#3B82F6) + Blaugrün (#06B6D4) + Grün (#10B981)

Vorteile: Natürlich, harmonisch, beruhigend. Nachteile: Wenig Kontrast. Braucht eine neutrale Farbe als Basis.

Triadisch

Drei Farben, gleichmässig im Farbkreis verteilt (je 120°).

Beispiel: Rot (#EF4444) + Gelb (#EAB308) + Blau (#3B82F6)

Vorteile: Lebendig, dynamisch, vielfältig. Nachteile: Schwer zu balancieren. Maximal eine Farbe dominant, die anderen als Akzente.

Split-Komplementär

Eine Hauptfarbe plus die beiden Nachbarn der Komplementärfarbe.

Beispiel: Blau (#3B82F6) + Orange-Rot (#F97316) + Gelb-Orange (#F59E0B)

Vorteile: Kontrast wie Komplementär, aber weniger aggressiv. Nachteile: Erfordert Feinabstimmung der Sättigung.

---

Kontraste: WCAG-Anforderungen

Warum Kontraste Pflicht sind

WCAG 2.1 AA schreibt Mindestkontraste vor. Websites, die diese nicht einhalten, sind nicht barrierefrei. Für Angebote, die unter das BFSG fallen (seit 28.06.2025 Websites und Apps, über die Verbraucher einen Vertrag abschließen, ausgenommen Kleinstunternehmen), ist WCAG 2.1 AA der Prüfmaßstab.

Die Kontrast-Regeln

Häufige Kontrast-Verstösse

Tools zum Prüfen

---

Branchenspezifische Farbempfehlungen

---

Farben und Dark Mode

Dark Mode erfordert angepasste Farben:

• Nicht invertieren: Einfaches Invertieren erzeugt grelle Farben auf dunklem Hintergrund
• Sättigung reduzieren: Farben mit 100 % Sättigung blenden auf dunklem Background
• Hintergründe abstufen: Nicht reines Schwarz (#000000), sondern Dunkelgrau (#0A0A0A bis #1A1A1A)
• Schatten entfernen: Schatten sind auf dunklem Hintergrund unsichtbar. Durch Elevation (hellere Hintergründe) ersetzen

:root {
  --primary: #2563EB;      /* Blau, 100% Sättigung */
  --primary-dark: #60A5FA; /* Blau, reduzierte Sättigung, heller */
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--primary-dark);
  }
}

---

Was in den Top-10-Google-Ergebnissen zu „Webdesign-Farben” steht

Wer zu „Webdesign Farben” oder „Farbpsychologie Website” googelt, bekommt mehrheitlich drei Arten von Treffern — und keiner deckt das ab, was wir in echten Kundenprojekten brauchen:

1. Farbpsychologie-Listicles. „Blau wirkt vertrauensvoll, Rot wirkt energisch” — diese Aufzählungen findest du in den meisten Top-Treffern. Sie übersehen: Die Wirkung einer Farbe hängt stark vom Kontext ab, also von umgebenden Farben, Sättigung, Helligkeit, Branche und Kultur. Dieselbe Primärfarbe kann je nach Umfeld ganz unterschiedlich wirken.

2. Tool-Empfehlungen für Farbpaletten-Generatoren. Coolors, Adobe Color, Khroma — alle Top-Treffer empfehlen dieselben fünf Tools, ohne zu erklären, wann welches Tool wirklich liefert. In unserer Praxis nutzen wir Realtime Colors für Markenfindung, Stark in Figma für WCAG-Checks und Tailwind-Native-Skalen für die Implementation — diese Kombination taucht in keinem Top-10-Treffer auf.

3. Reine Inspirations-Galerien (Awwwards, Behance). Schön, aber als Entscheidungsgrundlage für KMU-Websites unbrauchbar — weil die meisten gefeierten Designs für Boutique-Studios oder Tech-Konzerne mit eigenem Brand-Team konzipiert wurden, nicht für mittelständische Handwerksbetriebe in Erfurt.

Was in keinem Top-Treffer steht und in unseren Webdesign-Projekten konsistent über Konversion entscheidet:

• WCAG-Konformität als Grundregel, nicht als Nachgedanke. Für BFSG-pflichtige Angebote (seit 28.06.2025) müssen Kontrastverhältnisse von 4,5:1 für Fließtext eingehalten werden — viele „inspirierende” Designs aus den Listicles würden diese Prüfung nicht bestehen. WebAIM fand in der jährlichen „WebAIM Million”-Auswertung 2026 auf 83,9 % der untersuchten eine Million Startseiten Text mit zu geringem Kontrast (2025: 79,1 %).
• Dark-Mode-Ready-Paletten von Anfang an. Eine Marke, deren Farben sich erst nachträglich für Dark Mode anpassen lassen, fühlt sich im Dark Mode immer „falsch” an. Wir designen Paletten parallel für hell/dunkel — das ist in den Top-10-Treffern selten dokumentiert.
• Schnelle Reaktionszeiten. Laut Lindgaard u. a. (2006) beurteilen Menschen die visuelle Anmutung einer Webseite schon nach rund 50 ms, also bevor Inhalte gelesen werden. Farbe ist dabei ein wichtiger Teil des Gesamteindrucks, neben Layout und Bildern.
• Branchenkompatibilität mit DACH-Konventionen. Nach unserer Erfahrung kann eine knallgrüne Hauptfarbe für eine Anwaltskanzlei im DACH-Raum unseriös wirken, während sie in anderen Märkten modern wirken kann — Branchen- und Kulturkonventionen schlagen Farbpsychologie-Lehrbücher.

Wir empfehlen daher: Verlasse dich nicht auf Farbpsychologie-Listicles als Entscheidungsgrundlage. Definiere zuerst (1) deine Branche und Zielgruppe im DACH-Raum, (2) die geforderten WCAG-Kontraste, (3) deine Dark-Mode-Strategie. Erst dann triffst du die Farbwahl. Mehr dazu in unserem Artikel Was ist gutes Webdesign und unserem Brand-Standard-Beispiel.

---

Farben-Tools für Webdesigner

---

Meine Einschätzung als Agenturinhaber: Die haeufigste Farbfehler bei KMU-Websites: Zu viele Farben, zu wenig Kontrast. Ich empfehle jedem Kunden maximal 3 Farben — Hauptfarbe, Akzentfarbe, Neutralton. Alles andere verwirrt. Und bitte: Hellgraue Schrift auf weissem Hintergrund ist kein Design-Statement, sondern ein Barrierefreiheits-Verstoss.

FAQ

Wie viele Farben sollte eine Website haben?

3–5 Farben: 1 Primärfarbe, 1 Akzentfarbe, 2–3 neutrale Töne (Weiss, Grau, Schwarz). Mehr Farben erzeugen visuelles Chaos und erschweren ein konsistentes Design.

Welche Farbe konvertiert am besten für CTAs?

Es gibt keine universelle “beste CTA-Farbe”. Entscheidend ist der Kontrast zur Umgebung. Ein oranger Button auf einer blauen Website fällt auf. Ein blauer Button auf einer blauen Website verschwindet. Teste mit A/B-Tests.

Muss ich Farbenblindheit berücksichtigen?

Ja. 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche. Verwende nie Farbe als einziges Unterscheidungsmerkmal. Kombiniere Farbe immer mit Form, Text oder Icons. Rot/Grün-Unterscheidung ist besonders problematisch.

Kann ich meine Markenfarbe als Textfarbe verwenden?

Nur wenn der Kontrast zum Hintergrund mindestens 4.5:1 beträgt. Viele Markenfarben (besonders Gelb, Hellgrün, Hellorange) sind als Textfarbe unlesbar. Verwende die Markenfarbe für Flächen, Buttons und Akzente — nicht für Fliesstext.

Wie wähle ich Farben, die auch für Farbenblinde funktionieren?

Setze nie Farbe als einziges Unterscheidungsmerkmal ein — kombiniere Farbe immer mit Form, Icon oder Text. Vermeide insbesondere Rot/Grün-Kontraste (häufigste Farbsehschwäche). Tools wie Stark in Figma simulieren Deuteranopie, Protanopie und Tritanopie und zeigen sofort, ob deine Palette für die rund 8 % der Männer mit Farbsehschwäche funktioniert (Quelle: Colour Blind Awareness, 2024). Mehr Details in unserer BFSG-Checkliste 2026.

Wie unterscheidet sich die Farbwahl im Dark Mode konkret?

Reduziere die Sättigung deiner Primärfarbe im Dark Mode um etwa 20–30 % und erhöhe die Helligkeit, um Blendung zu vermeiden. Verwende keinen reinen Schwarz-Hintergrund (#000000) — Material Design empfiehlt #121212 als dunkle Grundfläche, weil sich auf Dunkelgrau Ebenen (Elevation), Farben und Tiefe besser darstellen lassen als auf reinem Schwarz (Quelle: Google Material Design Dark Theme Guidelines). Schatten ersetzt du durch hellere Elevation-Layer (Surface 0, Surface 1, Surface 2). Wir dokumentieren unseren eigenen Dark-Mode-Ansatz im Adfera Brand-Beispiel.

Welche Farben passen zu einer WaaS-Website?

Für unsere Adfera-eigene WaaS-Marke nutzen wir Blau (#2563EB) als Primärfarbe für Vertrauen und Amber (#D97706) als Akzent für Energie — eine klassische Komplementär-Kombination, die im B2B-SaaS-Bereich gut funktioniert. Für deine eigene WaaS-Website empfehlen wir: Eine Vertrauensfarbe (Blau, Dunkelgrün) als Basis und eine kontrastreiche Akzentfarbe (Orange, Amber) für CTAs. Mehr zur Adfera-Markenphilosophie in Modernes Webdesign 2026 und unter website-monatlich-bezahlen-modelle.

---

Verwandte Ratgeber

• Typografie im Webdesign: Schriften, Grössen und Lesbarkeit
• Was ist gutes Webdesign?
• Modernes Webdesign 2026: 8 Merkmale
• 15 Webdesign-Tipps für KMU

---

Farbkonzept für deine Website?

Wir entwickeln Farbpaletten, die zu deiner Marke passen, barrierefrei sind und konvertieren. Kein Rätselraten — fundiertes Farbdesign.

Kostenloses Erstgespräch vereinbaren →

Unsere Webdesign-Leistungen →

---

Über den Autor: Moritz Lehmann ist Geschäftsführer von Adfera (M.Sc. Wirtschaftsinformatik) und hat seit 2019 über 50 Websites für KMU im DACH-Raum designed und entwickelt.