Die 6 Farben auf einen Blick
Blau
Wirkt kompetent und verlässlich.
Rot
Zieht den Blick, signalisiert aber auch Warnung.
Schwarz und Dunkelgrau
Wirken sachlich und wertig.
Grün
Steht für Ruhe und Natur.
Orange und Gelb
Wirken freundlich und lenken den Blick.
Violett
Wirkt kreativ, passt aber selten zu sachlichen Angeboten.
Farbe gehört zu den Signalen, die der 3-Sekunden-Richter in den ersten Sekunden auswertet. Bei Websites kleiner Unternehmen trägt sie damit einen Teil des Vertrauens, den bei Konzernen der Markenname übernimmt.
Diese Zuordnungen sind Tendenzen, keine Naturgesetze. Die Forscher Lauren Labrecque und George Milne zeigten 2012 im Journal of the Academy of Marketing Science, dass Rot als aufregend wahrgenommen wird und Blau als kompetent. Die Studie untersuchte außerdem, wie Farbton, Sättigung und Helligkeit die Wahrnehmung einer Marke und die Kaufabsicht beeinflussen.
Dazu kommen unzählige Nuancen. Ein gedecktes Rot wirkt anders als ein leuchtendes, ein dunkles Marineblau anders als ein helles Türkisblau. Die sechs Farbfamilien sind deshalb ein grober Überblick und keine Farbtabelle zum Abschreiben. Hinzu kommt der Kontrast der gewählten Farben, der über die Lesbarkeit und damit über die Barrierearmut deiner Website entscheidet. Dazu gibt es weiter unten einen eigenen Abschnitt.
Die 6 Farben im Detail
Blau: Kompetenz und Verlässlichkeit
Blau ist die naheliegende Wahl für Vertrauen, weil Besucher es mit Kompetenz verbinden. Labrecque und Milne ordnen Blau genau dieser Eigenschaft zu. Das passt zu Steuerkanzleien, Ingenieurbüros, IT-Dienstleistern und allen Betrieben, die Genauigkeit verkaufen. Die Grenze liegt bei der Austauschbarkeit: Eine Website aus Blau und Weiß unterscheidet sich optisch kaum von der nächsten. Auch der Ton zählt, ein tiefes Marineblau wirkt gesetzter als ein helles Himmelblau.
Rot: Energie und Warnung
Rot zieht den Blick sofort, trägt aber zwei Botschaften zugleich: Energie und Gefahr. Die Bedeutung von Rot in der Psychologie reicht von Leidenschaft bis Alarm. Labrecque und Milne ordnen Rot der Eigenschaft aufregend zu, im Alltag begegnet es dir außerdem als Stoppschild, Fehlermeldung und Warnleuchte. Rot eignet sich deshalb für kleine, gezielte Akzente wie einen Button oder ein Angebotsetikett. Als große Fläche oder in langen Textpassagen wirkt es laut und drängend.
Schwarz und Dunkelgrau: Sachlichkeit und Wertigkeit
Schwarz und Dunkelgrau signalisieren Sachlichkeit und Wertigkeit. Das passt zu Handwerk mit Anspruch, Architektur, Fotografie und Premium-Angeboten. Als Schriftfarbe auf hellem Grund erreicht Dunkelgrau (#333333) ein Kontrastverhältnis von über 12:1, gefordert sind 4,5:1. Es wirkt dabei weicher als reines Schwarz. Als große Fläche kann Schwarz schwer und distanziert wirken, deshalb braucht es helle Flächen und Bilder als Gegengewicht.
Grün: Ruhe und Natur
Grün steht für Ruhe, Natur und Wachstum und passt dort, wo dieses Signal zum Angebot gehört. Für Gartenbau, Landschaftspflege, Bio-Produkte und Energieberatung stützt Grün die Erwartung des Besuchers. Bei einer Kfz-Werkstatt oder einer Anwaltskanzlei irritiert dieselbe Farbe, weil sie nicht zur Branche passt. Die Frage lautet daher nicht, ob Grün gut wirkt, sondern ob die Wirkung zu dem passt, was du verkaufst.
Orange und Gelb: Freundlichkeit und Aufmerksamkeit
Orange und Gelb wirken freundlich und lenken den Blick, ermüden aber als Hauptfarbe. Als Akzent auf dunklem oder neutralem Grund heben sich beide stark ab, damit eignen sie sich für Buttons und Hervorhebungen. Bei Gelb kommt ein Lesbarkeitsproblem dazu: Reines Gelb auf weißem Grund erreicht ein Kontrastverhältnis von rund 1,1:1, gefordert sind 4,5:1. Gelber Text auf hellem Hintergrund scheidet damit aus.
Violett: Kreativität mit Risiko
Violett wirkt kreativ und ungewöhnlich und passt zu Zielgruppen, die genau das suchen. Das sind etwa Designstudios, Eventagenturen oder Kreativ-Workshops. Für Betriebe, die Zuverlässigkeit und Ergebnisse verkaufen, fehlt dem Violett der Bezug zum Angebot. Es kann dort verspielt oder unscharf wirken, obwohl die Arbeit dahinter präzise ist.
Keine Farbe schafft Vertrauen allein. Vertrauen entsteht, wenn Farbe, Branche und Erwartung des Besuchers zusammenpassen.
Was Besucher wirklich abschreckt
Abschreckend wirkt selten eine einzelne Farbe. Vier Fehler kosten mehr Vertrauen als jede Farbwahl:
- Zu viele Farben. Mehr als drei Hauptfarben lassen eine Seite unruhig wirken, der Blick findet keinen Ankerpunkt.
- Zu wenig Kontrast. Hellgraue Schrift auf einem unruhigen Foto oder heller Text auf hellem Grund machen Inhalte schwer lesbar. Mehr dazu im Abschnitt zum Kontrast.
- Falsche Branchensignale. Die Farbe sendet eine Botschaft, die dein Angebot nicht deckt, etwa ein verspieltes Violett bei einem Ingenieurbüro.
- Rot und Grün als einziger Unterschied. Rund 8 Prozent der Männer und 0,4 Prozent der Frauen haben eine Rot-Grün-Sehschwäche. Zwei Felder, die sich nur durch Rot und Grün unterscheiden, sind für sie kaum zu trennen. Ergänze deshalb immer ein Symbol oder einen Text.
Kontrast: Die Farbwahl ist erst die halbe Arbeit
Die beste Farbe nützt nichts, wenn der Text darauf nicht lesbar ist. Der Kontrast zwischen Schrift und Hintergrund entscheidet, ob Besucher Inhalte überhaupt aufnehmen. Er ist außerdem die Grundlage einer barrierearmen Website. Zwei Beispiele zeigen das Problem:
- Hellgraue Überschrift auf einem unruhigen Foto. Die Buchstaben gehen in den Helligkeitsunterschieden des Bildes unter, Schrift und Hintergrund lassen sich kaum trennen. Abhilfe schaffen eine dunkle Überlagerung hinter dem Text oder eine einfarbige Fläche, auf der die Schrift steht. Prüfe den Kontrast an der hellsten Stelle des Fotos, nicht an der dunkelsten.
- Helle Schrift auf hellem Hintergrund. Das sieht modern und zurückhaltend aus, kostet aber Lesbarkeit. Betroffen sind nicht nur Menschen mit Sehschwäche, sondern jeder, der die Seite am Smartphone bei Sonnenlicht liest.
Als Maßstab dienen die Web Content Accessibility Guidelines (WCAG 2.1, Stufe AA). Sie verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für großen Text ab 18 Punkt (14 Punkt fett) mindestens 3:1. Prüfen kannst du das kostenlos mit dem WebAIM Contrast Checker.
Was modern aussieht, kann den Weg über die Website erschweren. Eine Seite, die schwer lesbar ist, schickt Besucher weg, bevor die Wirkung der Farbe überhaupt greift.
Akzentfarben: Eine Farbe für den nächsten Schritt
Die Farbenlehre für Websites kommt mit drei Rollen aus: einer Grundfarbe für Flächen und Überschriften, einer Neutralfarbe für Hintergrund und Text und einer Akzentfarbe. Als Faustregel gilt ein Verhältnis von etwa 60 zu 30 zu 10 Prozent.
Die Akzentfarbe gehört dem nächsten Schritt. Button, Telefonnummer und Formular tragen sie, sonst taucht sie nirgends auf. So erkennt der Besucher in Sekunden, wo er klicken soll. Je stärker sich die Akzentfarbe von allem anderen abhebt, desto besser funktioniert das. Welche weiteren Kniffe am Button entscheiden, steht in Der perfekte Call-to-Action.
Dein Farb-Check
Wer die eigene Website jeden Tag sieht, nimmt die Farben nicht mehr wahr. Fünf Fragen zeigen dir den größten Hebel:
- Hat die Website höchstens drei Hauptfarben?
- Erreicht jeder Text ein Kontrastverhältnis von mindestens 4,5:1?
- Ist Text über Fotos auch an der hellsten Bildstelle gut lesbar?
- Passt die Grundfarbe zu dem, was Kunden von deiner Branche erwarten?
- Gibt es eine Farbe, die ausschließlich dem nächsten Schritt gehört?
Als zertifizierte Neuro Web Expertin berücksichtige ich diese Regeln bei jeder Farbentscheidung im Website-Aufbau.
Dein nächster Schritt
Es gibt zwei Wege, wie es für dich weitergeht. Eine schriftliche Einschätzung zum ersten Eindruck der eigenen Website als PDF, oder ein persönliches Gespräch.
📄 3-Sekunden-Urteil anfordernPDF innerhalb von 48 Stunden, kein Gespräch nötig 📅 Erstgespräch vereinbaren25 Minuten, die sich lohnenWeiterlesen
Übersicht
Website für kleine Unternehmen
Alle Bausteine für eine Website, die Anfragen bringt, im Zusammenhang.
Grundlagen
Was der 3-Sekunden-Richter wirklich ist
Was in den ersten Sekunden im Kopf deiner Besucher entschieden wird.
Grundlagen
Die 3 Fragen, die jeder Website-Besucher unbewusst stellt
Welche Fragen dein Besucher klärt, bevor er weiterliest.
Ursachen
6 Gründe, warum deine Website keine Anfragen bringt
Woran es liegt, wenn Besucher kommen und trotzdem keiner anfragt.
Gestaltung
Der perfekte Call-to-Action
Sechs Kniffe, die aus einem Button einen Klick machen.
