← Blog

Farbe Rot: Bedeutung, Wirkung und Einsatz in Marke und Website

Rot fällt auf, und genau das macht es schwierig. Was über seine Wirkung belegt ist, warum der berühmte Rot-Effekt wackelt und welche Rottöne auf der Website beim Kontrast durchfallen.

Die kurze Antwort: Rot steht für Liebe und Energie, aber genauso für Gefahr und Verbot. Es ist die Signalfarbe schlechthin. Darin liegen seine Stärke und sein Haken: Rot zieht den Blick an, und eine Seite verträgt deshalb nur wenig davon. Wer Rot zur Markenfarbe macht, muss vorher klären, wo es noch als Warnung gebraucht wird.

Die Grundlagen, wie Farben in einer Marke zusammenspielen, stehen im Beitrag Farben im Branding. Dieser Beitrag bleibt bei Rot: seine Bedeutungen, was über seine Wirkung wirklich bekannt ist und was beim Einsatz auf einer Website schiefgehen kann.

Bedeutung

Was die Farbe Rot bedeutet

Rot kommt aus dem Körper, im Guten wie im Schlechten. Blut und Feuer stehen für Lebenskraft und Wärme, zugleich für Verletzung und Gefahr. Deshalb ist Rot die Farbe des Herzens und die des Stoppschilds.

Die deutsche Sprache hat Rot vor allem als Signal gespeichert. Wer rot sieht, wird wütend. Etwas ist wie ein rotes Tuch. Ein Unternehmen schreibt rote Zahlen. Und der rote Faden stammt von Goethe: In den „Wahlverwandtschaften“ von 1809 beschreibt er die Taue der britischen Marine, in die ein roter Faden eingesponnen war, an dem man sie als Eigentum der Krone erkannte. Auch dort ist Rot das, was man nicht übersieht.

Wirkung

Wie Rot wirkt und was davon belegt ist

Über Rot liest man viel Erstaunliches: Es mache hungrig, steigere den Puls, verkaufe besser. Für die meisten dieser Sätze findet sich keine belastbare Quelle. Drei Befunde lohnen den Blick. Zwei halten, der berühmteste nicht.

Rot wird mit Aufregung verbunden. Lauren Labrecque und George Milne haben 2012 im Journal of the Academy of Marketing Science untersucht, welche Eigenschaften Menschen Marken je nach Farbe zuschreiben. Schon der Titel nennt das Ergebnis für Rot: „exciting“, aufregend.

Rot bindet den Blick, aber nicht immer. Miroslaw Kuniecki, Joanna Pilarczyk und Szymon Wichary haben 2015 in Frontiers in Human Neuroscience gemessen, ob rote Bildelemente die Aufmerksamkeit auf sich ziehen. Das taten sie, allerdings nur bei emotional gefärbten Bildern, ob positiv oder negativ. Bei neutralen Motiven fanden sie den Effekt nicht. Dass Rot auf Ampeln und Stoppschildern so stark wirkt, dürfte vor allem daran liegen, dass wir es dort ständig als Warnung sehen.

Der „Rot-Effekt“ hält nicht. Andrew Elliot, Markus Maier und Kollegen berichteten 2007, dass Rot die Leistung in Tests senke, etwa beim Lösen von Anagrammen. Der Befund wurde oft zitiert. Spätere Versuche, ihn zu wiederholen, scheiterten aber mehrfach, und eine Metaanalyse von 2020 in Psychonomic Bulletin & Review fand nach Korrektur für Publikationsverzerrung keinen belastbaren Effekt auf die Denkleistung mehr. Wenn dir also jemand erzählt, ein rotes Formular senke die Konzentration deiner Kunden, ist das keine gesicherte Erkenntnis.

Beliebt ist Rot übrigens auch: In einer YouGov-Umfrage von 2015 kam es in Deutschland hinter Blau auf Platz zwei der Lieblingsfarben.

Marke

Rot als Markenfarbe

Rote Marken gibt es in jeder Branche, besonders sichtbar bei Getränken, Fast Food, Handel und Medien. Die Sparkassen und die Deutsche Bahn setzen auf Rot, und Coca-Cola ist ohne sein Rot kaum vorstellbar. Rot sagt: Wir sind da, schau her.

Der Preis dafür: Rot ist schwer zu dosieren. Eine Fläche in kräftigem Rot dominiert jede Seite, auf der sie steht, und wird auf Dauer anstrengend. Auf Websites lösen viele rote Marken das, indem sie Rot als Akzent auf viel Weiß oder Schwarz setzen.

Dabei ist „Rot“ allein noch keine Farbentscheidung. Ein ins Orange kippendes Rot wirkt sportlich und warm, ein tiefes Weinrot schwer und edel, ein Rot mit Blaustich rückt Richtung Magenta. Fest wird die Farbe erst als genauer Wert im Styleguide.

Website

Rot auf der Website: Fehler, Knöpfe und Kontrast

Im Web hat Rot eine feste Rolle: Hier stimmt etwas nicht. Fehlermeldungen und Pflichtfelder sind fast überall rot. Für eine rote Marke wird das zum Konflikt. Ist dein Kontakt-Knopf rot, kann er neben einer roten Fehlermeldung leicht wie ein Teil davon wirken. Ist alles rot, kann nichts mehr warnen. Deshalb gehört früh festgelegt, wie Fehler aussehen: etwa ein dunkleres, klar abgesetztes Rot zusammen mit einem Symbol.

Das zweite Problem heißt Rot-Grün-Schwäche. Bis zu acht Prozent der Männer und etwa 0,5 Prozent der Frauen europäischer Herkunft sehen Rot und Grün schlechter auseinander. Wenn ein Formular Fehler nur rot und Erfolg nur grün markiert, können diese Menschen genau die Information übersehen, auf die es ankommt. Die Barrierefreiheits-Richtlinien WCAG verlangen deshalb im Erfolgskriterium 1.4.1, dass Farbe nie das einzige Merkmal ist. Ein Fehler braucht zusätzlich einen Text oder ein Symbol.

Und dann der Kontrast. Für normalen Text verlangt WCAG mindestens 4,5 : 1, für große Schrift (ab 24 Pixel, fett ab etwa 18,7 Pixel) 3 : 1. Viele gängige Rottöne liegen nah an dieser Grenze. Nach der WCAG-Formel nachgerechnet, jeweils als Textfarbe auf Weiß:

  • Dunkles Weinrot (#7F1D1D): 10,0 : 1, problemlos
  • Tiefes Rot (#B91C1C): 6,5 : 1, gut für Text und Fehlermeldungen
  • Kräftiges Rot (#DC2626): 4,8 : 1, reicht knapp
  • Reines Rot (#FF0000): 4,0 : 1, nur für große Schrift
  • Helleres Rot (#EF4444): 3,8 : 1, für normalen Text zu schwach

Das hellere Rot ist die eigentliche Falle. #EF4444 ist in Tailwind CSS 2 und 3 der Standard-Rotton „red-500“ und landet deshalb leicht ungeprüft im Fehlertext, ausgerechnet dort, wo er gelesen werden muss. Dieselben Werte gelten umgekehrt für weiße Schrift auf rotem Knopf: Auf #EF4444 fällt sie durch, auf #DC2626 besteht sie. Wie du eine Seite insgesamt prüfst, steht in Website barrierefrei machen. Wenn ich eine Website gestalte, rechne ich das bei der Farbwahl, bevor der erste Entwurf steht.

Grenzen

Wann Rot die falsche Wahl ist

Wo Menschen Ruhe brauchen, ist Rot schwierig, etwa bei Arztpraxis oder Therapie. Dort liest sich die Signalfarbe schnell als Alarm.

Und Rot verliert seine Kraft, wenn es überall steht. Eine Seite mit roten Überschriften und roten Knöpfen hat keinen Blickfang mehr, nur noch Lautstärke. Rot wirkt am stärksten, wo es selten ist.

Fazit

Rot ist ein Signal, keine Tapete

Als Akzent stark, als Fläche anstrengend, für Fehler schon vergeben. Belegt sind vor allem zwei Dinge: Rot wird mit Aufregung verbunden, und es zieht den Blick an, wenn die Lage emotional ist. Dass wir es als Warnung lesen, liegt nahe, weil wir es überall so sehen. Wenn du Rot einsetzt, dann gezielt, mit geprüftem Kontrast und nie als einziges Merkmal für eine wichtige Information.

Häufige Fragen

Was bedeutet die Farbe Rot?

Die Bedeutungen kommen von Blut und Feuer: Lebenskraft und Liebe auf der einen Seite, Verletzung und Gefahr auf der anderen. Im Alltag begegnet Rot vor allem als Warnung, auf Stoppschild und Ampel oder in den roten Zahlen.

Stimmt es, dass Rot die Leistung senkt?

Die Studie von Elliot, Maier und Kollegen von 2007 sah das so. Spätere Versuche konnten es nicht bestätigen, und eine Metaanalyse von 2020 fand nach Korrektur für Publikationsverzerrung keinen belastbaren Effekt mehr.

Welches Rot ist auf Websites gut lesbar?

Für normalen Text auf Weiß verlangt WCAG mindestens 4,5 : 1. Das schaffen #B91C1C (6,5 : 1) und #DC2626 (4,8 : 1), nicht aber #FF0000 (4,0 : 1) und #EF4444 (3,8 : 1).

Pappelbaum Design

Design direkt vom Designer.

Web, Print oder Marke: ein Ansprechpartner, der alles selbst macht. Eine halbe Stunde reicht, um zu klären, was dein Projekt braucht. Das Gespräch kostet nichts.

Auch interessant

Farbe Grün: Bedeutung, Wirkung und Einsatz in Marke und Website

Farbe Gelb: Bedeutung, Wirkung und Einsatz in Marke und Website

Farbe Blau: Bedeutung, Wirkung und Einsatz in Marke und Website

Mehr aus dem Blog

Lieber sofort? Dann so.