Cookie-Banner-Design: fair gestalten statt Dark Patterns

Wie sieht ein fairer Cookie-Banner aus?

Ein fair gestalteter Cookie-Banner bietet „Alle akzeptieren“ und „Alle ablehnen“ gleichwertig auf der ersten Ebene an, erklärt in wenigen Sätzen, wofür Daten genutzt werden, und lässt Besucher ohne Druck entscheiden. Gutes Cookie-Banner-Design bedeutet nicht, möglichst viele Zustimmungen herauszuholen, sondern eine echte Wahl zu ermöglichen. Das ist die Grundlage für eine wirksame Einwilligung nach § 25 des Telekommunikation-Digitale-Dienste-Datenschutz-Gesetzes (TDDDG) und der Datenschutz-Grundverordnung (DSGVO), und es wirkt seriös. Dieser Artikel ist keine Rechtsberatung, er zeigt, worauf es bei der Gestaltung ankommt.

Viele Banner im Netz arbeiten mit Tricks: ein leuchtender Knopf zum Zustimmen, daneben ein grauer Link zu den Einstellungen, in denen das Ablehnen versteckt ist. Solche Muster heißen Dark Patterns. Sie bringen kurzfristig mehr Zustimmungen, gefährden aber die Wirksamkeit der Einwilligung und damit alle Daten, die darauf beruhen. Wenn eine Einwilligung nicht freiwillig zustande kam, hilft auch die beste Tracking-Einrichtung nichts.

Cookie-Banner-Design: Ablehnen-Button auf der ersten Ebene

Der wichtigste Punkt beim Cookie-Banner-Design ist die Gleichwertigkeit der Knöpfe. Ablehnen muss genauso einfach sein wie Zustimmen: auf derselben Ebene, mit einem Klick, in derselben Größe und Gestaltung. Der Europäische Datenschutzausschuss hat 2023 in seinem Bericht zur Arbeitsgruppe Cookie-Banner festgehalten, dass die große Mehrheit der Aufsichtsbehörden einen fehlenden Ablehnen-Knopf auf einer Ebene mit Zustimmen-Knopf als Verstoß ansieht. Gleichwertig heißt dabei nicht zwingend identisch. Beide Knöpfe können zum Beispiel als ausgefüllte Schaltflächen in derselben Größe erscheinen, oder beide als umrandete. Ein ausgefüllter Knopf neben einem reinen Textlink ist dagegen nicht gleichwertig.

Auch die Beschriftung zählt. „Alle akzeptieren“ und „Alle ablehnen“ sind klar. Formulierungen wie „Nur notwendige“ sind verständlich, solange sie dasselbe bewirken. Problematisch sind Beschriftungen, die Ablehnen als Nachteil darstellen, etwa „Nein, ich möchte keine bessere Erfahrung“, oder ein Knopf „Weiter“, der in Wahrheit zustimmt. Die Reihenfolge ist zweitrangig, solange beide Knöpfe gleich gut zu sehen sind.

Passend dazu: Meta Pixel (Facebook Pixel) im Google Tag Manager einrichten

Zwecke klar und knapp benennen

Besucher sollen verstehen, wozu sie zustimmen. Ein guter Bannertext nennt die Zwecke in einfachen Worten, etwa: „Wir nutzen Cookies und ähnliche Techniken, um zu messen, wie unsere Seite genutzt wird, und um Werbung auf anderen Plattformen zu zeigen und auszuwerten. Du kannst zustimmen, ablehnen oder einzelne Zwecke auswählen. Deine Wahl kannst du jederzeit ändern.“ Darunter folgen ein Link zur Datenschutzerklärung und zum Impressum, damit beide auch bei offenem Banner erreichbar bleiben.

In der zweiten Ebene stehen die einzelnen Zwecke, etwa Statistik und Marketing, jeweils mit einem Schalter, der standardmäßig aus ist. Zu jedem Zweck gehört eine kurze Liste der Dienste, die darunter fallen, zum Beispiel Google Analytics unter Statistik und Google Ads, Meta und LinkedIn unter Marketing. Unbedingt erforderliche Techniken wie das Speichern der Banner-Entscheidung selbst werden aufgeführt, brauchen aber keinen Schalter.

Genauso wichtig wie das erste Fragen ist der Weg zurück. Ein Widerruf muss nach Artikel 7 der DSGVO so einfach sein wie die Zustimmung. Das gelingt am besten mit einem dauerhaft sichtbaren Link, etwa „Cookie-Einstellungen“ im Fußbereich jeder Seite, oder mit einem kleinen Symbol am Bildschirmrand, das den Banner wieder öffnet. Frag außerdem neu nach, wenn sich etwas Wesentliches ändert, zum Beispiel wenn ein neuer Werbedienst dazukommt. Eine Einwilligung gilt nur für die Zwecke und Dienste, die zum Zeitpunkt der Entscheidung genannt waren.

Dark Patterns bei Cookie-Bannern erkennen

Dark Patterns bei Cookie-Bannern sind Gestaltungstricks, die Besucher zur Zustimmung drängen. Ob ein Banner fair ist, siehst du oft in wenigen Sekunden. Die folgenden Muster sind typisch und sollten in deinem Banner nicht vorkommen.

Ein schneller Test: Bitte jemanden, der deine Seite nicht kennt, auf dem Handy alle Cookies abzulehnen, und stoppe die Zeit. Muss die Person suchen, scrollen oder mehrfach tippen, während Zustimmen sofort geht, hat dein Banner ein Gestaltungsproblem. Prüfe danach in den Entwicklertools, ob nach dem Ablehnen wirklich keine Cookies von Google, Meta oder anderen Diensten gesetzt wurden.

Passend dazu: Borlabs Cookie mit Consent Mode v2 und Tag Manager verbinden

Lesbarkeit, Kontrast und mobile Darstellung

Die meisten Besucher sehen den Cookie-Banner zuerst auf dem Handy. Dort entscheidet sich, ob er fair wirkt und gut bedienbar ist. Für die Lesbarkeit gibt es einen klaren Maßstab: Die Web Content Accessibility Guidelines (WCAG) verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1. Ein grauer Text auf hellgrauem Grund erreicht das oft nicht. Prüfe deinen Banner auf dem Handy mit dieser kurzen Liste.

• Der Banner verdeckt den Inhalt nicht vollständig.
• Der Text ist ohne Zoomen lesbar.
• Beide Hauptknöpfe sind ohne Scrollen sichtbar.
• Die Knöpfe sind groß genug für den Daumen.
• Schrift und Hintergrund haben ausreichend Kontrast.

Ein halbtransparenter Schleier über der Seite ist nicht automatisch unfair, solange beide Entscheidungen gleich einfach sind. Er wird zum Problem, wenn die Seite gesperrt ist und Ablehnen schwieriger ist als Zustimmen. Denke auch an Menschen, die mit Tastatur oder Screenreader unterwegs sind: Der Banner sollte per Tabulator erreichbar sein, die Knöpfe brauchen sichtbaren Fokus und verständliche Beschriftungen. Und der Banner sollte schnell erscheinen. Ein Banner, der erst nach Sekunden aufpoppt und den Inhalt verschiebt, wirkt wie eine Störung.

Cookie-Banner-Beispiel: vorher und nachher

Ein Malerbetrieb hatte einen Banner mit einem grünen Knopf „Verstanden“ und einem kleinen Link „Einstellungen“. In den Einstellungen waren Statistik und Marketing vorausgewählt. Wer nichts tat und einfach weiter scrollte, bekam trotzdem Google Analytics und das Meta-Pixel. Die Zahlen in Google Analytics sahen gut aus, standen aber auf wackligem Fundament.

Der neue Banner zeigt auf der ersten Ebene drei gleich große Knöpfe: „Alle akzeptieren“, „Alle ablehnen“ und „Einstellungen“. Die Schalter in den Einstellungen sind standardmäßig aus, die Texte nennen Statistik und Marketing in klaren Worten. Im Fußbereich jeder Seite steht ein Link „Cookie-Einstellungen“. Der Google Consent Mode v2 bekommt zuerst den Standard „denied“ und nach dem Klick das passende Update. Die gemessenen Besucherzahlen sind danach niedriger, dafür beruhen sie auf echten Entscheidungen. Im erweiterten Consent Mode kann Google einen Teil der Lücken schätzen.

Ein fairer Banner, der schnell lädt

Der Cookie-Banner von Trackum ist so gebaut: „Alle ablehnen“ steht gleichwertig auf der ersten Ebene, Consent Mode v2 ist eingebaut, Texte gibt es in Deutsch und Englisch, und Einwilligungsnachweise werden in der EU ohne IP-Adresse gespeichert. Der Banner ist eine einzige Datei mit 6,6 KB und lädt nichts nach. In einer Messung auf einer leeren Testseite, mit Handy-Emulation, Slow 4G und Median aus 7 Läufen, war er nach 0,4 Sekunden sichtbar, Banner bekannter Anbieter nach 1,3 bis 4,3 Sekunden, mit 7 bis 15 Dateien und 150 bis 210 KB. Er kostet einmalig 50 € plus 4,90 € im Monat, im Abo für 19 € im Monat ist er enthalten. Alle Preise zzgl. MwSt.

Wenn du wissen willst, wie fair und wie wirksam dein jetziger Banner ist, hilft der Gratis-Check von Trackum für 0 €. Ein echter Browser öffnet deine Seite, lehnt ab, stimmt zu und prüft jeweils, welche Tags auslösen und welche Cookies gesetzt werden. Du siehst die Befunde mit Festpreis zum Beheben, ohne Anmeldung und in etwa zwei Minuten.