top of page

Welche Farbe für meine Buttons?

Habt ihr euch schon einmal Gedanken über die Farben eines Buttons gemacht? Hierbei gibt es nämlich mehr zu beachten, als man denkt:


Button-Farbe muss zum Design und der Marke passen

Die sicherste Variante wäre es bei euren Markenfarben zu bleiben. Sind diese aber zu wenig auffällig (zum Beispiel Pastellfarben), empfehle ich euch mit der Helligkeit oder der Sättigung etwas zu spielen, damit ihr eine passende Alternative habt. Vielleicht gibt es auch eine passende Farbe, die gut zu euren Fotos oder Websitefarben passt und die man für die Buttons verwenden könnte.



Beispiel eines zu hellen Buttons im Vergleich zu einem kontrastreichen Button
Der obere Knopf ist viel zu hell, er verschmilzt fast mit dem Hintergrund. Der untere fällt direkt durch sein Grün auf.


Button-Farbe muss herausstechen

Da kommen wir schon zum Punkt «herausstechen». Was heisst das? Der Button darf auffallen. Man soll ihn sofort beachten, denn er sollte schlussendlich den Besucher animieren etwas zu kaufen oder euch zu kontaktieren - auch Call-to-Action genannt.


Verschmilzt die Farbe mit der Umgebung, übersehen ihn eure Besucher. Ist er aber zu grell, schrecken sie zurück.


Wählt eine Farbe, die ins Auge sticht, auch wenn Ihr viel Text auf der Website habt. Aber bitte nicht übertreiben 😉



Auffälliger grüner Button mit "Klick mich" Aufschrift



Denkt an Menschen mit Sehschwächen oder Farbenblindheit

Die Farben sollten gute Kontraste zueinander bilden, damit jeder sie erkennen und lesen kann. Hier können wir auf zwei gute Tools zurückgreifen:


Den Kontrast-Checker von WebAIM

Hier gibt ihr die Hintergrundfarbe des Untergrunds an und die zweite Farbe, die darüber liegt (z.B. Textfarbe) danach sagt euch das Tool sofort, ob diese Farben für alle lesbar/erkennbar sind. Empfohlen wird einen Web Content Accessibility Guidelines (WCAG) Wert von mindestens der Stufe AA zu erreichen. Die Stufe AAA wäre aber ideal.



Den ColorFilter von Toptal

Hiermit könnt ihr eure Website aus der Sicht mit verschiedenen Farbschwächen betrachten. So könnt ihr sicher gehen, dass alle Inhalte auch erkennbar sind und nicht mit dem Hintergrund verschmelzen:

Aber welche Farbe soll ich denn jetzt wählen?

In der Theorie werden Rot- und Grüntöne als die Gewinner betitelt, neben den ebenfalls geeigneten Farben Blau und Orange.

Wohingegen von Schwarz, grau und braun abgeraten wird.


Doch das muss nicht bedeuten, dass ihr eure schwarzen Buttons jetzt alle in ein grelles Grün umwandeln müsst, denn es ist wie vieles nur Theorie. Ein kleines Beispiel: das bekannte Unternehmen Uber hat auf ihrer Website schwarze Buttons und offensichtlich funktioniert es.

Das heisst: wenn die Buttons genug auffallen und nicht untergehen, dann funktioniert auch Schwarz. Schlussendlich muss es zum Design und der Marke passen.

Beachtet aber das Gewohnheitsprinzip

Menschen sind sich gewohnt, dass Rot für Abbruch steht und Grün «Annehmen». Einen Bestätigen-Knopf rot zu färben ist also nur etwas für den ersten April 😉



Gewohnheitsprinzip Rot heisst Abbrechen, Grün Bestätigen
Bitte verwirrt eure Besucher nicht mit falschen Farben.

Comments


Benötigst du Hilfe bei deiner Wix Website?

Buche eine Support-Stunde bei mir!

bottom of page