Farben auf der Website: warum drei genügen und Kontrast zählt

Ihre Website sieht unruhig aus, und Sie können nicht genau sagen, woran es liegt. Meist liegt es an den Farben: Das Logo bringt zwei mit, der Baukasten eine dritte, irgendwann kam ein Rot für das Angebot dazu und ein Blau für die Links. Jede Entscheidung war für sich vernünftig. Zusammen ergeben sie eine Seite, auf der nichts mehr hervorsticht.

Die gute Nachricht: Für eine Website eines kleinen Betriebs reichen drei Farben. Wer sie einmal festlegt und dabei den Kontrast prüft, hat eine Seite, die ruhiger wirkt, auf dem Handy lesbar ist und den Besucher zur Anfrage führt. Dafür braucht es keinen Designer, sondern eine klare Regel und eine halbe Stunde Zeit.

Stand: Oktober 2026

Das Wichtigste in Kürze

• Für die meisten Betriebsseiten genügen drei Farben: eine Grundfarbe, eine Textfarbe und eine Akzentfarbe für Knöpfe und Links.

• Die Akzentfarbe ist nur für das reserviert, was der Besucher anklicken soll, sonst verliert sie ihre Wirkung.

• Wichtiger als Geschmack ist der Kontrast: Normaler Text braucht nach den Richtlinien für barrierefreie Webinhalte mindestens ein Verhältnis von 4,5 zu 1 zum Hintergrund.

• Hellgrauer Text auf Weiß ist der häufigste Fehler, er sieht am großen Bildschirm elegant aus und ist draußen auf dem Handy kaum zu lesen.

• Die Farben aus dem Logo sind ein guter Ausgangspunkt, müssen aber nicht unverändert für Schrift und Flächen taugen.

• Halten Sie die festgelegten Werte als Farbcodes schriftlich fest, damit Flyer, Fahrzeug und Website zusammenpassen.

Warum zu viele Farben die Seite unruhig machen

Farbe ist auf einer Website ein Signal. Sie sagt dem Auge: Hier ist etwas wichtig. Wenn fünf Dinge auf einer Seite in fünf verschiedenen Farben leuchten, ist alles gleich wichtig, also nichts. Der Besucher sucht dann, statt zu lesen, und wer auf dem Handy suchen muss, ist schnell wieder weg.

Dazu kommt ein praktisches Problem. Jede weitere Farbe muss mit allen anderen zusammenpassen und auf jedem Hintergrund lesbar sein. Bei drei Farben sind das wenige Kombinationen, die man einmal prüft. Bei sieben Farben prüft das niemand mehr, und genau dort entstehen die Stellen, an denen Text im Hintergrund verschwindet.

Welche drei Farben Sie wirklich brauchen

Die drei Farben haben jeweils eine feste Aufgabe. Wenn Sie die Aufgaben trennen, ergibt sich der Rest fast von selbst.

Die Aufteilung 60, 30, 10 ist eine alte Faustregel aus der Gestaltung, kein Gesetz. Sie hilft aber bei der wichtigsten Entscheidung: Die Akzentfarbe ist selten. Gerade weil sie nur an wenigen Stellen auftaucht, findet das Auge den Knopf „Termin anfragen“ sofort.

Weiß oder ein sehr helles Grau als Grundfarbe ist kein Verlegenheitsentscheid, sondern meist die beste Wahl. Ein fast schwarzes Grau als Textfarbe liest sich ruhiger als reines Schwarz und hat trotzdem reichlich Kontrast.

Praxistipp: Abstufungen zählen nicht als neue Farbe. Ein hellerer Ton Ihrer Akzentfarbe für Hintergrundkästen ist erlaubt, solange er sichtbar zur Familie gehört.

Wie Sie die Akzentfarbe aus dem Logo ableiten

Die meisten Betriebe haben bereits ein Logo, und darin steckt meist die Akzentfarbe. Das ist sinnvoll, weil Kunden die Farbe vom Fahrzeug, vom Briefkopf oder vom Schild an der Tür kennen. Die Website sollte nicht anders aussehen als der Betrieb.

Nicht jede Logofarbe taugt aber für Schrift oder Knöpfe. Ein helles Gelb wirkt im Logo auf dunklem Grund kräftig, als Linkfarbe auf weißem Hintergrund ist es praktisch unsichtbar. In solchen Fällen nimmt man für Knöpfe und Links einen dunkleren Ton derselben Farbe oder setzt die Logofarbe als Fläche ein und schreibt in Dunkel darauf.

• Fragen Sie beim Gestalter des Logos nach den genauen Farbcodes, meist als HEX-Wert wie #1F5F63 oder als CMYK für den Druck.

• Hat das Logo zwei Farben, wird die kräftigere zur Akzentfarbe, die ruhigere kann als Textfarbe oder als Fläche dienen.

• Gibt es kein Logo mit Farbe, wählen Sie eine Akzentfarbe, die in Ihrer Branche und in Ihrer Stadt nicht ohnehin jeder Mitbewerber nutzt.

Warum Kontrast wichtiger ist als Geschmack

Über Farben lässt sich streiten, über Kontrast nicht. Die Richtlinien für barrierefreie Webinhalte, kurz WCAG, verlangen für normalen Fließtext ein Kontrastverhältnis von mindestens 4,5 zu 1 zwischen Schrift und Hintergrund. Für große Schrift und für Bedienelemente wie Knopfränder gilt mindestens 3 zu 1. Schwarz auf Weiß erreicht 21 zu 1, den Höchstwert.

Das klingt technisch, hat aber eine einfache Folge: Ein mittleres Grau mit dem Farbcode #767676 auf Weiß liegt knapp über der Grenze von 4,5 zu 1. Alles, was heller ist, fällt für Fließtext durch. Genau dieses hellgraue Design sieht man auf vielen Betriebsseiten, weil es am Bildschirm im Büro elegant wirkt.

Ihre Kunden lesen aber nicht im Büro. Sie lesen auf dem Handy, in der Mittagspause draußen, mit gedimmtem Display oder ohne Lesebrille. Dort entscheidet der Kontrast, ob die Telefonnummer gelesen wird oder nicht.

Praxistipp: Prüfen Sie Ihre Textfarbe einmal mit einem kostenlosen Kontrastrechner. Sie geben zwei Farbcodes ein und sehen sofort, ob die Kombination die Grenze von 4,5 zu 1 erreicht.

Wo Farben auf Betriebsseiten typischerweise scheitern

Bei der Durchsicht von Websites begegnen uns immer wieder dieselben Stellen. Keine davon ist ein großer Umbau, aber jede kostet Lesbarkeit.

• Weiße Schrift auf einem Foto: Auf dem hellen Teil des Bildes verschwindet sie. Eine halbdurchsichtige dunkle Fläche hinter dem Text löst das.

• Knöpfe in der Grundfarbe: Ein weißer Knopf mit dünnem grauem Rand auf weißem Grund wird übersehen.

• Links ohne Unterstreichung, die sich nur durch die Farbe abheben: Wer Farben schlecht unterscheiden kann, findet sie nicht.

• Rot und Grün als einziger Unterschied, etwa bei „geöffnet“ und „geschlossen“: Ein Teil der Männer kann diese Farben schlecht auseinanderhalten. Ein Wort oder ein Symbol daneben hilft allen.

• Farbige Überschriften in der Akzentfarbe: Dann sieht jede Überschrift aus wie ein Link, und die Knöpfe verlieren ihren Vorrang.

Was Farben über Ihren Betrieb sagen und was nicht

Es gibt viele Tabellen, die Farben Bedeutungen zuordnen: Blau für Vertrauen, Grün für Natur, Rot für Dringlichkeit. Darauf sollten Sie sich nicht zu sehr verlassen. Wie eine Farbe wirkt, hängt stark vom Zusammenhang ab, und belastbare Belege dafür, dass eine bestimmte Farbe mehr Anfragen bringt, kennen wir nicht.

Verlässlicher ist eine andere Frage: Passt die Seite zu dem, was der Kunde vor Ort erlebt? Ein Bestatter mit grellem Orange irritiert, eine Kinderzahnarztpraxis in Anthrazit und Grau wirkt kühl. Wenn Farbe, Fotos und Ton zusammenpassen, entsteht Vertrauen. Wenn eines davon herausfällt, merkt der Besucher es, auch wenn er es nicht benennen kann.

Wie Sie die Farben einmal festlegen und dann dabei bleiben

Die meiste Unruhe entsteht nicht beim ersten Entwurf, sondern in den Jahren danach. Jemand legt eine neue Unterseite an und wählt im Baukasten eine Farbe, die ungefähr passt. Ein Jahr später gibt es drei verschiedene Grüntöne.

Abhilfe schafft ein einziges Blatt Papier oder eine Datei mit den festgelegten Werten. Das dauert etwa eine halbe Stunde und spart später viel Abstimmung.

1. Notieren Sie für jede der drei Farben den HEX-Wert für die Website und, falls vorhanden, den CMYK-Wert für den Druck.

2. Schreiben Sie daneben, wofür die Farbe benutzt wird und wofür nicht.

3. Hinterlegen Sie die Farben im Baukasten oder System als feste Vorgaben, sodass niemand sie neu mischen muss.

4. Geben Sie das Blatt jedem, der für Sie gestaltet: Druckerei, Fahrzeugbeschriftung, Social Media.

Wichtige Erkenntnisse

Was das in der Praxis heißt

Für die meisten Betriebe heißt das: Sie müssen Ihre Website nicht neu gestalten lassen, um die Farben in Ordnung zu bringen. Oft reicht es, die Textfarbe dunkler zu stellen, überzählige Farben zu streichen und die Akzentfarbe auf Knöpfe und Links zu beschränken. Das ist in vielen Baukästen eine Arbeit von ein bis zwei Stunden.

Was Sie nicht beeinflussen können: wie das Display Ihrer Kunden eingestellt ist, ob sie im Dunkelmodus lesen oder wie hell die Sonne auf den Bildschirm scheint. Genau deshalb ist ausreichender Kontrast keine Frage der Ästhetik, sondern eine Reserve für Bedingungen, die Sie nicht kennen. Und eine schöne Farbwahl allein bringt keine Anfrage, wenn Inhalt, Erreichbarkeit und Sichtbarkeit bei Google nicht stimmen.

Wenn Sie einen zweiten Blick auf Ihre Seite wollen

Manchmal sieht man die eigene Website zu oft, um ihre Schwächen noch zu bemerken. Im Erstgespräch schauen wir fünfzehn Minuten gemeinsam auf Ihre Seite, auf Farben, Lesbarkeit und den Weg zur Anfrage. Ein Verkaufsgespräch wird daraus nicht.

Wenn Sie die laufende Pflege abgeben wollen, übernehmen wir sie im Paket Sichtbar für 150 € im Monat netto. Dazu gehört auch, dass neue Inhalte zu den festgelegten Farben passen und die Seite über die Jahre nicht wieder bunt wird.

Nützliche Quellen

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2

• W3C: Erläuterung zum Mindestkontrast (Contrast Minimum)

• WebAIM: Kontrastrechner

• Bundesfachstelle Barrierefreiheit

Häufige Fragen

Wie viele Farben sollte eine Website haben?

Für die Seite eines kleinen Betriebs genügen drei: eine Grundfarbe für Flächen, eine Textfarbe und eine Akzentfarbe für Knöpfe und Links. Hellere oder dunklere Abstufungen dieser Farben zählen nicht als zusätzliche Farbe. Mehr ist möglich, macht die Seite aber schnell unruhig.

Muss die Website die Farben meines Logos haben?

Sie sollte zu Ihrem Logo passen, weil Kunden die Farben vom Schild oder Fahrzeug kennen. Die Logofarbe eignet sich meist als Akzentfarbe. Ist sie für Schrift zu hell, nimmt man für Text und Links einen dunkleren Ton derselben Farbe.

Was bedeutet Kontrastverhältnis 4,5 zu 1?

Das ist der Mindestabstand in der Helligkeit zwischen Schrift und Hintergrund, den die WCAG für normalen Fließtext verlangen. Schwarz auf Weiß hat 21 zu 1, ein mittleres Grau wie #767676 auf Weiß liegt knapp über 4,5 zu 1. Ob Ihre Farben reichen, zeigt ein kostenloser Kontrastrechner.

Ist grauer Text auf weißem Hintergrund ein Problem?

Nur wenn das Grau zu hell ist. Dunkles Grau liest sich sogar angenehmer als reines Schwarz. Hellgrau dagegen ist auf dem Handy im Freien oft kaum zu lesen und fällt bei der Kontrastprüfung durch.

Bin ich rechtlich verpflichtet, auf Kontrast zu achten?

Das hängt davon ab, ob Ihr Angebot unter das Barrierefreiheitsstärkungsgesetz fällt, was für viele kleine Dienstleister nicht zutrifft. Die genaue Abgrenzung finden Sie bei der Bundesfachstelle Barrierefreiheit. Das ersetzt keine Rechtsberatung. Unabhängig davon lohnt ausreichender Kontrast, weil er allen Besuchern hilft.

Welche Farbe sollte der Knopf für die Anfrage haben?

Die Akzentfarbe, und zwar nur er und wenige andere klickbare Elemente. Wichtig ist, dass er sich deutlich vom Hintergrund abhebt und die Schrift darauf gut lesbar ist. Eine bestimmte Farbe, die grundsätzlich mehr Klicks bringt, gibt es nach unserem Wissen nicht.

Was ist mit dem Dunkelmodus?

Manche Handys stellen Websites im Dunkelmodus automatisch anders dar, das hängt vom Browser ab. Für die meisten Betriebsseiten reicht es, wenn die Seite in der normalen Darstellung gut funktioniert. Eine eigene dunkle Variante ist eher etwas für größere Projekte.

Wo bekomme ich die genauen Farbcodes meines Logos?

Am einfachsten beim Gestalter oder der Druckerei, die das Logo erstellt hat. Dort liegen meist HEX-, RGB- und CMYK-Werte vor. Fehlen sie, lässt sich der Wert mit einer Pipette in einem Bildprogramm aus der Logodatei auslesen.

Darf ich auf einer Unterseite andere Farben verwenden?

Besser nicht. Besucher orientieren sich an Farben, und wenn ein Knopf auf einer Seite grün und auf der nächsten blau ist, müssen sie neu suchen. Einheitliche Farben auf allen Seiten machen die Website berechenbar.