Farbkontraste und Farbfamilien für höhere Klickraten

Farbkontraste und Farbfamilien für höhere Klickraten – Farb-Design bei WordPress ist wichtig, um User zu animieren und zu halten. Dabei sorgen Farbkontraste für höhere Klickraten und Farbfamilien für mehr Harmonie. Die Entscheidung kann z.B. bei der Erstellung einer Facebook Likebox kontrovers diskutiert werden. Allerdings sorgen im übrigen klare Kontraste durch negative Farben immer noch für mehr Harmonie als farbliche Missklänge bei zu unterschiedlichen Hexadezimal-Codes.

Farbkontraste und Farbfamilien für höhere Klickraten – Farbkontraste

Der bekannteste Farbkontrast ist schwarz und weiß. Schwarz ist genau die negative Farbe von weiß. Zu allen anderen Farben kann man auch negative bzw. reverse Farben erstellen. Dadurch erreicht man eine bessere Lesbarkeit und höhere Klickraten, wenn es um Banner oder beispielsweise eine Facebook Likebox geht. Kontraste unterstützen auch Seriosität, denn sie transportieren unterbewusst Ehrlichkeit, also ein Schwarz-Weiß-Denken. Nicht zuletzt diese Art von Ehrlichkeit erhöht den Erfolg potenziell. Mit dem folgenden Tool kann man Reverse Farben erstellen:

Farbkontraste und Farbfamilien für höhere Klickraten...

Farbkontraste und Farbfamilien für höhere Klickraten...

Farbkontraste und Farbfamilien für höhere Klickraten – Farbfamilien

Eine Farbfamilie hat man, wenn Farben nahe beieinander liegen bzw. verwandt zu einem bestimmten Farbbereich sind. Das folgende Bild von Vincent van Gogh (Olivenhain) zeigt uns die Farbfamilie Grüntöne und gleichzeitig eine geschickte Entwicklung des Kontrastes Gelb:

Vincent von Gogh: Olivenhain

Vincent von Gogh: Olivenhain

Farbkontraste und Farbfamilien für höhere Klickraten – Entwicklung einer eigenen Farbpalette

Aus den 16 VGA Grundfarben kann man durch Veränderung des Hexadezimal-Codes leicht neue Farbpaletten von Farben schaffen, die zueinander passen und trotzdem kontrastreich sind. Dazu verändert man bei den Farben, die man nutzen will einfach z.B. die letzten beiden Ziffern auf die gleiche Weise. Das Resultat ist eine stimmige neue Farbpalette, die man für die verschiedenen Elemente einer Website nutzen kann, damit diese harmonisch wirkt.

16 VGA Farben

16 VGA Farben


Die Farben der linken Spalte weisen im Hexadezimal-Code nur die Ziffern 8 und 0 auf. Das richtige Grau zu dieser Hexadezimalfamilie wäre 808080, wie wir oben rechts sehen. All diese Farben sind recht dunkel durch den Schwarzanteil der 0 und passen deshalb harmonisch zueinander.

In der rechten Spalte wurde hauptsächlich mit 0 und F kombiniert. Auch hier haben wir wieder den Effekt, dass die Farben harmonieren. Wenn man die Hexadezimal-Codes aus der rechten Spalte nun nimmt und um die zwei letzten Ziffern verändert z.B: ff0055, 00ff55, ffff55, 000055 usw. entstehen daraus die folgenden Farben, die wieder zueinanderpassen.

Tausch der letzten zwei Ziffern

Tausch der letzten zwei Ziffern


Auf diese Art und Weise läuft man nicht Gefahr, dass Farben auf der Website nicht zueinander passen. Glücklicherweise sind schwarz und weiß immer Kontrastfarben, die immer passen. Manchmal ist ein klares schwarz auch zu krass, daher nimmt man oft ein sehr dunkles grau. Das wirkt oft professioneller.
Was sind Deine Erfahrungen mit Farbkontrasten und Farbfamilien auf Deiner Website? Schreibe einen Kommentar…

2 Gedanken zu „Farbkontraste und Farbfamilien für höhere Klickraten

  1. Nic

    Sorry wenn ich läster: aber wenn man über Lesbarkeit schreibt und selbst weiss auf schwarz darstellt…
    Wie war das mit den Steinen und dem Glashaus?
    Dieses Blog hier ist nur schwer lesbar – einzig die Inhalte bringen mich immer wieder her.

    Antworten
    1. Chris

      Hallo Nic,
      erstmal vielen Dank für das indirekte Lob ;-) .

      Ursprünglich ist das schwarz deshalb entstanden, weil ich, wenn ich auf dem Balkon arbeite, besser mit schwarzem Hintergrund lesen kann, weniger schnell Kopfschmerzen bekomme. Mittlerweile ist es schon ein Wiederkennungseffekt. Trotzdem kenn ich natürlich alle Argumente, die für eine helle Seite sprechen und experimentiere schon kräftig im Hintergrund.

      Welche Farbkombination findest Du denn am besten?
      bg Chris :-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>