Cookie banner design: fair choices, and when you need a banner at all
A good cookie banner offers accept and reject as equal choices on the first screen, explains in a sentence what the optional cookies do, and is easy to reopen later. Before designing one, check whether you need it: a site that sets only strictly necessary cookies, or none, has nothing to ask about.
Start with the question you're actually asking
A consent banner exists because European and UK rules on cookies and similar storage require consent before anything non-essential is stored on, or read from, a visitor's device. The UK regulator's guidance on cookies puts it plainly: tell people what you set and why, and get a clear positive action before setting anything that isn't strictly necessary for the service they asked for. A shopping basket or a sign-in session is exempt; advertising tags, most third-party analytics and social widgets are not.
So the first design decision is an audit, not a layout. List every cookie and every third-party request your pages make, note who sets it and why, and remove what you don't need. Replacing a third-party analytics script with cookie-free counting, and an embedded player with a plain link, can remove the need to ask anything at all. Our guide to whether you need a cookie banner walks through that audit. This page isn't legal advice; for a business with real risk, ask someone qualified.
What a fair banner looks like
European data protection authorities compared notes on banners in a 2023 taskforce, summarised by the French regulator in its report on the cookie banner taskforce. Most authorities agreed that a banner offering no way to refuse at the same level as the way to accept breaks the rules, and that designs which mislead people about their choice are judged case by case. In design terms that comes down to a short list.
- Accept and reject on the first layer, side by side, labelled in plain words such as "Accept optional cookies" and "Reject optional cookies". A "Settings" link alone is not a reject button.
- The same weight for both. Same size, same shape, same type weight. If accept is a filled button in the action colour and reject is grey text, the design is choosing for the visitor.
- Nothing pre-selected. Optional categories start switched off. Only the strictly necessary group can be shown as always on.
- One sentence of explanation, naming what the optional cookies are for: "We'd like to measure visits with a third-party analytics service." Link to the full cookie list.
- A way back. A "Cookie settings" link in the footer that reopens the choices, so changing your mind takes no more effort than giving consent.
Placement, size and the page behind it
Banners usually sit at the bottom of the screen or in a small panel near a corner. Both work if the panel stays compact. On a phone, a banner that fills half the screen hides the page the visitor came to read and pushes them to tap whichever button ends the interruption fastest. Keep it to a few lines of text and two buttons in a row, wrapping to a stack only when they don't fit.
- Bottom bar
- Familiar and out of the way. Leave enough padding below it for the phone's home indicator, and make sure it doesn't sit over a sticky call-to-action button.
- Corner panel
- Works well on wide screens. On narrow ones it becomes a bottom bar anyway, so design that state first.
- Full-screen wall
- Blocks the page until a choice is made. It gets an answer, but it's the heaviest option and is hard to justify for a brochure site.
Accessibility checks for the banner itself
- Reachable by keyboard early. Put the banner near the start of the reading order so keyboard and screen reader users meet it before they're deep in the page.
- Never hiding the focused element. WCAG's Focus Not Obscured criterion names sticky cookie banners specifically: if a visitor tabs to a link and the banner completely covers it, that fails. Add scroll padding equal to the banner's height, or make the banner modal while it's open.
- Readable text. The small print in banners is often light grey on white. Hold it to the same 4.5:1 contrast as body text, and see colour contrast for websites.
- Real buttons. Use button elements with visible focus states, at least as large as the site's other buttons, as described in button design for websites.
Common mistakes
- Setting analytics cookies on the first page view, before anyone has clicked.
- "By continuing to browse you accept cookies". Scrolling is not a clear positive action.
- A reject option buried two screens deep behind "Manage preferences".
- Asking again on every page because the refusal wasn't remembered.
How this relates to Anticode
Anticode doesn't add a consent banner to sites, because its pages don't set anything a banner would ask about. Visit counts on published sites are made without cookies and without third-party trackers, and design-engine pages run no scripts at all, so the usual analytics and advertising tags can't be pasted in later. Embeds such as video players and maps are blocked too; you link to them instead. That design of the platform is what makes a website without cookies the default rather than extra work. Two things still belong in your privacy policy: published pages load their font from Google Fonts, so each visitor's browser contacts Google's font servers even though no cookie is set, and an app build may save to the visitor's own browser storage, for example a game's progress or a tracker's entries.
Each site's generated Privacy Policy is written from what that site actually does, which is a starting point rather than legal advice. If you export a site as a Next.js project and add your own analytics or embeds there, the question comes back, and the checklist above applies.
Questions people ask
Does reject all have to be as visible as accept all?
Most European regulators expect a refusal option at the same level as acceptance, and a design that steers people towards accepting can be judged misleading. Giving both the same size and weight is the safe choice.
Do I need a cookie banner if my site uses no trackers?
If the site only sets strictly necessary cookies, or none, there's no optional storage to ask consent for. You should still explain what you do set in your privacy policy.
Can a cookie banner cover the whole page?
It can, but it's the most disruptive option, and it must still offer a fair choice. A compact bottom bar is usually enough.
Are pre-ticked boxes allowed?
No. Consent needs a clear positive action, so optional categories should start switched off.