Cookie-Banner gestalten: Einwilligung nach TDDDG und DSGVO

Kurz gesagt

Ein Cookie-Banner ist der Streifen oder das Fenster, das beim ersten Besuch erscheint und um Erlaubnis für Cookies bittet. In Deutschland regelt § 25 TDDDG, wann Informationen auf dem Endgerät gespeichert oder ausgelesen werden dürfen. Für die Einwilligung selbst verweist er auf die DSGVO.

Daraus folgt für das Design: Ablehnen muss so erreichbar sein wie Akzeptieren, und nichts ist vorab angekreuzt. Auf dieser Seite übersetze ich die Regeln und den Bericht der europäischen Datenschutzbehörden in Designentscheidungen.

Hinweis: Diese Seite ist keine Rechtsberatung. Lesen Sie die Gesetzestexte selbst und fragen Sie für Ihren Fall eine Anwältin oder einen Anwalt.

Die Grundlage: § 25 TDDDG und die DSGVO

§ 25 Abs. 1 TDDDG sagt, dass das Speichern von Informationen auf dem Endgerät oder der Zugriff darauf nur zulässig ist, wenn der Endnutzer eingewilligt hat, und zwar auf Grundlage klarer und umfassender Informationen. Information und Einwilligung richten sich nach der DSGVO.

Die DSGVO definiert die Einwilligung in Art. 4 Nr. 11: eine freiwillige, informierte und unmissverständliche Willensbekundung, durch Erklärung oder eine eindeutige bestätigende Handlung. Erwägungsgrund 32 ergänzt, dass Stillschweigen, bereits angekreuzte Kästchen oder Untätigkeit keine Einwilligung darstellen sollten.

Ein Satz wie „Mit der Nutzung der Website stimmen Sie Cookies zu“ reicht deshalb nicht. Weitersurfen ist keine eindeutige bestätigende Handlung.

Für die Gestaltung lohnt sich außerdem der Bericht der Cookie Banner Taskforce des Europäischen Datenschutzausschusses (EDPB), angenommen am 17. Januar 2023. Er hält fest, worauf sich die Aufsichtsbehörden bei typischen Bannern geeinigt haben, und beschreibt diese Positionen als Mindestschwelle. Manipulative Oberflächen außerhalb des Banners behandle ich im Ratgeber zu Dark Patterns.

Welche Cookies brauchen keine Einwilligung?

§ 25 Abs. 2 TDDDG nennt zwei Ausnahmen. Die erste betrifft Speicherung, deren alleiniger Zweck die Übertragung einer Nachricht über ein öffentliches Telekommunikationsnetz ist.

Die zweite ist für Websites die wichtigere: Speicherung oder Zugriff sind unbedingt erforderlich, damit der Anbieter einen vom Nutzer ausdrücklich gewünschten digitalen Dienst bereitstellen kann. Typische Kandidaten sind ein Warenkorb, eine Anmeldung und das Cookie, das die Cookie-Auswahl selbst speichert. Der EDPB-Bericht erinnert an die Stellungnahme 04/2012 der Artikel-29-Gruppe, nach der Cookies, die Nutzerpräferenzen zu einem Dienst speichern, als erforderlich gelten sollten.

„Erforderlich“ ist aber kein Sammelbecken. Der EDPB-Bericht behandelt es als eigenes Problem, wenn Cookies als „essential“ oder „strictly necessary“ eingestuft werden, die das nicht sind. Er betont auch die Verantwortung des Website-Betreibers, eine Liste seiner Cookies zu führen und auf Anfrage nachzuweisen, warum sie erforderlich sind.

Für das Design heißt das: In den Einstellungen sind die erforderlichen Cookies gesperrt und aktiv. Schreiben Sie daneben, warum sie sich nicht abschalten lassen. Ob ein bestimmtes Statistik-Tool darunter fällt, entscheide ich nicht im Design. Das muss im Einzelfall geprüft werden.

Erste Ebene: Akzeptieren, Ablehnen, Einstellungen

Der EDPB-Bericht beginnt mit einer Grundregel: Standardmäßig darf kein einwilligungspflichtiges Cookie ohne Einwilligung gesetzt werden, und die Einwilligung braucht eine aktive Handlung des Nutzers (Rn. 7).

Dann folgt der wichtigste Punkt für das Design. Eine große Mehrheit der Behörden hielt ein Banner, das auf keiner Ebene mit Zustimmungsbutton eine Ablehnung anbietet, für einen Verstoß (Rn. 8). Außerdem darf ein Banner nicht den Eindruck erwecken, man müsse einwilligen, um an die Inhalte zu kommen, und den Nutzer nicht erkennbar zur Einwilligung drängen (Rn. 13).

Auch Links zählen. Ist die einzige Alternative zur Einwilligung ein Link wie „ablehnen“ oder „weiter ohne Zustimmung“, eingebettet in einen Textabsatz und ohne ausreichende visuelle Hervorhebung, führt das laut Bericht nicht zu einer gültigen Einwilligung (Rn. 14).

Zu Farben und Kontrast sagt der Bericht, dass sich kein allgemeiner Standard vorschreiben lässt und jeder Fall einzeln geprüft wird (Rn. 17). Ein Ablehnen-Button, dessen Text wegen minimalen Kontrasts für praktisch niemanden lesbar ist, kann aber offensichtlich irreführend sein (Rn. 18).

Worauf ich bei den Buttons achte

• Ablehnen ist ein Button, kein Link im Fließtext.
• Akzeptieren ist nicht dunkel gefüllt und Ablehnen blass umrandet. Beide nutzen dieselbe Komponente.
• Die Labels sagen, was passiert. Vermeiden Sie vage Labels wie „Vielleicht später“.
• Auf schmalen Bildschirmen dürfen die Buttons untereinander stehen. Wichtig sind gleiche Breite und gleicher Stil.

Der Bannertext ist kurz, aber nicht leer. § 25 TDDDG verlangt klare und umfassende Informationen. Nennen Sie Zwecke und Anbieter knapp im Banner und verlinken Sie die Details.

Die Einstellungen: Kästchen sind leer

Die zweite Ebene sind die Einstellungen. Bereits angekreuzte Kästchen stellen nach Erwägungsgrund 32 keine Einwilligung dar. Der EDPB-Bericht bestätigt das ausdrücklich für vorangekreuzte Kästchen auf der zweiten Ebene (Rn. 10). Statistik und Marketing starten also leer.

Jeder Zweck ist eine eigene Zeile. Erwägungsgrund 32 sagt, dass bei mehreren Zwecken für alle diese Zwecke eine Einwilligung gegeben werden sollte. Eine einzige Sammelzustimmung für alles erfüllt das nicht.

In jeder Zeile stehen Zweck, Speicherdauer und ob es ein Erst- oder Drittanbieter ist. So wird die Information klar und umfassend, wie § 25 Abs. 1 TDDDG es verlangt.

Die Einwilligung muss vorliegen, bevor das Cookie gesetzt wird. Bis zur Zustimmung laufen also keine Statistik- und Werbeskripte. Das baut der Entwickler, und wir testen es gemeinsam.

Ausprobieren: drei Banner, eine Aufgabe

Unten sehen Sie drei erfundene Banner. Ihre Aufgabe ist, in jedem die Cookies abzulehnen. Die Demo zählt Ihre Klicks und zeigt danach, was die Quellen zu diesem Banner sagen.

Ausprobieren

Die drei Banner stehen unten untereinander. Unter jedem steht, was die Quellen dazu sagen. Mit JavaScript können Sie in jedem versuchen abzulehnen und Ihre Klicks zählen lassen.

1. Ein Button (nur Akzeptieren)

Beispiel-Shop

Wir verwenden Cookies, um Ihnen ein besseres Erlebnis zu bieten.

AkzeptierenMehr erfahren

Was die Quellen sagen

nur zulässig, wenn der Endnutzer auf der Grundlage von klaren und umfassenden Informationen eingewilligt hat.

§ 25 Abs. 1 TDDDG

Laut EDPB-Bericht (Rn. 8) hielt eine große Mehrheit der Behörden ein Banner, das auf keiner Ebene mit Zustimmungsbutton eine Ablehnung anbietet, für einen Verstoß. Dieses Banner lässt sich nur durch Zustimmen schließen.

2. Verstecktes Ablehnen (großes Akzeptieren, kleiner Link Einstellungen, Ablehnen erst auf Ebene 2)

Beispiel-Shop

Wir verwenden Cookies, um Ihren Einkauf zu erleichtern.

Akzeptieren und weiterEinstellungen

Was die Quellen sagen

Stillschweigen, bereits angekreuzte Kästchen oder Untätigkeit der betroffenen Person sollten daher keine Einwilligung darstellen.

DSGVO, Erwägungsgrund 32

Der EDPB-Bericht bestätigt das für vorangekreuzte Kästchen auf der zweiten Ebene (Rn. 10). Ein Ablehnen-Link ohne ausreichende visuelle Hervorhebung als einzige Alternative führt laut Bericht ebenfalls nicht zu einer gültigen Einwilligung (Rn. 14). Hier fehlt Ablehnen auf der ersten Ebene, und die Kästchen sind angekreuzt.

3. Ausgewogen (Akzeptieren und Ablehnen gleichwertig, Einstellungen)

Beispiel-Shop

Wir nutzen Cookies für drei Zwecke: unbedingt erforderlich (Erstanbieter), Statistik (Erstanbieter) und Marketing (Drittanbieter). Alles außer den erforderlichen Cookies wird nur mit Ihrer Einwilligung aktiv.

AkzeptierenAblehnenEinstellungen

Datenschutzerklärung

Was die Quellen sagen

Der EDPB-Bericht verlangt, dass ein Banner den Nutzer nicht erkennbar zur Einwilligung drängt. Als einen möglichen Weg nennt er, das Weitersurfen ohne Cookies schon auf der ersten Ebene zu erlauben (Rn. 13).

EDPB, Cookie Banner Taskforce, Rn. 13

Ablehnen ist ein Klick. Die Kästchen in den Einstellungen sind leer.

Die drei Banner und der Beispiel-Shop sind erfunden. Diese Demo setzt keine Cookies und speichert Ihre Auswahl nicht.

Eine Aufgabe, drei Banner. Beim ausgewogenen Banner ist Ablehnen ein Klick, beim versteckten erst auf der zweiten Ebene. Beim Banner mit einem Button gibt es gar keinen Weg.

Die Zahl der Klicks beweist allein nichts. Braucht Ablehnen aber mehr Schritte als Akzeptieren, schiebt das Banner den Nutzer in eine Richtung.

Widerruf und erneutes Fragen

Art. 7 Abs. 3 DSGVO gibt das Recht, die Einwilligung jederzeit zu widerrufen. Der Widerruf muss so einfach sein wie die Erteilung.

Der EDPB-Bericht wird konkret: Website-Betreiber sollten leicht erreichbare Lösungen anbieten, etwa ein kleines, dauerhaft sichtbares Icon oder einen Link an einer sichtbaren, standardisierten Stelle (Rn. 32). Eine bestimmte Lösung schreibt er nicht vor.

Ich löse das meist mit einem Link „Cookie-Einstellungen“ im Footer und einem kleinen Icon in der Ecke. Das Icon darf keine anderen festen Elemente wie Chat-Blase oder Warenkorb verdecken.

Fragen Sie nicht bei jedem Besuch neu. Das Cookie, das die Auswahl speichert, ist genau dafür da. Ein Banner, das ständig wiederkommt, ermüdet und drängt am Ende doch zum Akzeptieren.

Cookie-Wall und sperrende Banner

Eine Cookie-Wall zeigt den Inhalt erst, wenn der Besucher allen Cookies zustimmt. Der EDPB-Bericht hält fest, dass ein Banner nicht den Eindruck erwecken darf, man müsse einwilligen, um an die Inhalte zu kommen (Rn. 13). Ob ein bestimmtes Modell zulässig ist, bleibt eine rechtliche Einzelfallfrage, die ich nicht im Design entscheide.

Auch ein modales Banner, das die Seite sperrt, fühlt sich wie eine Wand an. Wenn Sie das Banner modal machen, halten Sie die Regeln zu Fokus und Schließen aus dem Muster Modal und Pop-up ein. Für die meisten Websites empfehle ich einen Streifen unten, der den Inhalt nicht sperrt.

Cookie-Banner auf dem Handy und mit Tastatur

Auf dem Handy sollte der Streifen unten nicht den Großteil des Bildschirms füllen. Halten Sie den Text bei zwei, drei Zeilen und lassen Sie die Details in den Einstellungen. Stehen die Buttons untereinander, bleiben sie gleich breit und gleich gestaltet.

Wer mit der Tastatur navigiert, muss das Banner erreichen. Das Banner im Quelltext vor den Inhalt zu setzen oder den Fokus beim Öffnen ins Banner zu holen, hilft. Zur Größe der Buttons siehe das Muster Tippbereich.

Messen Sie auch den Kontrast. Ein Ablehnen-Button in blassem Grau ist schwer lesbar und bricht die Gleichwertigkeit. Die Kontrastkriterien der WCAG gelten auch hier.

Meine Notiz

Das ärgerlichste Problem an Cookie-Bannern ist für mich ein Ablehnen, das auf die zweite Ebene verschoben wurde. Ich glaube nicht, dass das immer eine bewusste Entscheidung ist. Oft wird ein fertiges Consent-Tool eingebaut und die Standardeinstellung nie hinterfragt.

Mein einfacher Test: Wie viele Klicks kostet Ablehnen, wie viele Akzeptieren? Sind die Zahlen nicht gleich, nehme ich mir das Banner noch einmal vor. Die Demo oben ist genau dafür da.

Checkliste

Bevor ein Cookie-Banner live geht, gehe ich diese Liste durch. Sie ist keine rechtliche Prüfung, sondern eine Designkontrolle auf Grundlage der Quellen oben.

• Auf der ersten Ebene gibt es Akzeptieren, Ablehnen und Einstellungen.
• Alle drei Buttons haben dieselbe Farbe, Größe und Schriftgröße.
• Ablehnen ist ein Button, kein Link im Fließtext.
• Das Banner nennt kurz Zwecke und Anbieter der Cookies.
• Es gibt einen Link zur Datenschutzerklärung.
• In den Einstellungen sind einwilligungspflichtige Kästchen leer.
• Erforderliche Cookies sind gesperrt, und es steht dabei, warum.
• Jeder Zweck hat eine eigene Auswahl.
• Ohne Einwilligung laufen keine Statistik- und Werbeskripte.
• Die Einwilligung lässt sich über ein Icon oder einen Link später ändern.
• Das Banner erscheint nicht bei jedem Besuch neu.
• Das Banner ist vollständig per Tastatur bedienbar.