Bästa praxis för design av cookie-banners

Din cookie-banner är en av de första sakerna en besökare ser. Den formar deras uppfattning om ditt varumärke, deras förtroende för din verksamhet och – vilket är avgörande – huruvida deras samtycke är juridiskt giltigt. En välutformad banner uppnår regelefterlevnad utan friktion. En dåligt utformad banner driver antingen bort användare eller genererar samtycke som inte håller för granskning från tillsynsmyndigheter.

Den här guiden går igenom de designprinciper, UX-mönster och tillgänglighetskrav som skiljer en regelefterlevande, användarvänlig cookie-banner från en ansvarsrisk.

Första intrycket är viktigt

Forskning visar konsekvent att användare fattar beslut om cookie-banners inom två till tre sekunder. De flesta användare läser inte hela texten. De skannar efter igenkännbara mönster – knappar, reglage, bekant språk – och agerar på instinkt. Det innebär att bannerns visuella design väger lika tungt som dess juridiska innehåll.

Målet är att göra det rätta valet uppenbart och de tillgängliga alternativen tydliga vid en snabb blick. Om en användare måste fundera på vad hen ska göra har din design misslyckats.

Nyckelprinciper för första intrycket:

• Tydlighet framför fyndighet. En cookie-banner är inte platsen för kreativa formuleringar eller okonventionella gränssnitt. Använd bekanta mönster som användare känner igen.
• Visuell hierarki. De viktigaste elementen – syftesbeskrivningen och åtgärdsknapparna – bör vara de mest framträdande. Sekundära element (inställningslänk, policylänk) kan vara mindre framträdande men måste ändå vara synliga.
• Vitt utrymme. En trång banner känns överväldigande. Ge elementen utrymme att andas. Marginaler och avstånd signalerar professionalism och gör innehållet lättare att skanna.

Knapphierarki och visuell tyngd

Det är här de flesta cookie-banners brister i regelefterlevnad – och där de flesta böter utfärdas.

EDPB:s riktlinjer 05/2020 om samtycke, samt flera tillsynsåtgärder från CNIL, den italienska Garante och den danska Datatilsynet, har fastställt en tydlig princip: alternativet att avvisa cookies måste presenteras med lika stor framträdande som alternativet att acceptera dem.

Vad detta innebär i praktiken:

• Accept- och avvisningsknappar måste vara lika stora. En "Acceptera alla"-knapp som är 200 pixlar bred bredvid en textlänk för "Avvisa" är inte lika framträdande. Båda måste återges som knappar av jämförbar storlek.
• Båda knapparna måste ha jämförbar visuell tyngd. Om din acceptknapp är en fylld knapp med hög kontrast måste din avvisningsknapp också vara en fylld knapp – inte ett kantlinjeelement, en "ghost"-knapp eller ett rent textelement. CNIL bötfällde specifikt Google med 150 miljoner euro 2022, delvis för att avvisningsalternativet krävde mer ansträngning än att acceptera.
• Färg får inte manipulera. En klargrön "Acceptera"-knapp bredvid en grå "Avvisa"-knapp är ett mörkt mönster. Använd ditt varumärkes primärfärg för båda, eller neutrala färger för båda. Den visuella signalen får inte styra användaren mot ett visst val.
• Knapparnas ordning spelar mindre roll än du tror. Huruvida accept eller avvisa kommer först är inte den primära frågan – det är den visuella tyngden. Med det sagt kan placeringen av avvisningsknappen till vänster (först i läsordningen) signalera neutralitet.

Rekommenderat knappmönster

En regelefterlevande och användarvänlig banner använder vanligtvis tre åtgärder:

1. Avvisa alla – en fylld knapp
2. Acceptera alla – en fylld knapp av samma storlek och visuella tyngd
3. Hantera inställningar – en sekundär knapp eller länk (får vara mindre framträdande, eftersom den leder till ett andra lager)

Färg och kontrast

Färgval i cookie-banners tjänar två syften: varumärkeskonsekvens och läsbarhet. Ur ett regelefterlevnadsperspektiv är nyckelkraven:

• Textkontrast. All text i bannern måste uppfylla WCAG 2.1 AA-kraven på kontrast: ett minsta kontrastförhållande på 4,5:1 för normal text och 3:1 för stor text. Detta gäller syftesbeskrivningen, knapptexter och länkar.
• Knappkontrast. Knappbakgrunder måste ha tillräcklig kontrast mot bannerbakgrunden, och knapptexten måste ha tillräcklig kontrast mot knappbakgrunden. Dubbelkolla båda lagren.
• Länkarnas synlighet. Länkar till din cookiepolicy och integritetspolicy måste vara visuellt urskiljbara från omgivande text – vanligtvis genom färg och understrykning.
• Bakgrund. Bannerbakgrunden måste ge tillräcklig kontrast mot omgivningen. Om din banner läggs över sidinnehållet, se till att överlägget är tillräckligt ogenomskinligt så att bannertexten är läsbar oavsett det underliggande sidinnehållet.

Ett vanligt tillvägagångssätt är att använda en vit eller mycket ljus bakgrund för bannern, mörk text för läsbarhet och ditt varumärkes primärfärg för knapparna. Detta ger vanligtvis starka kontrastförhållanden och ett rent, professionellt utseende.

Text och mikrotext

Texten i din cookie-banner måste vara juridiskt tillräcklig, men den måste också vara läsbar för en icke-teknisk publik. GDPR skäl 39 kräver uttryckligen att information om databehandling ges på ett "klart och tydligt språk".

Rubrik

Håll den enkel och rak. Effektiva exempel:

• "Vi använder cookies"
• "Cookie-inställningar"
• "Dina integritetsval"

Undvik vagt eller undvikande språk som "Vi värnar om din integritet" – det ger användaren ingenting att agera på.

Syftesbeskrivning

Förklara i en till tre meningar vilka cookies du använder och varför. Var specifik:

"Vi använder nödvändiga cookies för att den här webbplatsen ska fungera. Vi vill också gärna använda analyscookies för att förstå hur du använder vår webbplats, och marknadsföringscookies för att visa dig relevant innehåll. Du kan acceptera alla, avvisa alla eller hantera dina inställningar."

Detta är koncist, specifikt och möjligt att agera på. Jämför det med det tyvärr vanliga:

"Den här webbplatsen använder cookies för att säkerställa att du får den bästa upplevelsen. Genom att fortsätta använda webbplatsen godkänner du vår användning av cookies."

Det andra exemplet är inte regelefterlevande: det antyder samtycke genom fortsatt surfning (inte giltigt enligt GDPR), specificerar inte syften och erbjuder inget val.

Knapptexter

Knapptexter bör vara otvetydiga:

• "Acceptera alla" och "Avvisa alla" – tydligt, parallellt språk
• "Hantera inställningar" eller "Anpassa" – för inställningsalternativet
• Undvik: "OK", "Uppfattat", "Fortsätt", "Jag förstår" – dessa är tvetydiga och utgör inte specifikt samtycke

Mobilanpassad design först

Över 60 % av all webbtrafik är mobil. Din cookie-banner kommer att ses på skärmar så små som 320 pixlar breda. Om du designar för desktop först och sedan anpassar för mobil kommer du nästan garanterat att sluta med en trång, oanvändbar mobilupplevelse.

Överväganden för mobildesign:

• Stapla knappar vertikalt. Horisontella knapprader som fungerar på desktop blir oläsliga på mobil. Stapla knapparna för acceptera, avvisa och inställningar vertikalt med fullbreddslayout.
• Tryckytor. Knappar måste vara minst 44x44 pixlar (WCAG 2.5.5, nivå AAA) eller åtminstone 24x24 pixlar (WCAG 2.5.8, nivå AA). På mobil är större alltid bättre – sikta på 48 pixlar eller mer i höjd.
• Skärmtäckning. På mobil kan en cookie-banner lätt täcka 60–80 % av skärmytan. Det är acceptabelt för en inledande uppmaning, men bannern får inte göra webbplatsen helt oanvändbar. Om du använder ett modalt överlägg, se till att användarna fortfarande kan identifiera att de befinner sig på rätt webbplats.
• Textstorlek. Gå aldrig under 14 pixlar för brödtext eller 12 pixlar för sekundär text på mobil. Användare ska inte behöva zooma för att läsa din banner.
• Rullningsbeteende. Om bannerinnehållet överstiger skärmhöjden på mobil (särskilt inställningspanelen) måste det gå att rulla inom bannern. Låt inte bannerinnehållet sträcka sig utanför skärmen utan möjlighet att nå accept-/avvisningsknapparna.

UX för kategoriväxlare

Inställningspanelen – det andra lagret i en lagerindelad banner – är där användarna gör detaljerade val. Standardmönstret använder kategoriväxlare: ett reglage per cookie-kategori (nödvändiga, analys, marknadsföring, inställningar), var och en med en etikett och beskrivning.

Designriktlinjer för reglage:

• Visuella tillstånd måste vara otvetydiga. På (samtycke givet) och av (samtycke undanhållet) måste vara tydligt urskiljbara genom färg, position och helst en etikett ("På" / "Av" eller en bock / ett kryss). Förlita dig inte på färg enbart – det fungerar inte för färgblinda användare.
• Nödvändiga cookies bör vara på och inaktiverade. Kategorin "Strikt nödvändiga" bör vara påslagen med reglaget visuellt inaktiverat (nedtonat eller med en låsikon), tillsammans med en notering som förklarar att dessa cookies inte kan stängas av eftersom de krävs för att webbplatsen ska fungera.
• Standardläget för icke-nödvändiga kategorier måste vara av. Förikryssade reglage utgör förvalt samtycke, vilket uttryckligen förbjuds av EU-domstolens Planet49-avgörande.
• Kategoribeskrivningar bör vara begripliga. "Analyscookies" är en etikett. "Hjälper oss att förstå hur besökare interagerar med vår webbplats genom att samla in anonym användningsdata" är en beskrivning. Tillhandahåll båda.
• Utökningsbara cookielistor. Under varje kategori, tillhandahåll en utökningsbar sektion som listar de enskilda cookiesarna: namn, leverantör, syfte och varaktighet. Denna transparensnivå förväntas i allt högre grad av dataskyddsmyndigheter.

Design av inställnings-/preferenspanelen

Inställningspanelen är en kritisk komponent. När en användare klickar på "Hantera inställningar" engagerar hen sig aktivt i sina integritetsval – det är den användare du vill behandla med störst respekt.

• Tydlig rubrik. "Cookie-inställningar" eller "Hantera din integritet" – gör det tydligt vad panelen är till för.
• Sparaknapp. En framträdande "Spara inställningar"-knapp som bekräftar användarens detaljerade val. Denna knapp måste vara lätt att nå utan överdriven rullning.
• Acceptera alla och Avvisa alla bör förbli tillgängliga. Även i inställningspanelen bör du erbjuda genvägsknappar för att acceptera alla eller avvisa alla. Vissa användare öppnar panelen av nyfikenhet men vill ändå ha en snabb åtgärd.
• Stängningsbeteende. Om en användare stänger inställningspanelen utan att spara, behandla detta som att inget samtycke getts – sätt inga icke-nödvändiga cookies. Fånga inte användare i panelen.

Varumärkesanpassning med bibehållen regelefterlevnad

Din cookie-banner bör kännas som en del av din webbplats, inte ett intrång från tredje part. De flesta plattformar för samtyckeshantering tillåter anpassning av färger, typsnitt, logotypplacering och text. Använd detta för att anpassa bannern till din varumärkesidentitet.

Varumärkesanpassningen får dock inte äventyra regelefterlevnaden:

• Du kan använda dina varumärkesfärger, men knapparna måste ändå ha lika visuell tyngd.
• Du kan använda ditt varumärkestypsnitt, men texten måste ändå vara läsbar i de storlekar som används.
• Du kan lägga till din logotyp, men den får inte trycka ner kritiskt innehåll (syftesbeskrivning, knappar) nedanför skärmens synliga del.
• Du kan anpassa texten, men den måste ändå vara specifik, korrekt och fullständig.

Tillgänglighetskrav för cookie-banners

En cookie-banner som inte är tillgänglig är inte regelefterlevande – varken enligt integritetslagstiftning (användaren kunde inte ge informerat samtycke om hen inte kunde uppfatta eller hantera bannern) eller enligt tillgänglighetslagstiftning (European Accessibility Act och nationella lagar mot diskriminering av personer med funktionsnedsättning).

WCAG AA-krav

• Tangentbordsnavigering. Varje interaktivt element – knappar, reglage, länkar, stängningsikoner – måste vara nåbart och hanterbart via tangentbord. Tabbordningen måste vara logisk (vanligtvis: syftestext, sedan avvisa, sedan acceptera, sedan hantera inställningar).
• Fokushantering. När bannern visas bör fokus flyttas till den (eller så bör den annonseras). När bannern stängs bör fokus återgå till huvudinnehållet. Fokusindikatorer måste vara synliga.
• Stöd för skärmläsare. Bannern måste använda lämpliga ARIA-roller och etiketter. Använd role="dialog" och aria-label="Cookie consent" för bannerbehållaren. Knappar måste ha tillgängliga namn. Reglagens tillstånd måste annonseras (aria-checked).
• Färgkontrast. All text och alla interaktiva element måste uppfylla WCAG 2.1 AA-kontrastförhållanden (4,5:1 för normal text, 3:1 för stor text och gränssnittskomponenter).
• Inga tangentbordsfällor. Användare måste kunna navigera bort från bannern. Även om ett modalt överlägg kan begränsa fokus till bannern (fokusinlåsning för modaler är ett accepterat mönster) måste det alltid finnas ett sätt att stänga bannern och nå sidinnehållet.
• Rörelse. Om bannern använder animationer (inglidning, intoning), respektera mediefrågan prefers-reduced-motion och tillhandahåll ett alternativ med reducerad eller ingen rörelse.

Testa din banners tillgänglighet

1. Navigera genom hela bannern med enbart tangentbordet (Tab, Enter, mellanslag, Escape).
2. Testa med en skärmläsare (VoiceOver på macOS, NVDA på Windows).
3. Verifiera färgkontrast med ett verktyg som WebAIM Contrast Checker.
4. Testa vid 200 % zoom – bannern bör förbli användbar.
5. Testa på mobil med VoiceOver eller TalkBack aktiverat.

Testning och förbättring

En cookie-banner är inte något du ställer in och sedan glömmer. Användarbeteende, regelverk och din webbplats cookie-användning förändras alla över tid. Planera för löpande testning:

• Samtyckesandelar. Följ upp hur stor andel av användarna som accepterar, avvisar eller anpassar. Om din avvisningsandel är misstänkt låg (under 10 %) kan din banner använda mörka mönster – avsiktligt eller inte.
• Interaktionsandelar. Följ upp hur många användare som interagerar med inställningspanelen. Lågt engagemang kan tyda på att alternativet "Hantera inställningar" inte är tillräckligt synligt.
• A/B-testning. Testa olika texter, knapptexter och layouter. Målet är inte att maximera samtyckesandelen – det är att maximera andelen informerade samtycken. En banner som fler användare engagerar sig i är en bättre banner.
• Regeländringar. Bevaka vägledning från dina relevanta dataskyddsmyndigheter. Tolkningar vid tillsyn utvecklas, och din banner bör utvecklas med dem.
• Cookie-granskningar. Skanna regelbundet din webbplats efter nya cookies. Om du lägger till ett nytt analysverktyg eller en marknadsföringspixel måste bannerns kategorier uppdateras för att spegla detta.

Passiro tillhandahåller automatiserad cookie-skanning och analys av samtyckesandelar för att hjälpa dig hålla din banner korrekt och effektiv. Läs mer om Passiros samtyckeshantering.