CTA-Button gestalten: Was den Klick auslöst

Einen CTA-Button gestalten ist keine Wissenschaft, aber eine Frage von Stil und Inhalt: Wie Kontrast, klare Beschriftung und ein Satz Microcopy Ihre Buttons sichtbar machen – vier Hebel für Ihre Conversion.

von Sylvia Fischer

13. August 2026

Zusammenfassung

Ein Call-to-Action (CTA) wird geklickt, wenn er zwei Dinge schafft: auffallen und ein Versprechen geben/halten. Die Farbe erledigt nur den ersten Teil – und selbst dort zählt sie nich an sich, sondern ihr Kontrast zur Umgebung. Den zweiten Teil übernimmt die Beschriftung, und genau hier liegt der größte Hebel für alle, die ihre Farbwelt so lassen möchten, wie sie ist.

Kontrast statt Signalfarbe – Ein Button fällt auf, weil er sich von seiner Umgebung abhebt, nicht weil er orange ist.
Beschriftung schlägt Farbe – „Kostenlose Erstberatung buchen" wirkt stärker als „Kontakt" in Knallrot.
Ein Satz darunter – Microcopy nimmt die Hürde vor dem Klick, ohne das Design zu verändern.
Ein primärer CTA je Abschnitt – Vier gleichwertige Buttons heben sich gegenseitig auf.
3:1 als technische Untergrenze – WCAG 2.2 AA verlangt diesen Kontrast für Bedienelemente.

Das Bild ist mit Hilfe von KI generiert.

Inhaltsverzeichnis

Rückfrage zu diesem Artikel senden

Warum die Farbe beim CTA nicht entscheidet

Die bekannteste Faustregel für Farbverhältnisse ist die 60-30-10-Regel: 60 % Grundton, 30 % Sekundärfarbe, 10 % Akzent. Sie stammt aus der Innenarchitektur und ist eine Proportionsempfehlung, keine Conversion-Studie. Als Denkhilfe ist sie brauchbar – sie erinnert daran, die Akzentfarbe knapp zu halten. Als Gesetz taugt sie weniger.

Belastbar ist etwas anderes: Wahrnehmung funktioniert über Unterschied. Ein Element fällt auf, wenn es sich von dem abhebt, was daneben steht. Das erklärt, warum berühmte A/B-Tests mit roten und grünen Buttons so unterschiedliche Sieger produzieren – gewonnen hat jeweils die Farbe, die auf der getesteten Seite seltener vorkam.

Nicht die Farbe macht den Button sichtbar, sondern ihre Seltenheit.

Für die Praxis heisst das:

Wenn Ihre Primärfarbe in der Navigation, in Boxen, in Icons und auf Buttons vorkommt, verliert sie ihre Signalwirkung. Nicht weil sie die falsche Farbe wäre, sondern weil sie überall ist. Hier an einem Beispiel veranschaulicht:

Vier Tipps, wie Sie Ihren CTA Button gestalten

1. Kontrast erhöhen, statt die Farbe zu wechseln

Wenn eine neue Akzentfarbe nicht in Frage kommt, gibt es mehrere Wege zum selben Ergebnis:

Sättigung und Helligkeit variieren – dieselbe Farbfamilie, aber der Button deutlich dunkler oder gesättigter als alles andere auf der Seite.
Fläche statt Umriss – der primäre Button gefüllt, alle sekundären Aktionen nur mit Rahmen. Das schafft Hierarchie ganz ohne zweite Farbe.
Weißraum als Rahmen – ein Button, der allein in einer ruhigen Zone steht, wird zuverlässiger gesehen als einer, der zwischen Text klemmt.
Größe und Klickfläche – ein größeres Ziel wird schneller getroffen. Auf Mobilgeräten ist das der wirksamste Einzelhebel überhaupt. Design for fat fingers :-)

Wenn Navigation, Boxen und Buttons konkurrieren, kostet das Sichtbarket. Stellen Sie daher sicher, dass ein Element trägt, um Signalwirkung zu erreichen.

2. Die Beschriftung sagen lassen, was passiert

Hier liegt der Hebel, der kein Design-Zugeständnis verlangt. Die Nielsen Norman Group formuliert das Prinzip als vier Kriterien für Link- und Buttontexte: spezifisch, aufrichtig, aussagekräftig und prägnant. Übersetzt heißt das: Die Beschriftung muss auch dann verständlich sein, wenn jemand nur die Buttons überfliegt – und sie muss halten, was sie verspricht.

Statt: Kontakt
Besser: Kostenlose Erstberatung buchen
Statt: Mehr erfahren
Besser: Leistungen und Preise ansehen
Statt: Jetzt starten
Besser: Angebot anfordern
Statt: Download
Besser: Checkliste als PDF laden

Der Unterschied ist nicht kosmetisch. „Jetzt starten" verrät nicht, ob dahinter eine Erklärseite, ein Formular oder ein Registrierungsprozess wartet. Wer klickt und im Formular landet, springt ab – wer das Formular ahnt, klickt gar nicht erst. Beides erscheint in der Statistik gleich: als nicht konvertiert.

Nennen Sie im Buttontext das Ergebnis, nicht die Tätigkeit. „Termin vereinbaren" beschreibt, was die Leser:in tun muss. „Rückruf erhalten" beschreibt, was sie bekommt.

3. Einen Satz unter den Button setzen

Der wirksamste Zusatz ist die Zeile direkt unter dem Button. Sie beantwortet die stille Frage „und was passiert dann?" und nimmt damit genau die Unsicherheit, die den Klick verhindert:

„Antwort innerhalb eines Werktags"
„Unverbindlich – wir melden uns telefonisch"
„Vier Felder - Zwei Minuten"
„Kostenlos und ohne Registrierung"

Diese Zeile ist typografisch unauffällig, farblich neutral und trotzdem einer der stärksten Hebel, wenn Sie Ihren Call-to-Action gestalten möchten, ohne die Optik anzufassen.

4. Pro Abschnitt nur einen primären CTA Button gestalten

Wenn „Angebot anfordern" und „Termin buchen" gleichwertig nebeneinander stehen, entsteht keine Auswahl, sondern eine Entscheidung – und die kostet Aufwand. Setzen Sie pro Seitenabschnitt einen primären Call-to-Action als gefüllten Button, alles Weitere als Umriss-Button oder Textlink. Die Hierarchie erledigt dann die Arbeit, die sonst die Farbe leisten müsste.

Vier gleich gewichtete Buttons verlangen eine Entscheidung. Eine klare Hierarchie aus gefülltem Button, Umriss-Button und Textlink führt stattdessen – ganz ohne zweite Farbe.

Prüffragen für Ihren CTA

Kommt die Buttonfarbe auch bei Elementen vor, die nicht anklickbar sind?
Steht auf mindestens einem Button noch „Mehr erfahren", „Kontakt" oder „Absenden"?
Erreicht Ihr Button 3:1 Kontrast zum Hintergrund – auch der Umriss-Button?
Gibt es unter dem wichtigsten Button eine Zeile, die sagt, was danach passiert?
Erkennt man auf dem Handy im ersten Bildschirm, welche Handlung gemeint ist?

Was nicht hilft

„Rote Buttons konvertieren besser."

Das geht auf einzelne A/B-Tests zurück, deren Seiten grün dominiert waren. Übertragbar ist der Kontrastgedanke, nicht die Farbe.

Die 60-30-10-Regel als Vorgabe.

Sie ist eine Proportionshilfe aus der Innenarchitektur. Wo sie mit der Marke kollidiert, gewinnt die Marke – die Wirkung holen Sie über Beschriftung und Hierarchie.

Mehr Buttons für mehr Anfragen.

Die Anzahl der Handlungsangebote und die Anzahl der Handlungen wachsen nicht gemeinsam.

Dringlichkeit ohne Substanz.

„Nur noch heute" auf einer Dienstleistungsseite wirkt aufgesetzt und beschädigt das Vertrauen, das die Seite davor aufgebaut hat.

Für Sie bedeutet das

Wenn die Farbwelt Ihrer Marke feststeht, ist das kein Hindernis. Sie können Ihren Call-to-Action auch dann wirksam gestalten – der Ansatzpunkt verschiebt sich von der Farbe zur Sprache und zur Hierarchie.

Welcher Button auf Ihrer Startseite trägt die wichtigste Handlung – und steht dort das Ergebnis oder nur die Tätigkeit?
Wo auf Ihrer Website konkurrieren mehrere gleichwertige Buttons miteinander?
Halten Ihre Bedienelemente den Kontrast von 3:1 ein, den [barrierefreie Websites nach WCAG 2.2](https://www.webgras.at/barrierefreie-webseiten/) verlangen?

Die Beschriftungen lassen sich in einer Stunde ändern und wirken sofort. Alles Weitere – Hierarchie, Kontrast, Platzierung – gehört in die nächste ohnehin geplante Überarbeitung. Wir unterstützen Sie dabei im Rahmen der [Optimierung von Conversions und Leads](https://www.webgras.at/loesungen/conversion-optimieren/).

Sie möchten wissen, welche Buttons auf Ihrer Website tatsächlich gesehen werden? Sprechen Sie uns an

Häufige Fragen zu CTA Button gestalten

Muss der Button eine Signalfarbe haben?

Nein. Entscheidend ist der Kontrast zur direkten Umgebung, nicht der Farbton. Ein dunkler Button in der Markenfarbe auf hellem Grund funktioniert, solange dieselbe Farbe nicht überall sonst auf der Seite auftaucht. Die technische Untergrenze liegt bei einem Kontrastverhältnis von 3:1.

Wie lang darf ein Buttontext sein?

Zwei bis fünf Wörter sind ein guter Rahmen. Kürze ist kein Selbstzweck: Ein längerer Text, der klar sagt, was passiert, schlägt ein kurzes Wort, das offenlässt, wohin der Klick führt. Bei mehr als fünf Wörtern gehört der Rest in die Zeile unter den Button.

Wie viele Call-to-Actions verträgt eine Seite?

Mehrere – aber pro Seitenabschnitt nur eine primäre Handlung. Auf langen Seiten darf derselbe CTA nach jedem größeren Block wiederholt werden. Problematisch wird es, wenn verschiedene Handlungen gleich gewichtet nebeneinanderstehen.

Woran erkenne ich, ob die Änderung etwas gebracht hat?

An der Anzahl der Klicks auf den betreffenden Button im Verhältnis zu den Seitenaufrufen, gemessen über mindestens vier Wochen. Beobachten Sie zusätzlich, wie viele der Anfragen zu einem Gespräch führen: Eine präzisere Beschriftung senkt manchmal die Klickzahl und erhöht gleichzeitig die Qualität der Anfragen.

Ist ein Button-Kontrast rechtlich relevant?

Für Unternehmen, die unter das österreichische Barrierefreiheitsgesetz fallen, ja – das Kriterium 1.4.11 gehört zur Konformitätsstufe AA. Ob Ihr Unternehmen betroffen ist, hängt von Größe und Angebot ab.