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