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.

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.

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

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/

Ü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.

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.

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.

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:

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 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.

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.

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.