Best practices voor het ontwerp van cookiebanners

Uw cookiebanner is een van de eerste dingen die een bezoeker ziet. Deze bepaalt hun beeld van uw merk, hun vertrouwen in uw bedrijf en — cruciaal — of hun toestemming juridisch geldig is. Een goed ontworpen banner realiseert compliance zonder wrijving. Een slecht ontworpen banner jaagt gebruikers weg of levert toestemming op die een toetsing door toezichthouders niet doorstaat.

Deze gids behandelt de ontwerpprincipes, UX-patronen en toegankelijkheidseisen die een compliant, gebruiksvriendelijke cookiebanner onderscheiden van een aansprakelijkheidsrisico.

De eerste indruk telt

Onderzoek toont steevast aan dat gebruikers binnen twee à drie seconden een beslissing nemen over cookiebanners. De meeste gebruikers lezen de volledige tekst niet. Ze scannen op herkenbare patronen — knoppen, schakelaars, vertrouwde formuleringen — en handelen op hun intuïtie. Dat betekent dat het visuele ontwerp van uw banner net zo zwaar weegt als de juridische inhoud.

Het doel is om de juiste actie voor de hand liggend te maken en de beschikbare keuzes in één oogopslag duidelijk te maken. Als een gebruiker moet nadenken over wat hij moet doen, is uw ontwerp mislukt.

Belangrijke principes voor de eerste indruk:

• Duidelijkheid boven vernuft. Een cookiebanner is niet de plek voor creatieve teksten of onconventionele UI. Gebruik vertrouwde patronen die gebruikers herkennen.
• Visuele hiërarchie. De belangrijkste elementen — de omschrijving van het doel en de actieknoppen — moeten het meest prominent zijn. Secundaire elementen (instellingenlink, beleidslink) mogen minder prominent zijn, maar moeten wel zichtbaar blijven.
• Witruimte. Een krappe banner voelt overweldigend. Geef elementen ademruimte. Padding en witruimte stralen professionaliteit uit en maken de inhoud makkelijker te scannen.

Knophiërarchie en visueel gewicht

Dit is waar de meeste cookiebanners de mist ingaan op het gebied van compliance — en waar de meeste boetes worden uitgedeeld.

De EDPB-richtlijnen 05/2020 over toestemming, en meerdere handhavingsacties van de CNIL, de Italiaanse Garante en de Deense Datatilsynet, hebben een duidelijk principe vastgelegd: de optie om cookies te weigeren moet met dezelfde prominentie worden gepresenteerd als de optie om ze te accepteren.

Wat dit in de praktijk betekent:

• Accepteer- en weigerknoppen moeten dezelfde grootte hebben. Een knop "Alles accepteren" die 200 pixels breed is naast een tekstlink "Weigeren" is geen gelijke prominentie. Beide moeten worden weergegeven als knoppen met vergelijkbare afmetingen.
• Beide knoppen moeten vergelijkbaar visueel gewicht hebben. Als uw accepteerknop een effen, contrastrijke knop is, moet uw weigerknop dat ook zijn — niet een omlijnde, transparante of tekst-only variant. De CNIL beboette Google in 2022 specifiek met 150 miljoen euro, mede omdat weigeren meer moeite kostte dan accepteren.
• Kleur mag niet manipuleren. Een felgroene knop "Accepteren" naast een grijze knop "Weigeren" is een dark pattern. Gebruik de primaire kleur van uw merk voor beide, of neutrale kleuren voor beide. Het visuele signaal mag de gebruiker niet naar één keuze sturen.
• De volgorde van de knoppen doet er minder toe dan u denkt. Of accepteren of weigeren vooraan staat is niet de hoofdzorg — het visuele gewicht is dat wel. Dat gezegd hebbende: de weigerknop links plaatsen (eerst in de leesvolgorde) kan neutraliteit uitstralen.

Aanbevolen knoppatroon

Een compliant en gebruiksvriendelijke banner gebruikt doorgaans drie acties:

1. Alles weigeren — een effen knop
2. Alles accepteren — een effen knop van dezelfde grootte en met hetzelfde visuele gewicht
3. Voorkeuren beheren — een secundaire knop of link (mag minder prominent zijn, aangezien deze naar een tweede laag leidt)

Kleur en contrast

Kleurkeuzes in cookiebanners dienen twee doelen: merkconsistentie en leesbaarheid. Vanuit compliance-oogpunt zijn de belangrijkste eisen:

• Tekstcontrast. Alle tekst in de banner moet voldoen aan de contrasteisen van WCAG 2.1 AA: een minimale contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. Dit geldt voor de doelomschrijving, knoplabels en links.
• Knopcontrast. Knopachtergronden moeten voldoende contrast hebben met de bannerachtergrond, en knoptekst moet voldoende contrast hebben met de knopachtergrond. Controleer beide lagen goed.
• Zichtbaarheid van links. Links naar uw cookiebeleid en privacybeleid moeten visueel te onderscheiden zijn van de omringende tekst — doorgaans via kleur en onderstreping.
• Achtergrond. De bannerachtergrond moet voldoende contrast bieden ten opzichte van de omgeving. Als uw banner over de pagina-inhoud ligt, zorg er dan voor dat de overlay ondoorzichtig genoeg is zodat de bannertekst leesbaar is, ongeacht de onderliggende pagina-inhoud.

Een gangbare aanpak is een witte of zeer lichte achtergrond voor de banner, donkere tekst voor de leesbaarheid en de primaire kleur van uw merk voor de knoppen. Dit levert doorgaans sterke contrastverhoudingen en een strak, professioneel uiterlijk op.

Tekst en microcopy

De tekst in uw cookiebanner moet juridisch toereikend zijn, maar ook leesbaar voor een niet-technisch publiek. Overweging 39 van de GDPR vereist expliciet dat informatie over gegevensverwerking wordt verstrekt in "duidelijke en eenvoudige taal".

Kop

Houd het simpel en direct. Effectieve voorbeelden:

• "We gebruiken cookies"
• "Cookievoorkeuren"
• "Uw privacykeuzes"

Vermijd vage of ontwijkende taal zoals "Wij hechten waarde aan uw privacy" — daar heeft de gebruiker niets aan.

Doelomschrijving

Leg in één tot drie zinnen uit welke cookies u gebruikt en waarom. Wees specifiek:

"We gebruiken essentiële cookies om deze site te laten werken. Daarnaast willen we graag analytische cookies gebruiken om te begrijpen hoe u onze site gebruikt, en marketingcookies om u relevante content te tonen. U kunt alles accepteren, alles weigeren of uw voorkeuren beheren."

Dit is beknopt, specifiek en actiegericht. Vergelijk het met het helaas veelvoorkomende:

"Deze website gebruikt cookies om ervoor te zorgen dat u de beste ervaring krijgt. Door deze site te blijven gebruiken, gaat u akkoord met ons gebruik van cookies."

Het tweede voorbeeld is niet-compliant: het veronderstelt toestemming door verder te browsen (niet geldig onder de GDPR), specificeert geen doeleinden en biedt geen keuze.

Knoplabels

Knoplabels moeten ondubbelzinnig zijn:

• "Alles accepteren" en "Alles weigeren" — duidelijke, parallelle formulering
• "Voorkeuren beheren" of "Aanpassen" — voor de instellingenoptie
• Vermijd: "OK", "Begrepen", "Doorgaan", "Ik begrijp het" — deze zijn ambigu en vormen geen specifieke toestemming

Mobile-first ontwerp

Meer dan 60% van het webverkeer is mobiel. Uw cookiebanner wordt bekeken op schermen van slechts 320 pixels breed. Als u eerst voor desktop ontwerpt en daarna voor mobiel aanpast, eindigt u vrijwel zeker met een krappe, onbruikbare mobiele ervaring.

Overwegingen voor mobiel ontwerp:

• Stapel knoppen verticaal. Horizontale knoprijen die op desktop werken, worden op mobiel onleesbaar. Stapel de accepteer-, weiger- en instellingenknoppen verticaal, over de volle breedte.
• Aanraakgebieden. Knoppen moeten minimaal 44x44 pixels zijn (WCAG 2.5.5, niveau AAA) of ten minste 24x24 pixels (WCAG 2.5.8, niveau AA). Op mobiel is groter altijd beter — streef naar 48 pixels of meer in hoogte.
• Schermbedekking. Op mobiel kan een cookiebanner al snel 60-80% van de viewport bedekken. Dat is acceptabel voor een eerste melding, maar de banner mag de site niet volledig onbruikbaar maken. Als u een modale overlay gebruikt, zorg er dan voor dat gebruikers nog steeds kunnen zien dat ze op de juiste site zijn.
• Tekstgrootte. Ga op mobiel nooit onder 14 pixels voor bodytekst of 12 pixels voor secundaire tekst. Gebruikers zouden niet moeten hoeven inzoomen om uw banner te lezen.
• Scrollgedrag. Als uw bannerinhoud de viewporthoogte op mobiel overschrijdt (vooral het voorkeurenpaneel), moet deze binnen de banner scrollbaar zijn. Laat bannerinhoud niet buiten het scherm uitsteken zonder dat de accepteer-/weigerknoppen bereikbaar zijn.

UX van categorieschakelaars

Het voorkeurenpaneel — de tweede laag van een gelaagde banner — is waar gebruikers gedetailleerde keuzes maken. Het standaardpatroon gebruikt categorieschakelaars: één schakelaar per cookiecategorie (noodzakelijk, analytisch, marketing, voorkeuren), elk met een label en beschrijving.

Ontwerprichtlijnen voor schakelaars:

• Visuele toestanden moeten ondubbelzinnig zijn. Aan (toestemming gegeven) en uit (toestemming onthouden) moeten duidelijk te onderscheiden zijn via kleur, positie en idealiter een label ("Aan" / "Uit" of een vinkje / kruisje). Vertrouw niet alleen op kleur — dat werkt niet voor kleurenblinde gebruikers.
• Noodzakelijke cookies moeten aan en uitgeschakeld staan. De categorie "Strikt noodzakelijk" moet ingeschakeld zijn met de schakelaar visueel uitgeschakeld (grijs of met een slotpictogram), met een notitie die uitlegt dat deze cookies niet kunnen worden uitgeschakeld omdat ze vereist zijn voor het functioneren van de site.
• De standaardtoestand voor niet-essentiële categorieën moet uit zijn. Vooraf aangevinkte schakelaars vormen vooraf geselecteerde toestemming, wat expliciet verboden is door de Planet49-uitspraak van het HvJEU.
• Categoriebeschrijvingen moeten begrijpelijk zijn. "Analytische cookies" is een label. "Helpen ons te begrijpen hoe bezoekers omgaan met onze website door anonieme gebruiksgegevens te verzamelen" is een beschrijving. Bied beide.
• Uitklapbare cookielijsten. Bied onder elke categorie een uitklapbaar gedeelte met de afzonderlijke cookies: naam, aanbieder, doel en looptijd. Dit niveau van transparantie wordt steeds meer verwacht door gegevensbeschermingsautoriteiten.

Ontwerp van het instellingen-/voorkeurenpaneel

Het voorkeurenpaneel is een cruciaal onderdeel. Wanneer een gebruiker op "Voorkeuren beheren" klikt, is hij actief bezig met zijn privacykeuzes — dit is de gebruiker die u met de meeste zorg wilt behandelen.

• Duidelijke kop. "Cookievoorkeuren" of "Beheer uw privacy" — maak duidelijk waar dit paneel voor is.
• Opslaanknop. Een prominente knop "Voorkeuren opslaan" die de gedetailleerde keuzes van de gebruiker bevestigt. Deze knop moet makkelijk bereikbaar zijn zonder overmatig scrollen.
• Alles accepteren en alles weigeren moeten beschikbaar blijven. Bied ook in het voorkeurenpaneel snelkoppelingen om alles te accepteren of alles te weigeren. Sommige gebruikers openen het paneel uit nieuwsgierigheid, maar willen toch een snelle actie.
• Sluitgedrag. Als een gebruiker het voorkeurenpaneel sluit zonder op te slaan, behandel dit dan als geen toestemming gegeven — plaats geen niet-essentiële cookies. Sluit gebruikers niet op in het paneel.

Merkaanpassing met behoud van compliance

Uw cookiebanner moet aanvoelen als onderdeel van uw website, niet als een indringing van een derde partij. De meeste consent management-platforms bieden aanpassing van kleuren, lettertypen, logoplaatsing en tekst. Gebruik dit om de banner af te stemmen op uw merkidentiteit.

Merkaanpassing mag echter geen afbreuk doen aan compliance:

• U mag uw merkkleuren gebruiken, maar knoppen moeten nog steeds gelijk visueel gewicht hebben.
• U mag uw merklettertype gebruiken, maar tekst moet in de gebruikte grootte leesbaar blijven.
• U mag uw logo toevoegen, maar het mag cruciale content (doelomschrijving, knoppen) niet onder de vouw duwen.
• U mag de tekst aanpassen, maar deze moet specifiek, accuraat en volledig blijven.

Toegankelijkheidseisen voor cookiebanners

Een cookiebanner die niet toegankelijk is, is niet compliant — zowel onder de privacywetgeving (de gebruiker kan geen geïnformeerde toestemming geven als hij de banner niet kan waarnemen of bedienen) als onder de toegankelijkheidswetgeving (de European Accessibility Act en nationale wetten tegen discriminatie van mensen met een handicap).

WCAG AA-eisen

• Toetsenbordnavigatie. Elk interactief element — knoppen, schakelaars, links, sluitpictogrammen — moet bereikbaar en bedienbaar zijn via het toetsenbord. De tab-volgorde moet logisch zijn (doorgaans: doeltekst, dan weigeren, dan accepteren, dan voorkeuren beheren).
• Focusbeheer. Wanneer de banner verschijnt, moet de focus ernaartoe gaan (of moet deze worden aangekondigd). Wanneer de banner wordt gesloten, moet de focus terugkeren naar de hoofdinhoud. Focusindicatoren moeten zichtbaar zijn.
• Ondersteuning voor schermlezers. De banner moet geschikte ARIA-rollen en -labels gebruiken. Gebruik role="dialog" en aria-label="Cookie consent" voor de bannercontainer. Knoppen moeten toegankelijke namen hebben. Schakelaartoestanden moeten worden aangekondigd (aria-checked).
• Kleurcontrast. Alle tekst en interactieve elementen moeten voldoen aan de WCAG 2.1 AA-contrastverhoudingen (4,5:1 voor normale tekst, 3:1 voor grote tekst en UI-componenten).
• Geen toetsenbordvallen. Gebruikers moeten weg kunnen navigeren van de banner. Hoewel een modale overlay de focus tot de banner mag beperken (focus trapping voor modals is een geaccepteerd patroon), moet er altijd een manier zijn om de banner te sluiten en de pagina-inhoud te bereiken.
• Beweging. Als de banner animaties gebruikt (inschuiven, faden), respecteer dan de media query prefers-reduced-motion en bied een alternatief met beperkte of geen beweging.

De toegankelijkheid van uw banner testen

1. Navigeer door de volledige banner met alleen het toetsenbord (Tab, Enter, Spatie, Escape).
2. Test met een schermlezer (VoiceOver op macOS, NVDA op Windows).
3. Controleer het kleurcontrast met een tool zoals de WebAIM Contrast Checker.
4. Test bij 200% zoom — de banner moet bruikbaar blijven.
5. Test op mobiel met VoiceOver of TalkBack ingeschakeld.

Testen en itereren

Een cookiebanner is geen set-and-forget-element. Gebruikersgedrag, regelgeving en het cookiegebruik van uw site veranderen allemaal in de loop van de tijd. Plan doorlopend testen in:

• Toestemmingspercentages. Houd bij welk percentage gebruikers accepteert, weigert of aanpast. Als uw weigerpercentage verdacht laag is (onder 10%), gebruikt uw banner mogelijk dark patterns — al dan niet met opzet.
• Interactiepercentages. Houd bij hoeveel gebruikers interactie hebben met het voorkeurenpaneel. Lage betrokkenheid kan erop wijzen dat de optie "Voorkeuren beheren" niet zichtbaar genoeg is.
• A/B-testen. Test verschillende teksten, knoplabels en indelingen. Het doel is niet om de toestemmingspercentages te maximaliseren — het is om de percentages geïnformeerde toestemming te maximaliseren. Een banner waarmee meer gebruikers interactie hebben, is een betere banner.
• Wijzigingen in regelgeving. Volg de richtlijnen van de voor u relevante gegevensbeschermingsautoriteiten. Handhavingsinterpretaties evolueren, en uw banner moet daarin meegroeien.
• Cookie-audits. Scan uw site regelmatig op nieuwe cookies. Als u een nieuwe analysetool of marketingpixel toevoegt, moeten uw bannercategorieën worden bijgewerkt om dit weer te geven.

Passiro biedt geautomatiseerd cookiescannen en analyses van toestemmingspercentages om u te helpen uw banner accuraat en effectief te houden. Lees meer over het consent management van Passiro.