Cookie Banner Design Best Practices

Your cookie banner is one of the first things a visitor sees. It shapes their perception of your brand, their trust in your business, and — critically — whether their consent is legally valid. A well-designed banner achieves compliance without friction. A poorly designed one either drives users away or produces consent that will not withstand regulatory scrutiny.

This guide covers the design principles, UX patterns, and accessibility requirements that separate a compliant, user-friendly cookie banner from a liability.

First Impressions Matter

Research consistently shows that users make decisions about cookie banners in two to three seconds. Most users do not read the full text. They scan for recognizable patterns — buttons, toggles, familiar language — and act on instinct. This means your banner's visual design carries as much weight as its legal content.

The goal is to make the right action obvious and the available choices clear at a glance. If a user has to think about what to do, your design has failed.

Key principles for first impressions:

• Clarity over cleverness. A cookie banner is not the place for creative copywriting or unconventional UI. Use familiar patterns that users recognize.
• Visual hierarchy. The most important elements — the purpose description and the action buttons — should be the most prominent. Secondary elements (settings link, policy link) can be less prominent but must still be visible.
• White space. A cramped banner feels overwhelming. Give elements room to breathe. Padding and spacing signal professionalism and make content easier to scan.

Button Hierarchy and Visual Weight

This is where most cookie banners fail compliance — and where most fines are issued.

The EDPB's Guidelines 05/2020 on consent, and multiple enforcement actions by the CNIL, the Italian Garante, and the Danish Datatilsynet, have established a clear principle: the option to reject cookies must be presented with equal prominence to the option to accept them.

What this means in practice:

• Accept and reject buttons must be the same size. An "Accept All" button that is 200 pixels wide next to a "Reject" text link is not equal prominence. Both must be rendered as buttons of comparable dimensions.
• Both buttons must use comparable visual weight. If your accept button is a solid, high-contrast button, your reject button must be a solid button too — not an outlined, ghost, or text-only element. The CNIL specifically fined Google EUR 150 million in 2022 partly because the reject option required more effort than accepting.
• Color must not manipulate. A bright green "Accept" button next to a gray "Reject" button is a dark pattern. Use your brand's primary color for both, or use neutral colors for both. The visual signal must not steer the user toward one choice.
• Button order matters less than you think. Whether accept or reject comes first is not the primary concern — visual weight is. That said, placing the reject button on the left (first in reading order) can signal neutrality.

Recommended Button Pattern

A compliant and user-friendly banner typically uses three actions:

1. Reject All — a solid button
2. Accept All — a solid button of equal size and visual weight
3. Manage Preferences — a secondary button or link (may be less prominent, as it leads to a second layer)

Color and Contrast

Color choices in cookie banners serve two purposes: brand consistency and readability. From a compliance perspective, the key requirements are:

• Text contrast. All text in the banner must meet WCAG 2.1 AA contrast requirements: a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. This applies to the purpose description, button labels, and links.
• Button contrast. Button backgrounds must have sufficient contrast against the banner background, and button text must have sufficient contrast against the button background. Double-check both layers.
• Link visibility. Links to your cookie policy and privacy policy must be visually distinguishable from surrounding text — typically through color and underline.
• Background. The banner background must provide sufficient contrast against its surroundings. If your banner overlays page content, ensure the overlay is opaque enough that the banner text is readable regardless of the underlying page content.

A common approach is to use a white or very light background for the banner, dark text for readability, and your brand's primary color for buttons. This typically produces strong contrast ratios and a clean, professional appearance.

Copy and Microcopy

The text in your cookie banner must be legally sufficient, but it must also be readable by a non-technical audience. GDPR Recital 39 explicitly requires that information about data processing be provided in "clear and plain language."

Headline

Keep it simple and direct. Effective examples:

• "We use cookies"
• "Cookie preferences"
• "Your privacy choices"

Avoid vague or evasive language like "We value your privacy" — this tells the user nothing actionable.

Purpose Description

In one to three sentences, explain what cookies you use and why. Be specific:

"We use essential cookies to make this site work. We'd also like to use analytics cookies to understand how you use our site, and marketing cookies to show you relevant content. You can accept all, reject all, or manage your preferences."

This is concise, specific, and actionable. Compare it to the unfortunately common:

"This website uses cookies to ensure you get the best experience. By continuing to use this site, you agree to our use of cookies."

The second example is non-compliant: it implies consent through continued browsing (not valid under GDPR), does not specify purposes, and does not offer a choice.

Button Labels

Button labels should be unambiguous:

• "Accept All" and "Reject All" — clear, parallel language
• "Manage Preferences" or "Customize" — for the settings option
• Avoid: "OK," "Got it," "Continue," "I understand" — these are ambiguous and do not constitute specific consent

Mobile-First Design

Over 60% of web traffic is mobile. Your cookie banner will be seen on screens as small as 320 pixels wide. If you design for desktop first and adapt for mobile, you will almost certainly end up with a cramped, unusable mobile experience.

Mobile design considerations:

• Stack buttons vertically. Horizontal button rows that work on desktop become unreadable on mobile. Stack accept, reject, and settings buttons vertically with full-width layout.
• Touch targets. Buttons must be at least 44x44 pixels (WCAG 2.5.5, Level AAA) or at minimum 24x24 pixels (WCAG 2.5.8, Level AA). On mobile, larger is always better — aim for 48 pixels or more in height.
• Screen coverage. On mobile, a cookie banner can easily cover 60-80% of the viewport. This is acceptable for an initial prompt, but the banner must not make the site completely unusable. If you use a modal overlay, ensure users can still identify that they are on the right site.
• Text size. Never go below 14 pixels for body text or 12 pixels for secondary text on mobile. Users should not need to zoom to read your banner.
• Scroll behavior. If your banner content exceeds the viewport height on mobile (especially the preferences panel), it must be scrollable within the banner. Do not let banner content extend beyond the screen with no way to reach the accept/reject buttons.

Category Toggles UX

The preferences panel — the second layer of a layered banner — is where users make granular choices. The standard pattern uses category toggles: one toggle per cookie category (necessary, analytics, marketing, preferences), each with a label and description.

Design guidelines for toggles:

• Visual states must be unambiguous. On (consent given) and off (consent withheld) must be clearly distinguishable through color, position, and ideally a label ("On" / "Off" or a checkmark / X). Do not rely on color alone — this fails for color-blind users.
• Necessary cookies should be on and disabled. The "Strictly Necessary" category should be toggled on with the toggle visually disabled (grayed out or with a lock icon), with a note explaining that these cookies cannot be disabled because they are required for the site to function.
• Default state for non-essential categories must be off. Pre-ticked toggles constitute pre-selected consent, which is explicitly prohibited by the CJEU's Planet49 ruling.
• Category descriptions should be human-readable. "Analytics cookies" is a label. "Help us understand how visitors interact with our website by collecting anonymous usage data" is a description. Provide both.
• Expandable cookie lists. Under each category, provide an expandable section that lists the individual cookies: name, provider, purpose, and duration. This level of transparency is increasingly expected by data protection authorities.

Settings/Preferences Panel Design

The preferences panel is a critical component. When a user clicks "Manage Preferences," they are actively engaging with their privacy choices — this is the user you want to treat with the most respect.

• Clear header. "Cookie Preferences" or "Manage Your Privacy" — make it obvious what this panel is for.
• Save button. A prominent "Save Preferences" button that confirms the user's granular choices. This button must be easily reachable without excessive scrolling.
• Accept All and Reject All should remain available. Even in the preferences panel, provide shortcut buttons to accept all or reject all. Some users open the panel out of curiosity but still want a quick action.
• Close behavior. If a user closes the preferences panel without saving, treat this as no consent given — do not set non-essential cookies. Do not trap users in the panel.

Brand Customization While Maintaining Compliance

Your cookie banner should feel like part of your website, not a third-party intrusion. Most consent management platforms allow customization of colors, fonts, logo placement, and copy. Use this to align the banner with your brand identity.

However, brand customization must not compromise compliance:

• You can use your brand colors, but buttons must still have equal visual weight.
• You can use your brand font, but text must still be readable at the sizes used.
• You can add your logo, but it must not push critical content (purpose description, buttons) below the fold.
• You can customize copy, but it must still be specific, accurate, and complete.

Accessibility Requirements for Cookie Banners

A cookie banner that is not accessible is not compliant — both under privacy law (the user could not give informed consent if they could not perceive or operate the banner) and under accessibility law (the European Accessibility Act and national disability discrimination laws).

WCAG AA Requirements

• Keyboard navigation. Every interactive element — buttons, toggles, links, close icons — must be reachable and operable via keyboard. Tab order must be logical (typically: purpose text, then reject, then accept, then manage preferences).
• Focus management. When the banner appears, focus should move to it (or it should be announced). When the banner is dismissed, focus should return to the main content. Focus indicators must be visible.
• Screen reader support. The banner must use appropriate ARIA roles and labels. Use role="dialog" and aria-label="Cookie consent" for the banner container. Buttons must have accessible names. Toggle states must be announced (aria-checked).
• Color contrast. All text and interactive elements must meet WCAG 2.1 AA contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components).
• No keyboard traps. Users must be able to navigate away from the banner. While a modal overlay may restrict focus to the banner (focus trapping for modals is an accepted pattern), there must always be a way to dismiss the banner and reach the page content.
• Motion. If the banner uses animations (slide-in, fade), respect the prefers-reduced-motion media query and provide a reduced or no-motion alternative.

Testing Your Banner's Accessibility

1. Navigate the entire banner using only the keyboard (Tab, Enter, Space, Escape).
2. Test with a screen reader (VoiceOver on macOS, NVDA on Windows).
3. Verify color contrast with a tool like the WebAIM Contrast Checker.
4. Test at 200% zoom — the banner should remain usable.
5. Test on mobile with VoiceOver or TalkBack enabled.

Testing and Iteration

A cookie banner is not a set-and-forget element. User behavior, regulations, and your site's cookie usage all change over time. Plan for ongoing testing:

• Consent rates. Track what percentage of users accept, reject, or customize. If your reject rate is suspiciously low (under 10%), your banner may be using dark patterns — whether intentionally or not.
• Interaction rates. Track how many users interact with the preferences panel. Low engagement may indicate that the "Manage Preferences" option is not visible enough.
• A/B testing. Test different copy, button labels, and layouts. The goal is not to maximize consent rates — it is to maximize informed consent rates. A banner that more users engage with is a better banner.
• Regulatory updates. Monitor guidance from your relevant data protection authorities. Enforcement interpretations evolve, and your banner should evolve with them.
• Cookie audits. Regularly scan your site for new cookies. If you add a new analytics tool or marketing pixel, your banner categories must be updated to reflect it.

Passiro provides automated cookie scanning and consent rate analytics to help you keep your banner accurate and effective. Learn more about Passiro's consent management.