Cookie Banner Design: How to Build a Compliant, User Friendly Banner

This guide covers the design side only. In other words, we focus on where the banner sits, how the buttons look, how long the copy runs and how it behaves on a small screen. How tags pass the consent signal to analytics and ad tools is a separate technical topic. We covered that in our guide on whether Google Consent Mode v2 is mandatory, so we will not repeat it here.

One important note: this article is not legal advice. Ask a lawyer which legal basis applies to the cookies on your own site. As Talha Aslan and team, we share the practical problems we see in web design projects and the general direction of official guidance.

Why is a cookie banner both a legal and a design problem?

Many businesses treat the cookie banner as a legal plugin and install it last. Yet the banner is the very first interaction a visitor has with your site. So if its design is weak, the first impression is weak too.

On the legal side, the expectation is simple. Visitors should give consent freely, with enough information and through a clear action. On the design side, the question is whether visitors can understand and make that choice easily. Both sides point to the same place. A clear, balanced banner lowers compliance risk and builds trust at once.

On the other hand, a careless banner causes real harm:

• It covers half of the mobile screen, and visitors leave before they see any content.
• It hides the Reject option, which damages trust and compliance.
• It pops in after the page loads and shifts the layout.
• Long legal text buries visitors, and nobody reads it.

In short, cookie banner design looks like a small interface detail. In practice, it has a direct effect on conversions, accessibility and trust.

What do privacy regulators generally expect from banner design?

In the European Union, the ePrivacy rules and the GDPR shape how sites ask for cookie consent. Turkey's data protection authority, KVKK, also published a dedicated cookie guide. The details differ by country, so always check the current text with an official source and a qualified lawyer.

Still, a few principles appear again and again in official guidance. Consent for non-essential cookies should come before those cookies run. Pre-ticked boxes do not count as valid consent. Regulators also warn against interfaces that push visitors toward one answer.

For a designer, these principles turn into a short list of practical rules:

1. Non-essential cookies stay off until the visitor agrees.
2. Accept and Reject sit on the same layer with the same weight.
3. Checkboxes start empty.
4. Visitors can change their choice at any time.
5. The copy explains in plain words what the cookies do.

Again, the legal reading of these rules belongs to a specialist. Here we only discuss how they show up on screen. For the broader compliance picture, see our guide on how to build a GDPR compliant website.

Bottom bar or center modal: which position works better?

Position decides how much attention the banner gets and how much content it blocks. There are three common options: a thin bar fixed to the bottom of the page, a small box in a corner and a modal window in the middle of the screen.

A bottom bar blocks the least content. Also, visitors can start reading while the bar stays on screen. However, on some sites people browse for a long time without noticing it, so the decision stays open.

Meanwhile, a center modal asks for the decision right away. It grabs attention, but it covers the content and can feel like a wall. On mobile, a modal often hides the entire first screen.

A corner box offers a middle path. It works well on desktop; on narrow screens, though, it usually needs to turn into a full width bottom bar.

From our field experience, a bottom bar or corner box tends to give the most balanced result on most business sites. Content heavy sites usually do best with a compact bottom bar. Treat this as a starting point rather than a rule. Your own content structure and visitor behavior should make the final call.

How do the banner positions compare side by side?

The table below sums up the design strengths and weaknesses of each position. These are general tendencies, and your results may differ.

Keep one point in mind as you read the table. High visibility does not make the modal the right choice by default. Forcing visitors to decide before they see any content can raise bounce risk, especially for paid traffic. So if you do pick a modal, keep it short and avoid blacking out the page behind it.

Why should Reject and Accept look equal?

Equal prominence is the core principle of banner design. Visitors should see both options and pick either one with the same ease. If one button is bright and large while the other is a faint text link, the interface is nudging people in one direction.

In practice, equality means:

• Both buttons share the same size and sit on the same row.
• Even if one uses a solid fill and the other an outline, both have readable contrast.
• Reject does not hide on a second layer such as a settings panel.
• Labels stay plain, with direct verbs like Accept and Reject.

For example, in a sample scenario the Accept button could use your brand color as a solid fill. Reject would then match its size, with a white background and a dark border. This layout keeps your brand identity while leaving both choices in plain sight.

You can also add a third button such as Settings or Manage preferences. That button usually looks a little quieter than the other two, because it serves the details rather than the main decision. For more on button labels, read our guide on UX writing and website microcopy.

What is a dark pattern, and how does it appear in cookie banners?

A dark pattern is an interface trick that steers users toward a choice they did not fully intend. Cookie banners use them often, and they harm both trust and compliance.

These are the dark patterns we run into most in banner design:

1. Placing Reject only inside the settings panel.
2. Styling Reject as low contrast gray text.
3. Pre-ticking boxes in the settings panel.
4. Showing the banner again on every page after someone rejects.
5. Using confusing double negatives.
6. Treating the close icon as consent.

Some of these tricks may lift the consent rate in the short term. However, regulators look at such nudges more and more closely, so the risk can outweigh the gain. Moreover, once visitors feel tricked, their trust in the brand drops.

Put simply, good cookie banner design leaves dark patterns out completely. The goal is not a high consent rate. The goal is a real, informed choice.

How do you keep a cookie banner from covering content on mobile?

Space matters even more on a phone, so plan for it first. A box that looks balanced on desktop can take up half of a mobile screen.

Google also warns about intrusive interstitials in mobile search. Google Search Central's page on intrusive interstitials treats dialogs shown for legal obligations separately. Even so, it recommends using them responsibly and without blocking content more than needed.

Our practical rules for mobile:

• Limit the banner to a small part of the screen.
• If the buttons do not fit side by side, stack them at equal width.
• Keep the copy short and move details to the settings layer.
• Place the buttons in the lower area that a thumb reaches easily.
• If you have a sticky bottom menu, make sure the banner does not overlap it.

We explain thumb reach in our thumb zone guide and the wider approach in our article on mobile first design. If you start banner design with these two views in mind, you will not need to shrink it later.

Should cookie banner design avoid layout shifts?

Yes. If the banner pushes content down after the page loads, visitors lose their place and may even tap the wrong element. Google measures these unexpected moves with Cumulative Layout Shift, or CLS.

web.dev's explanation of CLS describes layout shifts that happen without user input as a problem. A cookie banner carries exactly this risk, because many sites inject it with a script after the first paint.

Two approaches prevent the shift. First, design the banner as a fixed overlay that sits on top of the content, so nothing underneath moves. Second, if the banner must live in the page flow, reserve its space from the start.

Also keep the banner script light. A heavy consent tool can slow down the first load. For the full set of Core Web Vitals, see our guide to LCP, INP and CLS.

How long should the banner copy be?

Banner copy should be short enough to read and understand in a few seconds. Nobody reads a long legal paragraph, so it fails to inform anyone.

In practice, good banner copy briefly answers three questions. Which kinds of cookies do you use? What do they do? What can the visitor choose? The details belong in the cookie policy and the settings layer.

As a sample scenario, this skeleton works well. One sentence states the purpose, a second one reminds people of their choice, and then the policy link follows. For instance: We use essential cookies to run the site, and extra cookies for measurement and a better experience only if you allow them. You can change your choice at any time.

Keep these rules in mind as you write:

• Replace technical terms with plain words.
• Speak directly, using we and you.
• Avoid scary or guilt tripping phrases.
• Give the policy link a descriptive label instead of a vague one.

How should you design the settings layer?

The settings layer is the second screen, where visitors pick cookie categories one by one. Since the banner stays short, the details live here. That makes its layout just as important as the banner itself.

In practice, most sites group cookies into essential, analytics, functional and marketing categories. The essential category stays on and locked, while the others start switched off. Next to each category, add a one or two sentence description.

Points to watch in this layer:

1. Show toggle states with text as well as color.
2. Place Reject all and Save choices next to each other.
3. Put long cookie lists into collapsible sections.
4. Make sure people can open and close the layer with a keyboard.

That way, visitors who want detail can dig in, and everyone else can finish with the two buttons on the banner. For example, in a sample scenario a visitor who only wants to allow analytics should be able to save that choice in three taps.

Where should the link to change preferences go?

Consent is not a one time event. Visitors may change their minds, so they need an easy way back to their preferences. This matches the general direction of official guidance, and it also reflects good user experience.

Specifically, the most common and clear solution is a link in the footer of every page, with a plain label such as Cookie preferences. That link reopens the settings layer and shows the current choices.

Some sites use a small persistent icon in a corner instead. That works too. However, the icon should not cover content, and it needs an accessible text label. Otherwise, screen reader users cannot tell what it does.

It also helps to add a link or button inside the cookie policy page that opens the same settings. Then people who read the policy can update their choice right away.

How do you make a cookie banner accessible?

A cookie banner has to work for everyone, including keyboard users, screen reader users and people with low vision. An inaccessible banner can lock some visitors out of the whole site.

The W3C's WCAG guidelines offer a solid framework here. For example, the WCAG 2.2 Focus Not Obscured criterion asks that a focused element not be entirely hidden by author created content such as sticky bars. Fixed bottom banners can break this criterion easily.

What to check for an accessible banner:

• Text and button contrast should meet the minimum; you can measure it with our color contrast checker.
• Keyboard users should reach the buttons in a logical order.
• If you use a modal, keep focus inside it and return focus when it closes.
• Screen readers should announce button labels clearly.

For the general principles of accessibility, see our guide to web accessibility and WCAG standards.

What does an on brand cookie banner look like?

A cookie banner should not look like an add-on that has nothing to do with the rest of the site. The default themes of ready made consent tools rarely match your typeface, colors or corner radius. As a result, the first moment on your site feels unpolished.

Fortunately, a few simple steps fix this. First, carry your main typeface and body text size into the banner. Then match the button styles to the other buttons on your site. Finally, take corner radius, shadow and spacing values from your design system.

That said, brand fit should never override the equality principle. For example, if only Accept gets your brand color, give Reject the same size and enough contrast. That way the banner feels like part of your brand and still stays balanced.

On sites with a dark theme, the banner should follow that theme too. A bright white box on a dark page distracts people and makes the banner look more dominant than it is.

Ready made consent tool or custom design?

Most sites use a ready made consent management tool for their cookie banner. These tools handle category management, consent records and communication with tags. Therefore, they save time on the technical side.

However, their visual options are often limited. In most projects, we keep the tool's engine and restyle its look to fit the site's design system. This gives you technical reliability and visual consistency together.

When you compare tools, check how flexible the styling options are. A tool that does not let you change button size, order and colors makes the equality principle hard to apply. For instance, we would not use a tool that only offers Reject on the second layer unless you can move it to the first.

Building a fully custom banner gives more freedom, but it also adds responsibility. You must handle consent records, remember choices and make sure tags do not fire before consent.

Whichever route you take, the design principles stay the same: equal buttons, short copy, a small footprint on mobile and a link to change choices. If you want your banner rebuilt on these principles, our web design service can design and set up this part of your site for you.

How does consent storage affect banner design?

Your site stores each visitor's decision and remembers it for a period of time. This technical detail shapes the design directly, because it decides how often the banner returns.

If the banner shows up on every visit, people get tired and end up hitting Accept without thinking. That goes against the idea of an informed choice. On the other hand, if the choice never renews, visitors stay unaware when your cookie setup changes.

Plan for these points to keep the balance:

• Remember the choice for a reasonable period; confirm the current recommendation with official sources and your lawyer.
• Show the banner again when cookie categories change.
• Do not ask people who rejected the same question on every page.
• Consider showing the date of the last choice in the settings layer.

Also talk to your developers about how consent records work. As a designer, your job is to plan when and how that record shows up for the visitor. For example, in a sample scenario where you add a new marketing tool, the banner could ask a short question about that new category only.

How should multilingual sites handle the cookie banner?

On sites that publish in several languages, plan the banner for each language. The basic rule is that the banner should appear in the same language as the page. An English banner on a Turkish page makes it hard for visitors to know what they are choosing.

When you translate, watch the length of button labels. German labels, for instance, often run longer than English ones, so the buttons may not fit on one row. In that case, stack them while keeping equal width.

Font support matters as well. If your web font lacks certain characters, the banner shows broken glyphs in some languages. That small flaw makes the banner look careless, so check it by eye in each language at least once.

Also confirm that the policy link in each language opens the right page. A common mistake we see is an English banner linking to a policy in another language. It looks minor, yet it undermines the whole point of informing people.

Finally, different markets may follow different rules. Get legal advice for each market and keep the design inside one shared framework.

How do you measure banner performance?

When you measure a cookie banner, the goal is not to inflate the consent rate. Instead, the goal is to learn how much the banner disrupts visitors. This distinction matters, because a high consent rate alone does not prove good design.

Specifically, signals you can track include:

• How long the banner stays open before a visitor decides.
• The share of visitors who leave while the banner is showing.
• The share of visitors who open the settings layer.
• How behavior differs between mobile and desktop.

Remember that these measurements also follow consent rules. Analytics cookies should not run for visitors who reject. So you may only see some signals for visitors who accept; keep that limit in mind when you read the results.

For example, in a sample scenario you might shorten the copy and stack the buttons, and then see faster decisions on mobile. Test such changes one at a time so you know which step made the difference.

How do you test the banner after launch?

That said, launch is not the finish line. Browser updates, new plugins and theme changes can quietly break the banner. That is why we recommend a regular testing routine.

A simple test round looks like this:

1. Open the site in a private window and confirm the banner appears on the first screen.
2. Click Reject, then check in the browser developer tools that no non-essential cookies appear.
3. Reload the page and confirm the banner stays closed.
4. Open the settings with the footer link and change your choice.
5. Repeat the whole round on a phone and with a keyboard.

You can also check the mobile view quickly with our mobile friendly test tool. This routine takes a few minutes after each major update. Still, it stops a broken banner from going unnoticed for months.

What is a cookie banner design checklist?

Before you go live, then, tick each item on the list below. It gathers every principle from this article into short points.

1. Accept and Reject sit on the same layer at the same size.
2. The Reject button has readable contrast.
3. Checkboxes in the settings layer start empty.
4. Non-essential cookies do not run before consent.
5. On mobile, the banner covers only a small part of the screen.
6. The banner does not shift the layout.
7. The copy stays within a few sentences and the policy link is clear.
8. A footer link reopens preferences.
9. Keyboard users can operate the whole banner.
10. No focused element ever sits hidden behind the banner.
11. Your typeface and colors carry into the banner.
12. A lawyer has reviewed the legal text.

Not every item carries the same weight. Still, equal buttons, no cookies before consent and a way to change choices later are the basics you should never skip.

What are the most common cookie banner design mistakes?

The mistakes we see most in the field usually come from good intentions. Often a team adds the banner in a hurry and nobody returns to it.

The most frequent ones: testing the banner only on desktop, hiding Reject in the settings, never changing the default theme and forgetting the footer link. On some sites, the banner also comes back on every page after someone closes it, which wears visitors out.

Another common issue is the banner clashing with other layers. For example, a live chat bubble, a sticky messaging button and the cookie banner may all pile up in the same corner. Then visitors do not know where to tap.

A quick review uncovers most of these mistakes. Moreover, you do not need any special tool for that check; a phone, a laptop and a few minutes are enough. Open the site on different devices and try the banner through a visitor's eyes.

Who should set up the cookie banner on your site?

A cookie banner sits where design, development and law meet. The best results come from projects where all three work together. A lawyer prepares the legal text, a designer fits the banner to the site's language and a developer makes sure cookies do not run before consent.

As Talha Aslan and team, we treat the cookie banner as a component we plan from the first draft of a site, not a piece we bolt on at the end. That way, position, button balance, mobile behavior and brand fit get settled from the start.

If your current banner drives visitors away or hides the Reject option, let us build this part of your site for you. Request a quote on our web design page, and we will prepare a balanced cookie banner that fits your site's structure and feels like your brand.