Farben im Webdesign: Psychologie, Schemata und Kontraste
Farbe ist das erste Designelement, das Nutzer wahrnehmen. Innerhalb von 90 Millisekunden bilden sich visuelle Urteile — und 62–90 % davon basieren auf Farbe allein (Institute for Color Research). Eine falsche Farbwahl kann Vertrauen zerstören, bevor ein einziges Wort gelesen wird.
Zusammenfassung: Farbe ist das erste Designelement, das Nutzer wahrnehmen — 62-90 Prozent der visuellen Urteile basieren auf Farbe. Die 60-30-10-Regel: 60 Prozent Hauptfarbe, 30 Prozent Sekundaerfarbe, 10 Prozent Akzentfarbe. Kontraste muessen WCAG 2.1 AA erfuellen (4,5:1 fuer Text). Branchenspezifische Empfehlungen: Blau fuer Vertrauen (Finanz/Recht), Gruen fuer Gesundheit/Natur, Orange fuer Energie/Handwerk.
Inhaltsverzeichnis
- Farbpsychologie
- Die 60-30-10-Regel
- Farbschemata erstellen
- Kontraste: WCAG-Anforderungen
- Branchenspezifische Farbempfehlungen
- 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
Die wichtigste Regel für Farbverteilung im Webdesign:
| Anteil | Funktion | Beispiel |
|---|---|---|
| 60 % | Dominante Farbe | Hintergrund (Weiss, Hellgrau) |
| 30 % | Sekundärfarbe | Navigation, Cards, Sektionen |
| 10 % | Akzentfarbe | CTAs, Links, Hover-Effekte |
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
Das BFSG und WCAG 2.1 AA schreiben Mindestkontraste vor. Websites, die diese nicht einhalten, sind nicht barrierefrei — und seit Juni 2025 potenziell rechtswidrig.
Die Kontrast-Regeln
| Element | Mindestkontrast (WCAG AA) |
|---|---|
| Normaler Text (< 18pt) | 4.5:1 |
| Grosser Text (≥ 18pt oder ≥ 14pt fett) | 3:1 |
| UI-Komponenten und Grafiken | 3:1 |
| Dekorative Elemente | Kein Minimum |
Häufige Kontrast-Verstösse
| Problem | Beispiel |
|---|---|
| Hellgrauer Text auf Weiss | #999999 auf #FFFFFF = 2.85:1 (Fail) |
| Hellblauer Link auf Weiss | #60A5FA auf #FFFFFF = 3.08:1 (Fail) |
| Weisser Text auf Gelb | #FFFFFF auf #EAB308 = 1.87:1 (Fail) |
| Grüner Text auf Rot | Für farbenblinde Nutzer unlesbar |
Tools zum Prüfen
| Tool | Beschreibung | Preis |
|---|---|---|
| WebAIM Contrast Checker | Browser-Tool, schnell und zuverlässig | Kostenlos |
| Stark (Figma Plugin) | Kontrast-Prüfung direkt im Design | Kostenlos (Basis) |
| axe DevTools | Browser-Extension, prüft die gesamte Seite | Kostenlos |
| Polypane | Entwickler-Browser mit eingebautem Kontrast-Checker | 14 $/Monat |
Branchenspezifische Farbempfehlungen
| Branche | Empfohlene Primärfarbe | Akzent | Begründung |
|---|---|---|---|
| Handwerker | Blau oder Dunkelgrün | Orange | Vertrauen + Energie |
| Arztpraxis | Blau oder Grün | Weiss | Sauberkeit, Vertrauen |
| Kanzlei | Dunkelblau oder Anthrazit | Gold/Kupfer | Seriosität, Prestige |
| Restaurant | Rot, Orange oder Erdtöne | Creme | Appetit, Wärme |
| SaaS/Tech | Blau oder Violett | Grün | Innovation, Vertrauen |
| E-Commerce | Je nach Zielgruppe | Kontrastfarbe für CTA | Konversion steigern |
| Bio/Nachhaltigkeit | Grün, Erdtöne | Creme/Sand | Natur, Authentizität |
| Luxus/Mode | Schwarz, Dunkelgrau | Gold | Eleganz, Exklusivität |
| Coaching | Violett oder Blaugrün | Orange | Weisheit, Kreativität |
| Kinder | Bunt, aber harmonisch | — | Fröhlich, einladend |
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 8 von 10 Top-Treffern. Sie übersehen: Die Wirkung einer Farbe hängt stärker vom Kontext ab als vom Farbton selbst. Nielsen Norman Group hat 2023 in der Studie „Color Psychology in UX” gezeigt, dass dieselbe Primärfarbe je nach umgebenden Sekundärtönen, Sättigung und Helligkeit gegensätzliche Emotionen auslösen kann (Quelle: nngroup.com, 2023).
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. Seit dem BFSG (28.06.2025) müssen Kontrastverhältnisse von 4,5:1 für Fließtext eingehalten werden — viele „inspirierende” Designs aus den Listicles wären in DACH formal nicht mehr zulässig. WebAIM dokumentiert in der jährlichen „WebAIM Million Study”, dass 81 % aller untersuchten Homepages Kontrast-Fails haben (Quelle: WebAIM Million 2024).
- 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.
- Neurologische Reaktionszeiten. Studien des Institute for Color Research zeigen: Die ersten visuellen Urteile fallen in 90 ms — bevor Typografie, Layout oder Inhalt überhaupt verarbeitet werden. Das macht die Farbwahl zur einzigen Designentscheidung, die schneller wirkt als jede andere.
- Branchenkompatibilität mit DACH-Konventionen. Eine grüne Hauptfarbe für eine Anwaltskanzlei wirkt im DACH-Raum unseriös, in Skandinavien dagegen modern — kulturelle Konventionen 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
| Tool | Funktion |
|---|---|
| Coolors.co | Farbpaletten-Generator, Export in CSS/Tailwind |
| Adobe Color | Farbrad, Farbharmonien, Accessibility-Check |
| Realtime Colors | Live-Preview von Farben auf einer Website |
| Huemint | KI-basierte Farbpaletten für Marken |
| Color Hunt | Kuratierte Farbpaletten der Community |
| Tailwind CSS Colors | Vorgefertigte, zugängliche Farbskalen |
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. Testen Sie mit A/B-Tests.
Muss ich Farbenblindheit berücksichtigen?
Ja. 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche. Verwenden Sie nie Farbe als einziges Unterscheidungsmerkmal. Kombinieren Sie 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. Verwenden Sie 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 oder ähnliche Dunkelgrautöne, weil Halos und Bewegungsunschärfe damit reduziert werden (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 Ihre Website?
Wir entwickeln Farbpaletten, die zu Ihrer Marke passen, barrierefrei sind und konvertieren. Kein Rätselraten — fundiertes Farbdesign.
Kostenloses Erstgespräch vereinbaren →
Ü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.