Farbpsychologie im Webdesign: So wählst du Farben, die konvertieren

Rote Buttons verkaufen besser. Nein, grüne. Orange ist die Farbe für „Jetzt kaufen“. Wer zur Farbpsychologie im Webdesign recherchiert, findet viele solcher Faustregeln — oft mit beeindruckenden Prozentzahlen und selten mit einer sauberen Quelle.

Farben wirken, keine Frage. Mit ihnen weckst du Assoziationen, lenkst den Blick und prägst den ersten Eindruck deiner Website. Aber sie wirken nicht im luftleeren Raum. In diesem Artikel zeige ich dir, was die Forschung tatsächlich hergibt, was die bekannten Conversion-Farben leisten können, warum Kontrast wichtiger ist als der Farbton und wie du deine Farbwahl testest, statt zu raten.

Wie Farben wirken — und was die Forschung wirklich sagt

Farbe gehört zu den Merkmalen, die wir auf einer Seite als Erstes wahrnehmen, noch bevor jemand die Überschrift gelesen hat. Damit hilft sie dem Auge, Wichtiges von Unwichtigem zu trennen, und weckt Assoziationen: Blau wirkt auf viele ruhig und seriös, Rot laut und dringlich.

Wie stark solche Effekte sind, ist allerdings weniger klar, als viele Marketing-Artikel behaupten. Der Psychologe Andrew Elliot, der seit Jahren zu Farbe und Psychologie forscht, beschreibt dieses Forschungsfeld als noch am Anfang stehend und rät zu Geduld und Vorsicht bei Schlussfolgerungen für die Praxis (Elliot, Frontiers in Psychology, 2015). Wie eine Farbe wirkt, hängt stark vom Kontext ab: von der Branche, vom Umfeld auf der Seite, von der Kultur und davon, was Menschen von einer Marke schon kennen.

Für die Praxis heißt das: Farbpsychologie liefert gute Ausgangshypothesen — aber keine Garantie, dass ein bestimmter Farbton bei deiner Zielgruppe mehr Anfragen bringt.

Die Psychologie der wichtigsten Conversion-Farben

Mit diesem Vorbehalt: Die folgenden Assoziationen sind im deutschsprachigen Raum verbreitet und eignen sich als Startpunkt.

Orange — die Aktionsfarbe: Orange verbindet die Energie von Rot mit der Freundlichkeit von Gelb. Es fällt auf, ohne bedrohlich zu wirken, und wird deshalb häufig für Kauf- und Anmelde-Buttons eingesetzt. Aber: Auf einer Website mit viel Orange im Design verliert ein orangefarbener Button seine Signalwirkung.

Blau — die Vertrauensfarbe: Blau gilt als ruhig, seriös und verlässlich. Viele Banken, Versicherungen und Softwarehäuser setzen darauf, etwa die Deutsche Bank, die Allianz oder SAP. Als Markenfarbe passt Blau gut zu Angeboten, bei denen Sicherheit und Vertrauen zählen. Als Button-Farbe funktioniert es vor allem dann, wenn der Rest der Seite nicht ebenfalls blau ist.

Grün — das Go-Signal: In vielen Kulturen steht Grün für „Los“, „richtig“ und „sicher“, außerdem für Natur und Nachhaltigkeit. Grüne Buttons passen gut zu Bestätigungen, Downloads oder dem letzten Schritt im Checkout. Aber: Bei einer grünen Markenidentität geht ein grüner Button im Hintergrund unter.

Rot — Dringlichkeit mit Risiko: Rot steht für Leidenschaft und Dringlichkeit, aber auch für Gefahr und Fehler. Es eignet sich für zeitlich begrenzte Angebote oder wichtige Hinweise. Zu viel Rot wirkt schnell aggressiv. Und weil Rot auch Fehlermeldungen kennzeichnet, kann ein roter Button im falschen Kontext eher abschrecken.

Kulturelle Unterschiede im DACH-Markt

Farben sind nicht universell. Weiß steht bei uns für Reinheit, in Teilen Asiens auch für Trauer. Und selbst innerhalb Europas unterscheiden sich Sehgewohnheiten.

Für den DACH-Raum gilt aus meiner Sicht: Klarheit schlägt Lautstärke. Viele Kundinnen und Kunden reagieren skeptisch auf zu viel Marketing-Getöse. Ein knallroter, blinkender Sale-Banner wirkt bei einer Steuerkanzlei oder einem Handwerksbetrieb schnell unseriös. Was hier gut funktioniert: ruhige Grundtöne, viel Weißraum, klare Typografie — und wenige, gezielt gesetzte Signalfarben dort, wo gehandelt werden soll.

Was Button-Tests wirklich zeigen

Einer der meistzitierten Farbtests stammt aus dem Jahr 2011: Joshua Porter testete für die Software-Firma Performable, die 2011 von HubSpot übernommen wurde, einen roten gegen einen grünen „Get Started Now“-Button auf der Startseite und beschrieb das Ergebnis im HubSpot-Blog. Der rote Button schnitt rund 21 % besser ab.

Die wichtigere Lektion steht aber dahinter: Rot hat nicht gewonnen, weil Rot magisch ist. Der rote Button war das einzige rote Element auf der Seite — er stach heraus. Genau das beschreibt der Von-Restorff-Effekt aus der Psychologie: Was sich von seiner Umgebung abhebt, wird eher bemerkt und erinnert.

Und: Ein einzelner Test auf einer einzelnen Seite aus dem Jahr 2011 sagt wenig darüber, was auf deiner Website passiert. Er ist ein Hinweis, kein Naturgesetz.

Für dein Design heißt das: Ein Button in derselben Farbe wie dein Markendesign geht unter. Ein Button in einer Kontrastfarbe, die sonst kaum vorkommt, lenkt den Blick. Das ist kein Feinschliff, sondern visuelle Hierarchie.

Kontrast und Barrierefreiheit: Farbe ist nicht alles

Wer über Farben und Conversions spricht, muss auch über Lesbarkeit sprechen. Laut der US-Gesundheitsdatenbank MedlinePlus hat etwa jeder zwölfte Mann nordeuropäischer Herkunft eine Rot-Grün-Sehschwäche, bei Frauen etwa jede zweihundertste. Für diese Menschen können ein roter und ein grüner Button schwer zu unterscheiden sein.

• Nicht nur Farbe: Wichtige Informationen dürfen nie allein über Farbe vermittelt werden. Ein Pflichtfeld braucht zusätzlich einen Hinweis im Text, ein Fehler eine verständliche Meldung.
• Kontrast prüfen: Für normalen Text verlangen die WCAG in Stufe AA ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift und die Umrisse von Bedienelementen 3:1. Das gilt auch für die Schrift auf deinem Button.
• Testen: Kontrast-Checker wie der von WebAIM und die Simulation von Sehschwächen in den Chrome-Entwicklertools zeigen dir schnell, ob deine Farben für alle funktionieren.

Wann Barrierefreiheit sogar gesetzlich vorgeschrieben ist, liest du in unserem Artikel über barrierefreie Websites und das BFSG.

Praxis-Guide: So wählst du deine Conversion-Farben

1. Primärfarbe aus der Marke ableiten: Deine Hauptfarbe sollte zu deiner Markenpersönlichkeit und deiner Branche passen — nicht zum aktuellen Trend.
2. Eine Aktionsfarbe festlegen: Wähl für Buttons eine Kontrastfarbe, die sonst auf deiner Website kaum vorkommt. Nutze sie konsequent nur für Handlungen. Dann lernen Besucher schnell: Diese Farbe bedeutet „Hier geht’s weiter“.
3. Farbanteile begrenzen: Eine verbreitete Faustregel aus dem Design ist 60-30-10: etwa 60 % Grundfarbe, 30 % Sekundärfarbe, 10 % Akzentfarbe. Keine Wissenschaft, aber ein guter Schutz vor Farbchaos.
4. Kontrast und Lesbarkeit prüfen: Erst wenn alle Texte und Buttons die Kontrastanforderungen erfüllen, ist die Palette fertig.
5. Testen statt raten: A/B-Tests mit Farbvarianten zeigen, was bei deiner Zielgruppe funktioniert. Bei wenig Traffic dauert es allerdings lange, bis ein Ergebnis belastbar ist. Dann bringt es oft mehr, zuerst Angebot, Überschrift und Vertrauenssignale zu verbessern.

Farbpsychologie ist kein Voodoo, aber auch kein Zauberknopf. Die Farbe deines Buttons kann einen Unterschied machen, wenn sie für Kontrast und Orientierung sorgt. Ob jemand anfragt, entscheiden am Ende vor allem dein Angebot, deine Texte und das Vertrauen, das deine Seite aufbaut. Die Farbe sorgt dafür, dass der wichtigste Schritt nicht übersehen wird.

Wenn du deine Website-Farben und Buttons einmal mit frischem Blick prüfen lassen willst, sprich uns im kostenlosen Erstgespräch an.