Oktober 8

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

Oktober 8, 2020


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:

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.

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.

Claudia Barfuss - Website-Mentorin

Über mich

Ich helfe dir, wenn du eine Website willst, die du begeistert zeigst, weil sie DICH zeigt.Gemeinsam erarbeiten wir ein klares Konzept für deine Website und ich unterstütze dich dabei, deine Website ganz entspannt umzusetzen.

Claudia Barfuss

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht publiziert. Pflichtfelder sind mit einem * markiert.

  1. Liebe Claudia,
    toller Artikel. Danke für deine Tipps. Ich spiele auch gern mit meinen CI-Farben. Das ist ein kräftiges Orange und ein sehr dunkles Blau. Ich habe in meinem Blog große, schwarze Schrift auf weißem Hintergrund. Da meine Zielgruppe Menschen 60+ sind, ist das für sie so am besten lesbar.
    Ich finde es immer furchtbar, wenn die Artikel in Blogs mit grauer Schrift geschrieben sind. Und wenn dann noch die Schrift sehr klein ist, bin ich gleich weg. Deine Schrift kann ich super lesen.
    Liebe Grüße aus Berlin
    Roswitha

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Do NOT follow this link or you will be banned from the site!