So setzt du Farben auf der Website gezielt ein

So führst du mit Farben deine Besucher durch die Website

Während du auf einem gemütlichen Spaziergang bist, siehst du vor dir plötzlich eine Gruppe Golden Retriever und mittendrin ein schwarzer Labrador.

Wohin schaust du? Ich bin überzeugt auf den schwarzen Labrador. Denn er fällt auf.

Andere Farbe fällt auf

Ungewöhnliches und unerwartetes zieht immer unsere Aufmerksamkeit auf sich. Das kannst du für deine Website nutzen.

Auf was es dabei ankommt, zeige ich dir gleich, denn bevor wir starten solltest du 3-4 Farben ausgesucht haben. Wie du die passenden Farben findest, zeige ich dir im Artikel: „Die Macht der Farben

Ich wähle in der Regel nur 2-3 Farben, da ich sie sehr häufig aufhelle oder abdunkle.

Die Primärfarbe

Die Primärfarbe ist deine wichtigste Farbe, sie kommt üblicherweise auch im Logo vor. Oft ist es eine sehr intensive Farbe. Deshalb sollte sie nicht grossflächig genutzt werden. Sie ist ideal, um die Besucher zu führen.

Die Akzentfarbe

Wenn du eine intensive Primärfarbe hast, dann brauchst du nicht zwingend eine Akzentfarbe. Aber manchmal ist die Primärfarbe ein Pastellton. Dann ist die Akzentfarbe wichtig, um die Website-Besucher zu gewinnen.

Die Hintergrundfarbe

Wir beginnen mit der untersten „Ebene“, dem Hintergrund.

Es kann sein, dass du den kompletten Hintergrund einfärben willst oder auch nur einzelne Abschnitte auf deiner Website. Die Hintergrundfarbe sollte, abgesehen von ganz wenigen Ausnahmen, immer hell und sehr dezent gehalten werden.

Sie darf nicht vom Text ablenken.

Aus diesem Grund empfehle ich dir einen weissen oder sehr hellen Hintergrund zu wählen. Es ist sehr viel einfacher dunkle Schrift auf einem hellen Hintergrund zu lesen als umgekehrt.

Weiss auf Schwarz ist mühsam zu lesen
Schwarz auf Weiss ist gut zu lesen

Sehr oft wird für den Hintergrund eine stark aufgehellte Version der wichtigsten Farbe gewählt.

Aufgehellte Hintergrundfarbe

Das ist sehr stimmig und doch nicht so eintönig wie ein ganz weisser Hintergrund.

Ausnahme:
Ich habe vorher die Ausnahme angesprochen. Wenn du wichtige Inhalte stark hervorheben willst, kannst du den Text in eine Box mit farbigem Hintergrund setzen. Das sollte aber nur wenig Text sein, den man schnell gelesen hat.

Die Schriftfarbe

Hier musst du zwischen Überschriften und Fliesstext, also dem restlichen Text, unterscheiden.

Beiden gemeinsam ist, dass sie einen starken Kontrast zum Hintergrund bilden sollen. Sonst sind sie schlecht zu lesen und ermüden das Auge.

Für Menschen mit einer Sehbehinderung sind sie fast gar nicht mehr zu lesen.

Wie gut die Schrift auf deinem Hintergrund noch zu lesen ist, findest du mit diesem Tool heraus: https://webaim.org/resources/contrastchecker/

So setzt du Farben auf der Website gezielt ein

PIN IT

Überschriften

Überschriften sollen hervorstechen. Sie helfen dem Leser einen Überblick über den Text zu geben. Sie fangen das Auge ein und im besten Fall sind sie so spannend, dass der Text darunter auch gelesen wird.

Nimm dafür deine primäre Farbe. Bei mir ist das, dass dunkle Rot.

Primäre Farbe als Überschrift

Ich nutze für alle Überschriften die gleiche Farbe, so entsteht eine Einheit.

Fliesstext

Die Besucher sind blitzartig wieder weg, wenn der Text schlecht lesbar ist. Zum Beispiel hellgraue Schrift auf grauem Hintergrund. Ich weiss, hellgraue Schrift ist eleganter und mal etwas anderes. Aber das nützt dir nichts, wenn dafür der Text nicht gelesen wird.

Grau auf Schwarz ist schlecht zu lesen

Du siehst, wie schwierig das zu lesen ist.

Nutze eine Farbe mit gutem Kontrast. Ideal ist auf weissem oder leicht eingefärbtem Hintergrund ein sehr dunkles Grau. Nimm kein Schwarz, das ist sehr hart.

Hier einmal schwarz auf weiss – So richtig klassisch und ein dunkles Grau auf dezent gefärbtem Hintergrund.

Schwarz auf Weiss ist gut zu lesen
Dunkles grau auf dezent gefärbtem Hintergrund

Wichtige Elemente auf der Website hervorheben

Es gibt bestimmte Elemente auf deiner Website zu denen du die Besucher führen willst. Das können Button sein oder einfach Links zu deinen Angeboten.

Damit der Besucher sie sofort wahrnimmt, müssen sie hervorstechen. Das gelingt unter anderem, durch die Farbe. Denk an das Foto mit dem schwarzen Labrador.

Button

Ein Button zieht durch seine Form und Farbe die Aufmerksamkeit sehr stark auf sich. So kannst du die Besucher auf der Website führen. Wer darauf klickt, weiss, dass er auf eine neue Seite kommt oder zu einem bestimmten Abschnitt auf der Website springt.

Zum Beispiel kannst du den Button einsetzen, damit der Besucher von einer Vorschau zu deinen Angeboten gelangt.

Der Button muss eine Farbe erhalten, die sehr auffällig ist. Nutze dafür deine primäre Farbe, wenn sie sehr stark ist. Zum Beispiel hier:

So führst du mit Farben deine Besucher durch die Website 1

Wenn deine primäre Farbe allerdings eine weiche Pastellfarbe ist, dann benötigst du eine starke Akzentfarbe für alles was hervorgehoben werden soll.

Dekorelemente wie Rahmen oder Linien

Auf den meisten Websites kommen Linien vor, die zwei verschiedene Inhaltsblöcke voneinander trennen oder Rahmen um einen Inhaltsblock.

Auch bei Formularfeldern gibt es in der Regel einen Rahmen um die Eingabefelder.

Die Trennlinien

Sie dienen nur der optischen Trennung. Sie sollen die Lesbarkeit der Website erhöhen und zeigen was zusammengehört.

Dafür brauchen sie keine starke Farbe, die den Blick auf sich zieht. Sie können dezent gehalten werden. Zum Beispiel in einer abgeschwächten Farbe der Primärfarbe.

Die Trennlinie farbig hervorheben

Die Rahmen

Rahmen erfüllen eine sehr viel wichtigere Aufgabe. Sie können ebenfalls die Besucher zu einem wichtigen Inhalt (Text, Bild etc.) führen.

Oft werden die Angebote in Boxen dargestellt. Wenn das der Fall ist, kann der Rahmen in der primären Farbe gehalten werden.

Sonst kannst du wie bei den Trennlinien die abgeschwächte Primärfarbe oder auch nur einen Schlagschatten nutzen.

So führst du mit Farben deine Besucher durch die Website 2

Die Rahmen um die Eingabefelder eines Formulars

Die Rahmen helfen uns zu sehen, wo wir hineinschreiben können. Diese Rahmen werden oft in einem sehr hellen Ton gehalten.

Leider können Menschen mit einer Sehbehinderung diese Rahmen schlecht oder gar nicht sehen.

Es fehlt der Kontrast.

Deshalb solltest du auch hier eine kräftige Farbe, wie deine Schriftfarbe, für den Rahmen wählen.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Eine (!) starke Farbe sorgt dafür, dass die Websitebesucher gezielt durch die Website geführt werden. Sie sehen auf einen Blick was wichtig ist und wo sie klicken müssen.

Click to Tweet

Fazit: Wenn du Menschen auf deiner Website führen willst, musst du die Farben strategisch einsetzen.
Starke Farben ziehen die Aufmerksamkeit auf sich und helfen dir dabei. Nutze sie sparsam.

Hoi, ich bin Claudia Barfuss

Gemeinsam mit meinen Kundinnen baue ich eine Website mit der sie sich rundum wohlfühlen und neue Kunden anziehen. 

Wir bändigen die Technik und gestalten die Website so, dass sie online durchstarten können.

Mehr von mir findest du auf:

Claudia Barfuss mit Hund und Katzen

Kommentar hinterlassen:

2 Kommentare
Füge Deine Antwort hinzu
Do NOT follow this link or you will be banned from the site!