Call-to-Action-Buttons gestalten: Farbe, Text, Platzierung

Ein Call-to-Action-Button, kurz CTA, ist die Schaltfläche für den wichtigsten nächsten Schritt einer Seite: anfragen, bestellen, herunterladen, anmelden. Er funktioniert, wenn Besucher ihn sofort finden, verstehen, was er auslöst, und ihn ohne Mühe treffen. Dafür sind vier Dinge entscheidend: Kontrast, Text, Größe und Platzierung. Dieser Artikel geht sie einzeln durch und endet mit einer Checkliste. Weitere Gestaltungstipps sammelt die Übersicht Tipps für ansprechendes Webdesign.

Was ein guter CTA leisten muss

Ein Button muss drei Fragen beantworten, bevor jemand klickt: Ist das klickbar? Was passiert dann? Lohnt es sich? Die erste Frage beantwortet die Form, die zweite der Text, die dritte der Inhalt drumherum. Ein perfekt gestalteter Button nützt nichts, wenn die Seite den Nutzen vorher nicht erklärt hat. Umgekehrt verpufft die beste Argumentation, wenn der Button im Layout untergeht.

Farbe: Kontrast statt Wunderfarbe

Immer wieder kursieren Behauptungen, eine bestimmte Button-Farbe steigere die Klickrate um einen festen Prozentsatz. Solche Ergebnisse stammen aus einzelnen Tests auf einzelnen Seiten und lassen sich nicht übertragen. Was übertragbar ist, beschreibt der Von-Restorff-Effekt: Ein Element, das sich von seiner Umgebung abhebt, wird eher wahrgenommen und erinnert.

Für die Praxis heißt das:

• Eine Akzentfarbe nur für Hauptaktionen: Wenn dieselbe Farbe auch für Überschriften, Icons und Hintergründe verwendet wird, verliert der Button seine Signalwirkung.
• Zur Palette passend: Die Akzentfarbe darf auffallen, sollte aber zum Farbkonzept gehören. Wie Sie Haupt-, Neben- und Akzentfarben verteilen, erklärt der Ratgeber Farbgestaltung.
• Kontrast für den Text: Die Beschriftung braucht gegenüber der Button-Fläche ein Kontrastverhältnis von mindestens 4,5 zu 1. Nur bei großer Schrift, also ab 24 Pixeln oder ab etwa 18,7 Pixeln in Fett, reichen 3 zu 1. Typische Buttontexte sind kleiner und brauchen deshalb den höheren Wert.
• Kontrast für die Fläche: Die Button-Fläche oder ihr Rand sollte sich mit mindestens 3 zu 1 vom Seitenhintergrund abheben, damit der Button als Bedienelement erkennbar ist.

Wie Kontrastverhältnisse berechnet und geprüft werden, steht im Artikel Kontrast und Lesbarkeit: WCAG-Kontrastwerte.

Text: Verb plus Ergebnis

Der Buttontext ist oft das Erste, was Besucher lesen, wenn sie eine Seite überfliegen. Er sollte ohne Kontext verständlich sein. Bewährt hat sich die Formel Verb plus Ergebnis.

Weitere Regeln für Buttontexte:

• Kurz halten: Zwei bis vier Wörter reichen meist. Lange Texte brechen auf dem Smartphone um.
• Erwartung erfüllen: Wer “Kostenlos testen” klickt und dann Zahlungsdaten eingeben soll, fühlt sich getäuscht.
• Hinweise unter den Button, nicht hinein: Ein kurzer Satz direkt darunter kann Bedenken ausräumen, etwa zur Dauer oder zu den nächsten Schritten. Er muss aber stimmen.
• Gleiche Aktion, gleicher Text: Wenn eine Aktion an mehreren Stellen vorkommt, sollte der Text überall identisch sein.

Form und Größe

Ein Button wird als Button erkannt, wenn er eine abgegrenzte Fläche hat, genügend Innenabstand und eine Beschriftung, die nicht wie Fließtext aussieht. Ob die Ecken eckig oder abgerundet sind, ist eine Stilfrage. Wichtig ist, dass alle Buttons einer Website dieselbe Form haben, damit Besucher das Muster lernen.

Zur Größe:

• Für Finger planen: Die Gestaltungsrichtlinien der großen Mobilplattformen empfehlen Klickflächen um 44 bis 48 Pixel Höhe. Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand zu benachbarten Zielen.
• Innenabstand statt fester Breite: Der Button wächst mit seinem Text. Feste Breiten führen bei längeren Übersetzungen oder vergrößerter Schrift zu abgeschnittenen Texten.
• Mobil auch volle Breite möglich: Auf schmalen Bildschirmen lässt sich die Hauptaktion über die gesamte Inhaltsbreite ziehen. Das erleichtert das Treffen mit dem Daumen.
• Abstand zu anderen Aktionen: Zwei Buttons direkt nebeneinander führen zu Fehlklicks, vor allem wenn einer davon etwas löscht oder abbricht.

Zustände nicht vergessen

Ein Button hat mehr als ein Aussehen. Jeder Zustand gibt Rückmeldung:

Besonders der Fokuszustand wird häufig vergessen oder aus optischen Gründen entfernt. Wer mit der Tastatur navigiert, weiß dann nicht mehr, wo er sich befindet. Deaktivierte Buttons sind ebenfalls heikel: Bleibt unklar, warum ein Button grau ist, geben Besucher auf. Oft ist es besser, den Button aktiv zu lassen und nach dem Klick zu erklären, was fehlt. Wie kleine Animationen solche Rückmeldungen unterstützen, zeigt der Artikel Microinteractions.

Platzierung: dort, wo die Entscheidung fällt

Ein CTA gehört an die Stelle, an der Besucher genug wissen, um zu handeln. Daraus ergeben sich meist mehrere Positionen:

1. Im Startbereich, für Besucher, die schon entschieden sind.
2. Nach den Hauptargumenten, für alle, die erst überzeugt werden wollten.
3. Am Ende der Seite, damit niemand zurückscrollen muss.

Fixierte Buttons, die beim Scrollen auf dem Smartphone am unteren Rand stehen bleiben, können sinnvoll sein, etwa für einen Anruf. Sie verdecken aber Inhalt und sollten deshalb schmal bleiben. Wie sich die Bausteine einer Seite rund um die Hauptaktion anordnen, beschreibt der Artikel Landingpage-Aufbau.

Hierarchie: primär, sekundär, tertiär

Bietet eine Seite mehrere Aktionen an, brauchen sie eine klare Rangfolge:

• Primär: gefüllte Fläche in der Akzentfarbe, nur einmal pro Bereich.
• Sekundär: umrandeter Button oder neutrale Fläche, für Alternativen wie “Mehr erfahren”.
• Tertiär: Textlink, für Nebenwege wie “Später erinnern”.

Zwei gleich starke Buttons nebeneinander zwingen Besucher zu einer Entscheidung, die die Gestaltung ihnen hätte abnehmen können.

Technik und Barrierefreiheit

• Das richtige Element: button für Aktionen auf der Seite, a für Links zu anderen Seiten. Beide lassen sich gleich gestalten.
• Sichtbarer Text im zugänglichen Namen: Wenn ein Button sichtbar “Termin anfragen” heißt, sollte der Name für Screenreader denselben Text enthalten. Sprachsteuerung funktioniert sonst nicht.
• Icon-Buttons beschriften: Ein Button, der nur ein Symbol zeigt, braucht einen Text für Screenreader.
• Bedeutung nicht nur über Farbe: Ein roter Button für “Löschen” braucht zusätzlich eine eindeutige Beschriftung.

Testen statt raten

Ob eine Änderung am Button wirkt, zeigt nur ein Vergleich mit echten Besuchern, etwa ein A/B-Test, bei dem zwei Varianten parallel ausgespielt werden. Dafür braucht es genügend Besucher, sonst sind Unterschiede Zufall. Für kleinere Websites ist ein einfacher Nutzertest oft aufschlussreicher: Bitten Sie wenige Personen, eine Aufgabe zu lösen, und beobachten Sie, ob sie den Button finden.

Checkliste für CTA-Buttons