How to design a cookie banner that is compliant and user-friendly

A compliant, user-friendly cookie banner shows clear choices on the first screen, typically “Accept all,” “Reject all” and “Customize,” with equal visual weight. It explains purposes in plain language, keeps non-essential cookies off until the visitor decides, works with a keyboard and screen reader, does not shift the page layout, and lets people change their mind later.

What should the first layer of a cookie banner include?

The first layer needs enough information for an informed choice and equally easy ways to accept or refuse. Everything else can live one click deeper.

Include these elements:

• A short purpose statement that names what you use cookies for, such as analytics and advertising, and notes when partners are involved.
• Three actions with equal prominence: accept all, reject all and customize, with the same size, style and position level.
• A link to your cookie policy for full details.
• The number of vendors, if you use the IAB Transparency & Consent Framework, because TCF v2.2 requires vendor counts in the first layer. See IAB TCF 2.2 explained.

Example first-layer copy:

We use cookies to keep this site working and, with your permission, to measure traffic and show relevant ads with our partners. You can accept all, reject all or choose by category, and change your mind anytime under “Cookie settings.”

Avoid a headline like “We value your privacy” followed by a single “OK” button. Copy that sounds reassuring but names no purposes informs no one. Most of the dark patterns regulators target are the inverse of the practices in this guide.

How should the settings layer work?

The settings layer lets visitors choose by purpose. Group cookies into a small number of categories, such as necessary, preferences, analytics and marketing, and keep every non-essential category off by default.

For each category, show a one-sentence description, a few concrete examples and the vendors involved. Mark the necessary category as “always active” instead of offering a toggle that does nothing. Offer “Save choices” alongside “Accept all” and “Reject all,” with none of them visually favored.

Keep it scannable. A long wall of vendor toggles makes an informed choice harder, not easier. Put vendor-level detail behind an expandable section for the people who want it.

Where should the banner go on the page?

There is no single compliant position. What matters is that the banner is noticeable, does not hide the refusal option and does not degrade the page.

• Bottom bar or corner box: less disruptive and suitable for most sites, as long as non-essential cookies stay off until a choice is made.
• Center modal: forces a decision before use, but it must still offer an equal refusal or it starts to work like a cookie wall.
• Mobile: avoid covering the whole screen, stack buttons at full width with identical styling, and keep them within thumb reach.

Performance is part of the design. Render the banner as a fixed-position overlay so it does not push content down, which would count against Cumulative Layout Shift (CLS). A large text banner can also end up measured as the page’s Largest Contentful Paint (LCP) element, and heavy click handlers can slow Interaction to Next Paint (INP). Our guide to cookie banners and Core Web Vitals covers the details.

How do I make a cookie banner accessible?

Build it from semantic HTML: real buttons, a labeled container, visible focus styles and sufficient color contrast. A visitor who cannot operate the banner cannot give or refuse consent.

<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Your cookie choices</h2>
  <p id="cc-desc">
    We use cookies for analytics and ads only if you allow it.
    <a href="/cookie-policy">Read our cookie policy</a>
  </p>
  <button type="button">Reject all</button>
  <button type="button">Customize</button>
  <button type="button">Accept all</button>
</div>

A few rules make the difference:

1. Use <button> elements, not clickable <div> elements, so keyboards and assistive technology work by default.
2. If the banner blocks the page, add aria-modal="true", move focus into it, keep focus there until a choice is made, then return focus to the page.
3. Meet WCAG AA contrast (4.5:1 for normal text) on every button, including reject.
4. Give each category control an accessible name and state, such as a labeled checkbox or an element with role="switch" and aria-checked.
5. Support zoom and small screens without hiding any of the three actions.

How should the banner behave after a choice?

Apply the choice immediately and remember it. If someone accepts analytics, load those tags right away. If they refuse, or later withdraw, stop loading them and remove the first-party cookies you control.

Then get the details right:

• Persistent access: add a “Cookie settings” link in the footer or a small floating button, because withdrawing consent must be as easy as giving it.
• Sensible re-prompting: do not show the banner on every visit. Ask again after a reasonable period or when your purposes or vendors change meaningfully.
• Regional behavior: EU and UK visitors need opt-in consent. California’s model is opt-out, with a “Do Not Sell or Share My Personal Information” link and respect for Global Privacy Control signals.
• Records: store what each visitor chose, when, and which banner version they saw, so you can demonstrate consent later.

What should I check before launch?

Run through this sequence before you ship a new or redesigned banner:

1. Confirm nothing non-essential loads before a choice, using a clean browser session.
2. Click “Reject all” and verify that analytics and ad requests stay blocked across pages.
3. Accept, then withdraw through the footer link, and verify the tags stop.
4. Complete the whole flow with only a keyboard, then with a screen reader.
5. Test on a small phone screen in portrait orientation.
6. Measure CLS, LCP and INP with the banner visible.
7. Check the banner in every language and region you serve.

Bottom line

A good cookie banner is honest, balanced and fast: equal choices, plain words, accessible controls, and behavior that matches what the buttons say. Design for the visitor who wants to refuse as carefully as for the one who accepts. Tools like Cookiesh can serve geo-targeted GDPR, CCPA and LGPD banners from a loader that causes no layout shift, so your team can focus on copy and design.

This article is general information, not legal advice. For decisions about your specific situation, consult a qualified privacy professional.