Best Practices für das Design von Cookie-Bannern

Ihr Cookie-Banner gehört zu den ersten Dingen, die ein Besucher sieht. Es prägt die Wahrnehmung Ihrer Marke, das Vertrauen in Ihr Unternehmen und – ganz entscheidend – die Frage, ob die erteilte Einwilligung rechtlich gültig ist. Ein gut gestaltetes Banner erreicht Compliance ohne Reibungsverluste. Ein schlecht gestaltetes vertreibt entweder Nutzer oder erzeugt Einwilligungen, die einer aufsichtsrechtlichen Prüfung nicht standhalten.

Dieser Leitfaden behandelt die Gestaltungsprinzipien, UX-Muster und Anforderungen an die Barrierefreiheit, die ein rechtskonformes, nutzerfreundliches Cookie-Banner von einem Haftungsrisiko unterscheiden.

Der erste Eindruck zählt

Untersuchungen zeigen durchgängig, dass Nutzer innerhalb von zwei bis drei Sekunden über Cookie-Banner entscheiden. Die meisten Nutzer lesen den vollständigen Text nicht. Sie überfliegen ihn nach vertrauten Mustern – Schaltflächen, Schalter, bekannte Formulierungen – und handeln aus dem Bauch heraus. Das bedeutet: Die visuelle Gestaltung Ihres Banners wiegt genauso schwer wie sein rechtlicher Inhalt.

Ziel ist es, die richtige Handlung offensichtlich und die verfügbaren Optionen auf einen Blick klar zu machen. Wenn ein Nutzer überlegen muss, was er tun soll, ist Ihr Design gescheitert.

Zentrale Grundsätze für den ersten Eindruck:

• Klarheit vor Cleverness. Ein Cookie-Banner ist nicht der richtige Ort für kreatives Texten oder ungewöhnliche Bedienelemente. Nutzen Sie vertraute Muster, die Nutzer wiedererkennen.
• Visuelle Hierarchie. Die wichtigsten Elemente – die Zweckbeschreibung und die Aktionsschaltflächen – sollten am auffälligsten sein. Sekundäre Elemente (Einstellungslink, Link zur Richtlinie) dürfen dezenter sein, müssen aber dennoch sichtbar bleiben.
• Weißraum. Ein überladenes Banner wirkt erdrückend. Geben Sie den Elementen Raum zum Atmen. Abstände und Freiraum signalisieren Professionalität und erleichtern das Überfliegen der Inhalte.

Schaltflächen-Hierarchie und visuelle Gewichtung

Hier scheitern die meisten Cookie-Banner an der Compliance – und hier werden die meisten Bußgelder verhängt.

Die Leitlinien 05/2020 des EDPB zur Einwilligung sowie zahlreiche Vollzugsmaßnahmen der CNIL, des italienischen Garante und der dänischen Datatilsynet haben einen klaren Grundsatz etabliert: Die Option, Cookies abzulehnen, muss ebenso prominent präsentiert werden wie die Option, sie zu akzeptieren.

Was das in der Praxis bedeutet:

• Akzeptieren- und Ablehnen-Schaltflächen müssen gleich groß sein. Eine 200 Pixel breite Schaltfläche „Alle akzeptieren" neben einem Textlink „Ablehnen" ist keine gleichwertige Präsenz. Beide müssen als Schaltflächen vergleichbarer Größe umgesetzt werden.
• Beide Schaltflächen müssen vergleichbares visuelles Gewicht haben. Wenn Ihre Akzeptieren-Schaltfläche eine ausgefüllte, kontraststarke Schaltfläche ist, muss auch Ihre Ablehnen-Schaltfläche eine ausgefüllte sein – kein umrandetes, transparentes („Ghost") oder rein textbasiertes Element. Die CNIL verhängte 2022 unter anderem deshalb ein Bußgeld von 150 Millionen Euro gegen Google, weil die Ablehnen-Option mehr Aufwand erforderte als das Akzeptieren.
• Farbe darf nicht manipulieren. Eine leuchtend grüne „Akzeptieren"-Schaltfläche neben einer grauen „Ablehnen"-Schaltfläche ist ein Dark Pattern. Verwenden Sie für beide die Primärfarbe Ihrer Marke oder für beide neutrale Farben. Das visuelle Signal darf den Nutzer nicht zu einer Wahl drängen.
• Die Reihenfolge der Schaltflächen ist weniger wichtig, als Sie denken. Ob Akzeptieren oder Ablehnen zuerst kommt, ist nicht das Hauptanliegen – entscheidend ist das visuelle Gewicht. Gleichwohl kann die Platzierung der Ablehnen-Schaltfläche links (an erster Stelle in der Leserichtung) Neutralität signalisieren.

Empfohlenes Schaltflächen-Muster

Ein rechtskonformes und nutzerfreundliches Banner verwendet in der Regel drei Aktionen:

1. Alle ablehnen – eine ausgefüllte Schaltfläche
2. Alle akzeptieren – eine ausgefüllte Schaltfläche gleicher Größe und gleichen visuellen Gewichts
3. Einstellungen verwalten – eine sekundäre Schaltfläche oder ein Link (darf dezenter sein, da sie zu einer zweiten Ebene führt)

Farbe und Kontrast

Die Farbwahl in Cookie-Bannern erfüllt zwei Zwecke: Markenkonsistenz und Lesbarkeit. Aus Compliance-Sicht sind die zentralen Anforderungen:

• Textkontrast. Sämtlicher Text im Banner muss die Kontrastanforderungen von WCAG 2.1 AA erfüllen: ein Mindestkontrastverhältnis von 4,5:1 bei normalem Text und 3:1 bei großem Text. Dies gilt für die Zweckbeschreibung, die Schaltflächenbeschriftungen und die Links.
• Schaltflächenkontrast. Schaltflächenhintergründe müssen ausreichend Kontrast zum Bannerhintergrund aufweisen, und der Schaltflächentext muss ausreichend Kontrast zum Schaltflächenhintergrund haben. Prüfen Sie beide Ebenen sorgfältig.
• Sichtbarkeit der Links. Links zu Ihrer Cookie-Richtlinie und Datenschutzerklärung müssen sich visuell vom umgebenden Text abheben – üblicherweise durch Farbe und Unterstreichung.
• Hintergrund. Der Bannerhintergrund muss ausreichend Kontrast zu seiner Umgebung bieten. Wenn Ihr Banner Seiteninhalte überlagert, stellen Sie sicher, dass die Überlagerung deckend genug ist, damit der Bannertext unabhängig vom darunterliegenden Seiteninhalt lesbar bleibt.

Ein gängiger Ansatz besteht darin, für das Banner einen weißen oder sehr hellen Hintergrund, dunklen Text für die Lesbarkeit und die Primärfarbe Ihrer Marke für die Schaltflächen zu verwenden. Das erzeugt in der Regel starke Kontrastverhältnisse und ein klares, professionelles Erscheinungsbild.

Texte und Microcopy

Der Text in Ihrem Cookie-Banner muss rechtlich ausreichend, zugleich aber für ein nicht technisches Publikum verständlich sein. Erwägungsgrund 39 der DSGVO verlangt ausdrücklich, dass Informationen über die Datenverarbeitung in „klarer und einfacher Sprache" bereitgestellt werden.

Überschrift

Halten Sie sie einfach und direkt. Wirkungsvolle Beispiele:

• „Wir verwenden Cookies"
• „Cookie-Einstellungen"
• „Ihre Datenschutzoptionen"

Vermeiden Sie vage oder ausweichende Formulierungen wie „Wir legen Wert auf Ihre Privatsphäre" – das sagt dem Nutzer nichts, wonach er handeln könnte.

Zweckbeschreibung

Erklären Sie in ein bis drei Sätzen, welche Cookies Sie verwenden und warum. Seien Sie konkret:

„Wir verwenden notwendige Cookies, damit diese Website funktioniert. Darüber hinaus möchten wir Analyse-Cookies einsetzen, um zu verstehen, wie Sie unsere Website nutzen, sowie Marketing-Cookies, um Ihnen relevante Inhalte anzuzeigen. Sie können alle akzeptieren, alle ablehnen oder Ihre Einstellungen verwalten."

Das ist prägnant, konkret und handlungsleitend. Vergleichen Sie es mit der leider weit verbreiteten Variante:

„Diese Website verwendet Cookies, um Ihnen das bestmögliche Erlebnis zu bieten. Indem Sie diese Website weiter nutzen, stimmen Sie unserer Verwendung von Cookies zu."

Das zweite Beispiel ist nicht rechtskonform: Es unterstellt eine Einwilligung durch fortgesetztes Surfen (unter der DSGVO nicht gültig), nennt keine Zwecke und bietet keine Wahlmöglichkeit.

Schaltflächenbeschriftungen

Schaltflächenbeschriftungen sollten eindeutig sein:

• „Alle akzeptieren" und „Alle ablehnen" – klare, parallel formulierte Sprache
• „Einstellungen verwalten" oder „Anpassen" – für die Einstellungsoption
• Vermeiden Sie: „OK", „Verstanden", „Weiter", „Ich verstehe" – diese sind mehrdeutig und stellen keine spezifische Einwilligung dar

Mobile-First-Design

Über 60 % des Web-Traffics ist mobil. Ihr Cookie-Banner wird auf Bildschirmen mit nur 320 Pixeln Breite angezeigt. Wenn Sie zuerst für den Desktop gestalten und dann für Mobilgeräte anpassen, werden Sie mit ziemlicher Sicherheit ein überladenes, unbrauchbares mobiles Erlebnis erhalten.

Überlegungen zum mobilen Design:

• Schaltflächen vertikal anordnen. Horizontale Schaltflächenreihen, die auf dem Desktop funktionieren, werden auf Mobilgeräten unleserlich. Ordnen Sie Akzeptieren-, Ablehnen- und Einstellungen-Schaltflächen vertikal in voller Breite an.
• Berührungsflächen. Schaltflächen müssen mindestens 44 x 44 Pixel groß sein (WCAG 2.5.5, Stufe AAA) oder mindestens 24 x 24 Pixel (WCAG 2.5.8, Stufe AA). Auf Mobilgeräten ist größer immer besser – streben Sie eine Höhe von 48 Pixeln oder mehr an.
• Bildschirmabdeckung. Auf Mobilgeräten kann ein Cookie-Banner leicht 60–80 % des Viewports einnehmen. Das ist für eine erste Aufforderung akzeptabel, doch das Banner darf die Website nicht vollständig unbrauchbar machen. Wenn Sie eine modale Überlagerung verwenden, stellen Sie sicher, dass Nutzer weiterhin erkennen können, dass sie sich auf der richtigen Website befinden.
• Schriftgröße. Gehen Sie auf Mobilgeräten niemals unter 14 Pixel bei Fließtext oder 12 Pixel bei Sekundärtext. Nutzer sollten nicht zoomen müssen, um Ihr Banner zu lesen.
• Scroll-Verhalten. Wenn der Bannerinhalt auf Mobilgeräten die Viewport-Höhe überschreitet (insbesondere beim Einstellungsbereich), muss er innerhalb des Banners scrollbar sein. Lassen Sie den Bannerinhalt nicht über den Bildschirm hinausragen, ohne dass die Akzeptieren-/Ablehnen-Schaltflächen erreichbar sind.

UX der Kategorie-Schalter

Der Einstellungsbereich – die zweite Ebene eines mehrschichtigen Banners – ist der Ort, an dem Nutzer differenzierte Entscheidungen treffen. Das Standardmuster verwendet Kategorie-Schalter: einen Schalter pro Cookie-Kategorie (notwendig, Analyse, Marketing, Präferenzen), jeweils mit Beschriftung und Beschreibung.

Gestaltungsrichtlinien für Schalter:

• Zustände müssen visuell eindeutig sein. An (Einwilligung erteilt) und aus (Einwilligung verweigert) müssen durch Farbe, Position und idealerweise eine Beschriftung („An" / „Aus" oder Häkchen / X) klar unterscheidbar sein. Verlassen Sie sich nicht allein auf Farbe – das versagt bei farbenblinden Nutzern.
• Notwendige Cookies sollten aktiviert und deaktivierbar-gesperrt sein. Die Kategorie „Unbedingt erforderlich" sollte aktiviert und der Schalter visuell deaktiviert sein (ausgegraut oder mit einem Schloss-Symbol), mit einem Hinweis, dass sich diese Cookies nicht deaktivieren lassen, da sie für die Funktion der Website erforderlich sind.
• Der Standardzustand für nicht essenzielle Kategorien muss „aus" sein. Vorangekreuzte Schalter stellen eine vorausgewählte Einwilligung dar, die durch das Planet49-Urteil des EuGH ausdrücklich untersagt ist.
• Kategoriebeschreibungen sollten verständlich formuliert sein. „Analyse-Cookies" ist eine Beschriftung. „Helfen uns zu verstehen, wie Besucher mit unserer Website interagieren, indem anonyme Nutzungsdaten erhoben werden" ist eine Beschreibung. Stellen Sie beides bereit.
• Ausklappbare Cookie-Listen. Bieten Sie unter jeder Kategorie einen ausklappbaren Bereich, der die einzelnen Cookies auflistet: Name, Anbieter, Zweck und Laufzeit. Dieses Maß an Transparenz wird von Datenschutzbehörden zunehmend erwartet.

Gestaltung des Einstellungs-/Präferenzbereichs

Der Einstellungsbereich ist eine entscheidende Komponente. Wenn ein Nutzer auf „Einstellungen verwalten" klickt, befasst er sich aktiv mit seinen Datenschutzoptionen – das ist der Nutzer, dem Sie den größten Respekt entgegenbringen sollten.

• Klare Überschrift. „Cookie-Einstellungen" oder „Ihre Privatsphäre verwalten" – machen Sie deutlich, wofür dieser Bereich da ist.
• Speichern-Schaltfläche. Eine gut sichtbare Schaltfläche „Einstellungen speichern", die die differenzierten Entscheidungen des Nutzers bestätigt. Diese Schaltfläche muss ohne übermäßiges Scrollen leicht erreichbar sein.
• Alle akzeptieren und Alle ablehnen sollten verfügbar bleiben. Bieten Sie auch im Einstellungsbereich Schnellzugriff-Schaltflächen zum Akzeptieren oder Ablehnen aller Cookies. Manche Nutzer öffnen den Bereich aus Neugier, wünschen sich aber dennoch eine schnelle Aktion.
• Schließverhalten. Wenn ein Nutzer den Einstellungsbereich ohne Speichern schließt, werten Sie dies als keine erteilte Einwilligung – setzen Sie keine nicht essenziellen Cookies. Halten Sie Nutzer nicht im Bereich gefangen.

Markenanpassung bei gleichzeitiger Compliance

Ihr Cookie-Banner sollte sich wie ein Teil Ihrer Website anfühlen, nicht wie ein Fremdkörper. Die meisten Consent-Management-Plattformen ermöglichen die Anpassung von Farben, Schriftarten, Logo-Platzierung und Texten. Nutzen Sie dies, um das Banner an Ihre Markenidentität anzupassen.

Die Markenanpassung darf die Compliance jedoch nicht beeinträchtigen:

• Sie können Ihre Markenfarben verwenden, aber die Schaltflächen müssen dennoch gleiches visuelles Gewicht haben.
• Sie können Ihre Markenschriftart verwenden, aber der Text muss in den verwendeten Größen dennoch lesbar sein.
• Sie können Ihr Logo hinzufügen, aber es darf entscheidende Inhalte (Zweckbeschreibung, Schaltflächen) nicht unter die sichtbare Bereichsgrenze („below the fold") verdrängen.
• Sie können die Texte anpassen, aber sie müssen dennoch konkret, korrekt und vollständig sein.

Anforderungen an die Barrierefreiheit von Cookie-Bannern

Ein Cookie-Banner, das nicht barrierefrei ist, ist nicht rechtskonform – weder nach Datenschutzrecht (der Nutzer könnte keine informierte Einwilligung erteilen, wenn er das Banner nicht wahrnehmen oder bedienen kann) noch nach Barrierefreiheitsrecht (dem European Accessibility Act und nationalen Antidiskriminierungsgesetzen für Menschen mit Behinderungen).

WCAG-AA-Anforderungen

• Tastaturnavigation. Jedes interaktive Element – Schaltflächen, Schalter, Links, Schließen-Symbole – muss per Tastatur erreichbar und bedienbar sein. Die Tab-Reihenfolge muss logisch sein (typischerweise: Zwecktext, dann Ablehnen, dann Akzeptieren, dann Einstellungen verwalten).
• Fokus-Management. Wenn das Banner erscheint, sollte der Fokus darauf wechseln (oder es sollte angekündigt werden). Wird das Banner geschlossen, sollte der Fokus zum Hauptinhalt zurückkehren. Fokus-Indikatoren müssen sichtbar sein.
• Screenreader-Unterstützung. Das Banner muss geeignete ARIA-Rollen und -Beschriftungen verwenden. Verwenden Sie role="dialog" und aria-label="Cookie consent" für den Banner-Container. Schaltflächen müssen zugängliche Namen haben. Schalterzustände müssen angekündigt werden (aria-checked).
• Farbkontrast. Alle Texte und interaktiven Elemente müssen die Kontrastverhältnisse von WCAG 2.1 AA erfüllen (4,5:1 bei normalem Text, 3:1 bei großem Text und UI-Komponenten).
• Keine Tastaturfallen. Nutzer müssen vom Banner wegnavigieren können. Auch wenn eine modale Überlagerung den Fokus auf das Banner beschränken darf (Fokus-Trapping bei modalen Dialogen ist ein akzeptiertes Muster), muss es stets eine Möglichkeit geben, das Banner zu schließen und den Seiteninhalt zu erreichen.
• Bewegung. Wenn das Banner Animationen verwendet (Einschieben, Ein- und Ausblenden), berücksichtigen Sie die Media Query prefers-reduced-motion und bieten Sie eine reduzierte oder bewegungsfreie Alternative.

So testen Sie die Barrierefreiheit Ihres Banners

1. Navigieren Sie das gesamte Banner ausschließlich per Tastatur (Tab, Enter, Leertaste, Escape).
2. Testen Sie mit einem Screenreader (VoiceOver unter macOS, NVDA unter Windows).
3. Überprüfen Sie den Farbkontrast mit einem Tool wie dem WebAIM Contrast Checker.
4. Testen Sie bei 200 % Zoom – das Banner sollte bedienbar bleiben.
5. Testen Sie auf Mobilgeräten mit aktiviertem VoiceOver oder TalkBack.

Testen und Iteration

Ein Cookie-Banner ist kein Element, das man einmal einrichtet und dann vergisst. Nutzerverhalten, Vorschriften und die Cookie-Nutzung Ihrer Website ändern sich im Laufe der Zeit. Planen Sie fortlaufende Tests ein:

• Einwilligungsraten. Verfolgen Sie, welcher Prozentsatz der Nutzer akzeptiert, ablehnt oder anpasst. Ist Ihre Ablehnungsrate verdächtig niedrig (unter 10 %), verwendet Ihr Banner möglicherweise Dark Patterns – ob beabsichtigt oder nicht.
• Interaktionsraten. Verfolgen Sie, wie viele Nutzer mit dem Einstellungsbereich interagieren. Ein geringes Engagement kann darauf hindeuten, dass die Option „Einstellungen verwalten" nicht ausreichend sichtbar ist.
• A/B-Tests. Testen Sie verschiedene Texte, Schaltflächenbeschriftungen und Layouts. Das Ziel ist nicht, die Einwilligungsraten zu maximieren – sondern die Rate informierter Einwilligungen. Ein Banner, mit dem sich mehr Nutzer auseinandersetzen, ist ein besseres Banner.
• Regulatorische Aktualisierungen. Beobachten Sie die Hinweise der für Sie zuständigen Datenschutzbehörden. Die Auslegung der Durchsetzung entwickelt sich weiter, und Ihr Banner sollte sich mit ihr weiterentwickeln.
• Cookie-Audits. Durchsuchen Sie Ihre Website regelmäßig nach neuen Cookies. Wenn Sie ein neues Analysetool oder Marketing-Pixel hinzufügen, müssen Ihre Banner-Kategorien entsprechend aktualisiert werden.

Passiro bietet automatisiertes Cookie-Scanning und Analysen zu Einwilligungsraten, damit Ihr Banner korrekt und wirksam bleibt. Erfahren Sie mehr über das Consent-Management von Passiro.