Farbpsychologie im Webdesign: Warum es nie um die Farbe geht

Stell dir eine Therapeutin vor, die eine neue Website will. Eigene Praxis, seit Jahren erfolgreich. Ihre erste Ansage wäre vermutlich: „Ich hätte gern was Seriöses. In Blau. Das wirkt ja vertrauenswürdig, das hab ich irgendwo gelesen.“ Genau diesen Satz höre ich in Erstgesprächen immer wieder, in allen möglichen Varianten.

Und ich verstehe, woher das kommt. Es gibt hunderte Blogartikel mit Farbtabellen: Blau = Vertrauen, Grün = Natur, Rot = Energie, Gelb = Optimismus. Klingt einleuchtend. Ist aber, wie die Forschung zeigt, in dieser Pauschalität schlicht falsch.

Die eigentlich interessante Frage ist nicht, welche Farbe deine Website haben soll. Sondern welches Motiv du bei deiner Zielgruppe ansprechen willst. Die Farbe kommt danach. Und genau da hab ich in den letzten Wochen tiefer recherchiert, als ich es diesem Beitrag ursprünglich zugetraut hätte: mit echten Studien, mit Quellenangaben, und mit einer ordentlichen Portion Ernüchterung darüber, wie viel Farbpsychologie im Netz auf Sand gebaut ist.

Warum Farbtabellen nicht funktionieren

Die Psychologen Andrew Elliot und Markus Maier haben über Jahre untersucht, wie Farbe auf uns wirkt. Ihr zentraler Befund: Farbe hat keine feste Bedeutung. Sie wirkt nur im Kontext.

Ihr eigenes Beispiel bringt es auf den Punkt: Blau auf einem Siegerband ist positiv, es bedeutet erster Platz. Blau auf einem Stück Fleisch ist negativ, es bedeutet verdorben. Gleiche Farbe, gegensätzliche Wirkung, je nachdem worauf sie sitzt.

Bei Rot ist der Effekt noch krasser dokumentiert. Im Leistungskontext, also vor einer Prüfung oder auf einem Formular, wirkt Rot eher negativ: Fehler, Gefahr, Vermeidung. Im Kontext von Anziehung wirkt dieselbe Farbe positiv. Rot ist nicht „aufregend“ oder „gefährlich“. Rot ist beides, abhängig davon, wo es auftaucht.

Das ist der Grund, warum eine Liste wie „Blau = Vertrauen“ als Website-Rezept nicht taugt. Sie ignoriert die eine Variable, die tatsächlich zählt: den Kontext, in dem die Farbe steht.

Der Motivkompass: welches Motiv sprichst du an?

Wenn die Farbe selbst kein zuverlässiges Signal ist, was dann? Hier kommt ein Modell ins Spiel, das ich in Kundenprojekten inzwischen als Ausgangspunkt nehme: der Motivkompass® nach Dirk W. Eilert.

Seine wissenschaftliche Wurzel liegt beim Zürcher Psychologen Norbert Bischof, der in den 1980er-Jahren drei Grundsysteme menschlicher Motivation beschrieben hat: Sicherheit, Erregung und Autonomie. Eilert hat daraus, unter Einbeziehung weiterer Forschung, ein Vier-Felder-Modell entwickelt, das selbst farbcodiert ist. Was für einen Beitrag über Farbe im Webdesign natürlich praktisch ist.

Die vier Felder, angeordnet auf zwei Achsen (senkrecht Ruhe bis Aktion, waagrecht Kontrolle bis Genuss):

Rot – Durchsetzung und Einfluss, zwischen Aktion und Kontrolle. „Ich will Fortschritt sehen.“ Auf der Karte stehen hier Erfolg, Leistung, Mut, Status, Ausdauer. Im Webdesign: klare Hierarchien, starke Kontraste, Handlungsaufforderungen, die etwas verlangen statt nur einzuladen.

Blau – Ordnung und Stabilität, zwischen Kontrolle und Ruhe. „Ich will wissen, dass es funktioniert.“ Hier liegen Zuverlässigkeit, Präzision, Sorgfalt, Beständigkeit, Sicherheit. Im Webdesign: strenge Raster, ruhige Flächen, wenig Dekoration, Zahlen und Fakten prominent platziert.

Grün – Harmonie und Geborgenheit, zwischen Ruhe und Genuss. „Ich will dazugehören.“ Auf der Karte: Wärme, Nähe, Fürsorge, Mitgefühl, Zugehörigkeit, Gesundheit. Im Webdesign: weiche Formen, viel Weißraum, warme Bilder von Menschen statt von Produkten.

Gelb – Inspiration und Leichtigkeit, zwischen Genuss und Aktion. „Ich will etwas Neues erleben.“ Hier stehen Kreativität, Neugier, Abenteuer, Individualität, Schönheit. Im Webdesign: organische Formen, Bewegung, unregelmäßige Layouts, Fotografie mit Textur.

Eine ehrliche Anmerkung dazu: Eilert verknüpft die vier Felder auch mit Botenstoffen, Rot mit Testosteron etwa, Grün mit Oxytocin. Das ist ein Modell aus der Beraterpraxis, kein neurowissenschaftlicher Befund mit Replikationsstudien. Ich verwende es als Landkarte, um mit Kundinnen ins Gespräch zu kommen, nicht als bewiesene Tatsache.

Wichtig ist außerdem, den Motivkompass® nicht mit zwei verwandten, aber eigenständigen Modellen zu verwechseln, die im deutschsprachigen Marketing gern durcheinandergeworfen werden. Christian Scheier und Dirk Held von der Agentur decode arbeiten mit drei „Grundbelohnungen“, Sicherheit, Autonomie und Erregung, nennen ihr Modell aber nicht Motivkompass. Hans-Georg Häusel wiederum hat mit seiner Limbic® Map ein eigenes Drei-Felder-Modell entwickelt, Balance, Dominanz und Stimulanz, mit anderer Herkunft und anderen Achsen. Alle drei speisen sich letztlich aus derselben Quelle, Bischofs Zürcher Modell, sind aber unterschiedliche Weiterentwicklungen. Wer sie vermischt, zitiert eine eingetragene Marke falsch.

Was die Forschung wirklich hergibt

So weit die Modelle. Jetzt zur Studienlage, und die ist dünner als man nach den vielen selbstbewussten Blogartikeln vermuten würde.

Die relevanteste Marketing-Studie stammt von Lauren Labrecque und George Milne. Sie zeigten 2012 in vier Experimenten, dass Farbton tatsächlich mit Markenpersönlichkeit zusammenhängt: Rot wird als „exciting“ wahrgenommen, Blau als „competent“. So weit bestätigt das die grobe Intuition vieler Farbtabellen.

Der entscheidende Zusatzbefund wird aber meistens weggelassen: Sättigung und Helligkeit tragen die halbe Botschaft. Ein sattes Signalrot und ein entsättigtes Staubrot sind für unser Gehirn zwei völlig verschiedene Farben, auch wenn beide „Rot“ heißen. Wer nur den Farbton wählt und Sättigung ignoriert, trifft nur die halbe Entscheidung.

Noch wichtiger ist ein Befund von Paul Bottomley und John Doyle aus dem Jahr 2006, aus meiner Sicht das stärkste wissenschaftliche Argument in diesem ganzen Themenfeld. Sie zeigten: Es gibt keine gute Farbe an sich. Funktionale Produkte wirken passender in funktionalen Farben, sensorisch-soziale Produkte in sensorisch-sozialen Farben. Kongruenz zwischen Farbe und Versprechen schlägt jede pauschale Farbsymbolik. Das ist im Grunde die wissenschaftliche Bestätigung für den Motivkompass-Ansatz: nicht „welche Farbe wirkt gut“, sondern „welche Farbe passt zu diesem Motiv, dieser Zielgruppe, diesem Versprechen“.

Elliot selbst, dessen Color-in-Context-Theorie oben schon vorkam, ist bei alldem auffallend zurückhaltend mit eigenen Schlussfolgerungen. In seinen Übersichtsarbeiten schreibt er offen, dass viele Studien methodisch wackeln, Farbton und Sättigung selten sauber getrennt werden und Stichproben oft zu klein sind, um verlässliche Effektstärken zu liefern. Sein eigenes Wort dafür: Das Feld befindet sich in einem „nascent stage“, einem frühen Entwicklungsstadium. Selbst der bekannteste Einzelbefund, dass Rot vor kognitiven Tests die Leistung verschlechtert, ließ sich in vier unabhängigen Replikationsversuchen 2020 nicht bestätigen.

Das heißt nicht, dass Farbe egal ist. Es heißt, dass man mit den Zahlen vorsichtig sein sollte, die im Netz kursieren.

Drei Mythen, die du ab heute nicht mehr glaubst

Und damit zum Herzstück dieses Beitrags. Drei Behauptungen, die in praktisch jedem Farbpsychologie-Artikel auftauchen, und die bei näherer Prüfung nicht halten, was sie versprechen.

„Farbe steigert die Markenerkennung um 80 Prozent.“ Diese Zahl geistert seit Jahren durch Marketing-Blogs, immer mit Verweis auf „eine Studie der Loyola University“. Die Quellenkette lässt sich zurückverfolgen: Sie führt zu einem Xerox-Marketingdokument aus dem Jahr 2005, das seinerseits auf eine Website namens ColorMatters.com verweist, die wiederum „Loyola University Maryland“ ohne konkrete Studienangabe nennt. Die tatsächlichen Loyola-Studien der Forscherin Ellen Hoadley aus 1990 und 2000 existieren zwar, sie untersuchten aber etwas anderes: wie Farbe gegenüber reinem Schwarzweiß die Informationsverarbeitung verbessert, im Büroumfeld der 90er-Jahre, als Farbdruck noch teuer war. Die Zahl 80 Prozent kommt darin nicht vor. Was stimmt: Farbe statt Schwarzweiß macht einen Unterschied. Was nicht stimmt: dass die richtige Farbe die Markenerkennung um 80 Prozent steigert.

„Rote Buttons konvertieren besser.“ Der Ursprung ist ein A/B-Test von Performable, kurz darauf von HubSpot übernommen, aus dem Jahr 2011. Getestet wurde ein „Get Started Now“-Button, rot gegen grün, Ergebnis: 21 Prozent mehr Klicks für Rot. Was in den meisten Nacherzählungen fehlt: Die getestete Seite war komplett grün gehalten. Der rote Button war schlicht das einzige rote Element weit und breit. Gemessen wurde also nicht Rot als Farbe, sondern Isolation und Kontrast zur Umgebung. Auf einer rot-dominierten Seite hätte vermutlich Grün gewonnen. Die brauchbare Regel daraus, und die verwende ich in jedem Kundenprojekt: Deine Handlungsaufforderung soll die einzige Farbe ihrer Art im Sichtfeld sein und deutlich zur Umgebung kontrastieren. Der Kontrast ist der Hebel, nicht der Farbton.

„62 bis 90 Prozent unseres Urteils basieren allein auf Farbe, gebildet innerhalb von 90 Sekunden.“ Diese Zahl stammt aus einem viel zitierten Aufsatz von Satyendra Singh aus dem Jahr 2006. Das Problem: Singhs Arbeit ist eine Literaturübersicht, kein eigenes Experiment. Sie fasst ältere Sekundärquellen zusammen, eine überprüfbare Primärstudie mit exakt dieser Messung lässt sich nicht finden. Singh selbst weist in seinem Text auf die Widersprüche in der Farbpsychologie-Literatur hin, ein Detail, das beim Zitieren meistens verschwindet.

Was diese drei Mythen gemeinsam haben: Sie klingen präzise, weil sie eine Zahl liefern. Genau diese Präzision ist das Warnsignal. Echte Farbforschung ist selten so eindeutig.

Die Beispiele: gleiche Branche, gegensätzliches Motiv

Am besten wird das an echten Websites sichtbar. Zwei Banken, gleiche Branche, gleiches Grundversprechen, komplett gegensätzliche Farbentscheidung.

Die Sparkasse spielt Rot, nicht Blau. Auf den ersten Blick widerspricht das jeder Farbtabelle, Banken „sollen“ doch Blau sein. Aber das Rot funktioniert hier nicht als Signal für Erregung, sondern als jahrzehntelang eingeübter Wiedererkennungsanker: Es ist mit „Institution, überall im Ort präsent, gehört zum Straßenbild“ verknüpft. Genau der Lerneffekt, den Elliots Color-in-Context-Theorie beschreibt. Das Sicherheitsgefühl kommt hier nicht aus der Farbe, sondern aus der Struktur drumherum, strenges Raster, sachliche Schrift, hohe Textkontraste.

N26 macht das Gegenteil. Kein Bankblau, sondern Teal mit warmen Sekundärfarben. Die Botschaft dahinter: „Ich mache meine Finanzen selbst, ohne Berater in der Filiale.“ Das Motiv ist nicht Sicherheit durch Institution, sondern Autonomie. Das nötige Sicherheits-Minimum, das eine Bank trotzdem braucht, liefert hier nicht die Farbe, sondern Klarheit im Interface. Gleiche Branche, zwei Zielgruppen, zwei Motive, zwei komplett unterschiedliche Paletten. Beide funktionieren.

Airbnb zeigt einen anderen Hebel: Zurückhaltung. Der aktuelle Auftritt ist fast durchgehend Schwarz auf Weiß, dazu Landkarte und Fotografie in gedeckten Tönen. Farbe taucht nur an wenigen, bewusst gewählten Stellen auf, im Logo, im Call-to-Action-Button „Loslegen“, in der Preisblase auf der Karte. Und dort ist sie kein sanftes Pastell, sondern ein sattes, fast grelles Pink-Crimson. Genau das ist die Regel aus dem Button-Mythos weiter oben, jetzt in der Praxis: Die Farbe wirkt nicht, weil sie „die richtige“ ist, sondern weil sie auf der ganzen Seite die einzige ihrer Art bleibt. Dein Auge hat keine andere Wahl, als genau dort hinzuschauen.

Der harte Teil: Kontrast ist keine Geschmacksfrage

Bei allem, was in der Farbforschung unsicher bleibt, gibt es einen Bereich mit echten, überprüfbaren Zahlen: Barrierefreiheit. Die Web Content Accessibility Guidelines, kurz WCAG, schreiben in der Version 2.2 des W3C konkrete Mindestkontraste vor.

Normaler Text braucht mindestens ein Kontrastverhältnis von 4,5 zu 1 gegenüber seinem Hintergrund. Große Schrift, ab 18 Punkt oder ab 14 Punkt fett, kommt mit 3 zu 1 aus. Dieselben 3 zu 1 gelten für Bedienelemente wie Buttons, Formularfelder und Fokusrahmen. Nicht gerundet, 4,499 zu 1 erfüllt die Anforderung nicht.

Die Zahl 4,5 ist kein Zufall. Sie kompensiert den typischen Sehschärfeverlust ab dem 80. Lebensjahr, auf Basis von ISO- und ANSI-Normen berechnet. In der EU sind diese Werte über die Norm EN 301 549 rechtlich verankert, relevant unter anderem seit dem European Accessibility Act, der seit Juni 2025 anwendbar ist.

Das ist der Punkt, an dem viele schön geplante Farbkonzepte in der Praxis scheitern. Ein zartes Pastellgrau auf Weiß mag im Moodboard elegant wirken. Auf dem Bildschirm einer Kundin mit eingeschränktem Sehvermögen, oder einfach bei hellem Sonnenlicht am Handy, ist der Text schlicht nicht lesbar. Und anders als bei der Symbolik von Farben ist das hier kein Interpretationsspielraum, sondern eine messbare Zahl.

Vom Motiv zur Palette: wie ich das in Kundenprojekten mache

In meinen Projekten gehe ich in dieser Reihenfolge vor, und diese Reihenfolge ist der eigentliche Unterschied zu „einfach eine schöne Farbe aussuchen“:

Zuerst das Motiv bestimmen, nicht die Farbe. Im Erstgespräch frage ich: Wovor hat deine Zielgruppe Angst? Was will sie zeigen, wenn sie deine Website öffnet? Eine Kundin mit Handwerksbetrieb will vor allem eines: dass die Kundin sieht, hier wird sauber gearbeitet, pünktlich, verlässlich. Das ist Sicherheit plus Disziplin, kein Pastell, sondern gedecktes Blau oder Anthrazit mit einer einzigen warmen Signalfarbe. Eine Coachin im Wellness-Bereich will Nähe zeigen, das sind warme Erdtöne, niedrige Sättigung, viel Weißraum.

Dann die 60-30-10-Regel: Grundfarbe trägt das Motiv, Sekundärfarbe stützt sie, Akzentfarbe ist ausschließlich für die Handlungsaufforderung reserviert. Genau dieser letzte Punkt erzeugt automatisch den Isolationseffekt, der beim roten HubSpot-Button eigentlich den Unterschied gemacht hat.

Und zuletzt, vor jedem Launch, der Kontrast-Check. Jede Textebene, jeder Button, gegen 4,5 zu 1 beziehungsweise 3 zu 1 geprüft. Kein optionaler Feinschliff, sondern der letzte Schritt, ohne den alles davor nicht zählt.

Probier es aus: das Farbpaletten-Quiz

Damit du nicht nur liest, sondern gleich einen Startpunkt hast, habe ich ein kleines Werkzeug gebaut. Fünf Runden, keine davon über Farbe. Sie gehen den Motivkompass der Reihe nach durch: erst die Grundrichtung zwischen Aktion und Ruhe, Genuss und Kontrolle. Dann genauer, welche der acht Himmelsrichtungen es trifft. Dann der Botenstoff, also welches Gefühl deine Seite auslösen soll. Und zuletzt die wichtigste Runde: Aus allen Begriffen der Karte suchst du die heraus, die deine Zielgruppe beschreiben.

Diese letzte Runde zählt am stärksten, und das aus einem Grund. Eine Ernährungsberaterin würde bei der Frage nach der Grundrichtung vermutlich „Aktion“ wählen, ihre Klientinnen wollen ja etwas verändern. Trotzdem gehört sie nicht ins Feld Durchsetzung. Sobald sie Gesundheit, Wohlbefinden und Fürsorge anklickt, ist klar, dass sie im grünen Feld zu Hause ist. Konkrete Begriffe verraten mehr als abstrakte Achsen.

Am Ende bekommst du vier Farben mit klarer Aufgabe. Hell für Hintergrund und Text auf dunklen Flächen. Primär für Buttons und Links. Sekundär für große ruhige Abschnitte. Dunkel für Fließtext und Überschriften. Dazu eine Vorschau, wie das als Website aussehen könnte, und die Kontrastwerte nach WCAG 2.2, live berechnet statt behauptet.

Und jetzt der wichtigste Satz zu diesem Quiz: Es ist als Inspiration gedacht, nicht als Vorschrift. Fünf Runden ersetzen keine Markenentwicklung. Was du bekommst, ist ein Startpunkt, über den du reden kannst, mit dir selbst oder mit deiner Designerin. Wenn dir eine ganz andere Richtung im Bauch besser gefällt, ist das ein völlig legitimes Argument. Farbe wirkt nie allein, sondern immer zusammen mit Schrift, Bildern und dem, was du zu sagen hast.

Was das für deine Website bedeutet

Wenn dir das nächste Mal jemand sagt, „diese Farbe wirkt vertrauenswürdig“, frag nach: vertrauenswürdig, wofür, für wen? Die Antwort liegt nie in der Farbe allein. Sie liegt im Motiv dahinter, in der Sättigung, im Kontrast zur Umgebung, und darin, ob überhaupt jemand den Text noch lesen kann.

Zurück zur Therapeutin vom Anfang, die „was Seriöses in Blau“ wollte. Nach dem Motivkompass gedacht, wäre Blau vermutlich die falsche Wahl. Denn ihr eigentliches Anliegen ist ja nicht, kompetent und distanziert zu wirken, sondern dass ihre Klientinnen sich sofort aufgehoben fühlen, bevor sie überhaupt ein Wort gelesen haben. Das ist Harmonie und Geborgenheit, kein Kontroll-Motiv. Warmer Sand und gedecktes Grün treffen dieses Gefühl deutlich besser als kühles Blau. Genau diese Verschiebung, weg von der Farbe, die man „nehmen soll“, hin zu der, die zum Motiv passt, ist der ganze Punkt.

Wenn du wissen willst, wie deine eigene Website in Sachen Farbe, Kontrast und Besucherführung dasteht, biete ich einen Website-Check an: 45 Minuten, 149 €, konkrete Ergebnisse statt Bauchgefühl. Hier kannst du deinen Termin buchen.

Quellenverzeichnis

• Bischof, N. (1985): Das Rätsel Ödipus. Piper, München. — sowie Bischof, N. (1993): „Untersuchungen zur Systemanalyse der sozialen Motivation I: Die Regulation der sozialen Distanz.“ Zeitschrift für Psychologie, 201, 5–43. Zusammenfassung: Dorsch – Lexikon der Psychologie (Hogrefe), https://dorsch.hogrefe.com/stichwort/zuercher-modell-der-sozialen-motivation
• Springer Professional / Springer Nature: „Der Motivkompass® nach Eilert“ (Buchkapitel, Springer Gabler, 2021). https://link.springer.com/chapter/10.1007/978-3-658-32419-3_6
• decode Marketing: Publikationen (Scheier/Held). https://decodemarketing.com/de/publikationen
• Gruppe Nymphenburg Consult AG: „Limbic® Map: Der Emotionsraum des Menschen auf einen Blick.“ https://nymphenburg.de/limbic-map.html
• Labrecque, L. I. & Milne, G. R. (2012): „Exciting red and competent blue: the importance of color in marketing.“ Journal of the Academy of Marketing Science, 40(5), 711–727. DOI: 10.1007/s11747-010-0245-y
• Bottomley, P. A. & Doyle, J. R. (2006): „The interactive effects of colors and products on perceptions of brand logo appropriateness.“ Marketing Theory, 6(1), 63–84. DOI: 10.1177/1470593106061263
• Elliot, A. J. (2015): „Color and psychological functioning: a review of theoretical and empirical work.“ Frontiers in Psychology, 6:368. https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2015.00368/full
• Elliot, A. J. & Maier, M. A. (2014): „Color Psychology: Effects of Perceiving Color on Psychological Functioning in Humans.“ Annual Review of Psychology, 65, 95–120.
• „Processing the Word Red and Intellectual Performance: Four Replication Attempts.“ Collabra: Psychology, 6(1), 3 (2020). https://online.ucpress.edu/collabra/article/6/1/3/113047/Processing-the-Word-Red-and-Intellectual
• Singh, S. (2006): „Impact of color on marketing.“ Management Decision, 44(6), 783–789. https://www.researchgate.net/publication/235320162_Impact_of_color_on_marketing
• Hagen, E. (2019): „‚Color increases brand recognition by 80%‘: the real contents of the Loyola study revealed.“ insights4print.ceo. https://www.insights4print.ceo/2019/02/color-increases-brand-recognition-by-80-the-real-contents-of-the-loyola-study-revealed/
• CXL: „Which CTA Button Color Converts the Best?“ https://cxl.com/blog/which-color-converts-the-best/
• SitePoint: „UX Dilemma: Red Button vs. Green Button.“ https://www.sitepoint.com/button-ux-red-green/
• W3C/WAI: „Understanding Success Criterion 1.4.3: Contrast (Minimum)“ (WCAG 2.2). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
• W3C/WAI: „Understanding Success Criterion 1.4.11: Non-text Contrast.“ https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html