Why Cookie Banner Design Is a Compliance Issue
A cookie banner is not just a piece of UI. It is a legally required disclosure and consent mechanism under Article 5(3) of the ePrivacy Directive and, for most processing purposes, Articles 6 and 7 of the GDPR. Regulators now treat design choices - button colour, placement, wording - as compliance issues, not aesthetic ones.
The CNIL fined Google EUR 325 million and SHEIN EUR 150 million in September 2025, partly for consent interfaces that steered users toward acceptance. Austria's Supreme Court ruled that a coloured "Accept" button paired with a plain-text "Reject" link violates the principle of freely given consent. These are not edge cases. European data protection authorities have made it clear that manipulative banner design is a form of dark pattern, and they are enforcing against it.
Getting the design right matters for your visitors, too. A banner that blocks content, confuses people, or makes rejection unnecessarily difficult damages trust and increases bounce rates.
Button Parity: Equal Weight for Accept and Reject
The most critical design rule is button parity. Your "Accept All" and "Reject All" buttons must appear on the same layer, with the same size, shape, font weight, and visual prominence. The EDPB's cookie banner taskforce report confirmed that most European supervisory authorities consider a missing or downgraded reject option to be a breach of data protection law.
Hiding the reject option behind a "Manage Preferences" screen, while placing "Accept All" on the first layer, fails this test. So does using a bold, brightly coloured accept button next to a grey, underlined reject link.
A compliant approach looks like this:
| Element | Accept All | Reject All |
|---|---|---|
| Button type | Filled button | Filled button |
| Colour contrast | Meets WCAG AA (4.5:1) | Meets WCAG AA (4.5:1) |
| Size | Same height and padding | Same height and padding |
| Position | First layer | First layer |
| Font weight | Bold / semi-bold | Bold / semi-bold |
| Interaction effort | One click | One click |
The Swedish DPA (IMY) issued enforcement actions in April 2025 against companies that pre-selected non-essential cookie categories and hid refusal controls behind extra navigation layers. The Belgian DPA threatened daily fines of EUR 25,000 for continued non-compliance. Button parity is not optional.
Banner Placement and Layout
Where your banner appears on the page affects both compliance and user experience. The three common placements are bottom bar, centre modal, and corner widget. Each has trade-offs for Core Web Vitals, consent rates, and accessibility.
Bottom bars are the most widely used. They leave content visible and cause minimal Cumulative Layout Shift (CLS) when loaded asynchronously. Centre modals demand immediate attention but block content entirely. Corner widgets are the least intrusive but can be overlooked, raising questions about whether consent was genuinely informed.
Whichever placement you choose, avoid animations that pressure users into quick decisions. A smooth fade-in is acceptable. Bouncing, pulsing, or countdown timers are not.
The banner must not disappear on its own or treat scrolling as consent. Under the GDPR, consent requires a clear affirmative action. Passive continued browsing does not qualify.
Microcopy: What to Write on Your Banner
The text on your cookie banner should tell visitors three things: what cookies your site uses, why it uses them, and how visitors can control them. That is it. Keep sentences short and avoid legal jargon.
Bad microcopy reads like a terms-of-service document. Good microcopy reads like a brief, honest explanation from one person to another. Compare these two approaches:
| Approach | Example Text |
|---|---|
| Jargon-heavy (avoid) | "This website utilises cookies and similar technologies for the purposes of analytics, personalisation, and advertising in accordance with applicable data protection legislation." |
| Plain language (preferred) | "This site uses cookies for analytics and advertising. You can accept all, reject all, or choose which types to allow." |
Name the cookie categories clearly. Labels like "Performance" or "Targeting" mean little to most visitors. Instead, use phrases like "Analytics cookies (e.g. _ga)" or "Advertising cookies (e.g. _fbp)" so people understand what they are agreeing to.
Avoid framing rejection negatively. Copy like "You may experience a degraded experience" nudges users toward acceptance and risks being classified as a dark pattern. If rejecting cookies genuinely affects site function, state the specific effect without exaggeration.
WCAG 2.2 Accessibility Requirements
Since the European Accessibility Act took effect on 28 June 2025, cookie banners must meet WCAG 2.2 Level AA standards. A banner that cannot be operated by keyboard, read by a screen reader, or seen by someone with low vision is not just poor design - it may be unlawful.
The core requirements are:
- Keyboard navigation - every button, link, and toggle in the banner must be reachable and operable using only the keyboard. Tab order should follow a logical sequence: banner text, then reject, then accept, then manage preferences.
- Focus management - when the banner appears, keyboard focus should move to the banner. Users should be able to dismiss it before interacting with the rest of the page. Focus must not be trapped permanently.
- Colour contrast - all text must meet a minimum contrast ratio of 4.5:1 against its background. Button labels on coloured backgrounds must also pass this threshold.
- Screen reader support - the banner should use appropriate ARIA roles (e.g.
role="dialog"andaria-label) so assistive technology can announce its purpose and options. - Touch targets - on mobile, buttons must be at least 44 by 44 CSS pixels, per WCAG 2.2 Success Criterion 2.5.8.
Test your banner with a keyboard and a screen reader before deploying it. If your visitors cannot reject cookies without a mouse, your banner is not accessible, and your consent mechanism may be invalid.
Colour, Contrast, and Visual Hierarchy
Colour choices carry legal weight. A bright green "Accept" button next to a light grey "Reject" text is the most common dark pattern flagged by European DPAs.
Both buttons do not need to be identical in colour. You can use your brand's primary colour for one and a neutral colour for the other, provided both meet contrast requirements and neither is visually dominant. The test is whether a reasonable visitor would perceive both options as equally available.
Use a distinct banner background with clear borders so it is immediately visible. It must still meet the 4.5:1 contrast ratio.
Managing Preferences: The Second Layer
Beyond accept and reject, most regulations require a way for visitors to choose specific cookie categories. This is typically a "Manage Preferences" or "Customise" button on the first layer that opens a detailed settings panel.
In the preferences panel, group cookies by purpose: strictly necessary, analytics, functional, and advertising. Each category should have a clear toggle. Strictly necessary cookies should be toggled on and greyed out, since they do not require consent. All other categories must default to off.
Pre-ticked boxes or toggles set to "on" by default are a clear violation. The GDPR requires opt-in consent, not opt-out. The CNIL's December 2024 enforcement actions specifically targeted this pattern.
Each category should include a brief description and, ideally, a list of the specific cookies it covers. Naming real cookies - _ga, _gid, _fbp, PHPSESSID - builds transparency and matches what a cookie audit will reveal.
Consent Mode and Technical Implementation
Design is only half the equation. Your banner must actually block non-essential cookies until consent is granted. A visually perfect banner that loads _ga and _fbp before the visitor clicks anything is non-compliant, regardless of how well the buttons are balanced.
If you use Google services, Google Consent Mode v2 is now a practical requirement. It allows your tags to fire in a restricted, cookieless mode until consent is given, then switches to full tracking once accepted. This preserves some measurement capability while respecting user choice.
Use conditional script loading to ensure third-party tags only execute after the appropriate category has been approved. The type="text/plain" attribute on script tags, combined with your CMP's callback API, is a reliable method for blocking scripts until consent is recorded.
Testing and Verification
A banner that looks compliant may still fail in practice. After deployment, open your browser's developer tools, clear all cookies, reload, and reject all cookies. If any non-essential cookies appear - _ga, _fbp, or advertising cookies - your implementation has a gap.
Run a cookie scan to identify every cookie your site sets, then cross-reference against your banner's category list. Repeat this test after every significant site change, since new plugins or tracking pixels can introduce cookies that bypass your consent mechanism.
Frequently Asked Questions
Do the accept and reject buttons need to be the same colour?
They do not need to be identical in colour, but they must have equal visual prominence. Both buttons should be the same size, use similar font weight, and meet WCAG AA contrast requirements. A bright, filled accept button next to a pale, underlined reject link would fail the parity test applied by most European DPAs.
Can I use a cookie wall that blocks content until users accept?
Most European DPAs consider cookie walls non-compliant because consent given under duress is not freely given. The EDPB has stated that access to a service should not be conditional on cookie acceptance. Some pay-or-consent models have been tested, but the legal position remains restrictive in most jurisdictions.
Is scrolling or continued browsing valid consent under GDPR?
No. The GDPR and the EDPB's guidelines require a clear affirmative action, such as clicking a button. Scrolling, navigating to another page, or simply continuing to browse does not meet this standard.
Does my cookie banner need to be accessible to screen readers?
Yes. Under the European Accessibility Act (effective June 2025) and WCAG 2.2 Level AA, your cookie banner must work with screen readers, support keyboard navigation, and meet colour contrast ratios of at least 4.5:1. An inaccessible banner may render your consent mechanism invalid.
Where should I place my cookie banner on the page?
Bottom bars are the most common and cause the least layout shift. Centre modals demand more attention but block content. Corner widgets are subtle but risk being overlooked. Choose a placement that your visitors can clearly see and interact with without being forced to act immediately.
How many clicks should it take to reject all cookies?
One click, matching the effort required to accept all cookies. The CNIL, EDPB, and multiple national DPAs have confirmed that requiring extra steps to refuse cookies - such as navigating through a settings panel - constitutes a dark pattern and breaches consent requirements.
Take Control of Your Cookie Compliance
If you are not sure whether your current banner meets these standards, start with a free scan. Kukie.io detects, categorises, and helps you manage every cookie - so your visitors get a clear choice, and you stay on the right side of the law.
