How to Make a Good Cookie Banner: Design, Language, and UX

A cookie banner is one of the first things a new visitor sees on your site. Done well, it communicates clearly, respects the visitor's choice, and stays out of the way. Done badly, it annoys users, violates GDPR, and can invite regulatory complaints. The difference usually comes down to three things: design, language, and how the accept and decline options are presented.

This guide covers what actually makes a cookie banner good — legally and from a user experience standpoint.

Why the Design of Your Cookie Banner Is a Legal Issue

Regulators in France, Germany, the Netherlands, and across the EU have issued fines and enforcement actions specifically targeting manipulative cookie banner design — not missing features, but design choices that pressure users into accepting. Common violations include:

A large, prominent "Accept" button paired with a greyed-out or hidden "Reject" option
Placing the decline path behind an extra step like "Manage preferences" while acceptance is one click
Using persuasive or guilt-inducing language to steer users toward consent
Pre-ticking consent checkboxes

These are not theoretical risks. The French data protection authority (CNIL) published specific guidelines on cookie banner design, and several major companies have been fined for exactly these patterns. Your banner design is part of your compliance, not separate from it.

Layout and Position

Choose a layout that presents consent options clearly without blocking the entire page. Common positions are a bottom bar, a centered modal, or a bottom-corner widget. Each has trade-offs.

A full-screen modal has the highest visibility and is harder to ignore, which can improve consent rates — but it also creates more friction for visitors who want to decline and get on with browsing. A bottom bar is less intrusive and works well for sites where the content is the main draw. A bottom-corner widget is compact but can be easy to miss on mobile.

Whatever layout you choose, make sure it is responsive. A banner that works cleanly on desktop but covers critical content on a 375px screen is a bad experience and potentially a compliance issue if it makes declining harder on mobile.

Color, Contrast, and Visual Hierarchy

The most important design principle for cookie banners is that the accept and decline options must be visually equivalent. Both buttons should be the same size and style — not one filled primary button and one small text link. Regulators have been explicit that making one option visually dominant over the other constitutes a dark pattern.

Beyond compliance, contrast matters for accessibility. Your banner text and buttons should meet WCAG AA contrast standards (4.5:1 for normal text) so the banner is readable for users with visual impairments. Most visual editors, including Consentify's, let you set colors directly — pick combinations that are clear in all lighting conditions, not just on your design team's calibrated monitors.

Avoid decorative gradients, animations, or heavy imagery in the banner. These add load weight and visual noise without improving comprehension.

Language: Clear, Neutral, and Specific

Cookie banner text is where many sites go wrong. Vague language like "We use cookies to improve your experience" tells the visitor almost nothing. Persuasive language like "Accept to help us serve you better" is a dark pattern. Both are problematic under GDPR's requirement for informed consent.

Good banner language is specific about what data is collected and why. For example, instead of "analytics cookies," say "we use Google Analytics to count visits and measure how pages are used." This is more accurate and gives visitors a real basis for their decision.

Keep sentences short. Most visitors read cookie banners quickly, if at all. Front-load the key information — what you track and why — rather than burying it after a generic introduction. Avoid legal jargon that requires a lawyer to parse. If your privacy policy has the detailed language, link to it rather than reproducing it in the banner itself.

Consent Options: Make Both Paths Equal

The accept and decline paths must be equally accessible. This means:

Both options visible at the same level — not hidden behind a "More options" submenu for decline
Buttons styled with equal visual weight
No pre-ticked boxes for non-essential categories
A clear way to access and change consent after the initial banner is dismissed

That last point — the ability to revoke or change consent — is a firm requirement under GDPR, not a nice-to-have. Add a "Cookie settings" link in your footer or on your privacy policy page. In Consentify, any element with the ID revoke-consent-btn will automatically open the consent panel.

Performance: A Banner Should Not Slow Your Site

A cookie banner loads on every page, for every visitor, before anything else. A poorly implemented one can block page rendering and hurt your Core Web Vitals. Look for tools that load their script asynchronously and serve it from a CDN or edge network. Run a PageSpeed Insights test before and after you install your banner — a well-built tool should add minimal measurable overhead.

Avoid banner tools that rely on large JavaScript bundles, custom fonts, or external image assets. The simpler the implementation, the faster it loads.

Testing Your Banner Before and After Launch

Always test your banner in a private browser window — your own session likely has cookies stored that suppress the banner. Check it on multiple screen sizes and browsers. Confirm that non-essential scripts (Google Analytics, advertising pixels) are actually blocked before consent is given, and that they activate correctly after consent. Use your browser's developer tools to verify network requests.

Periodic re-testing matters too. If you add new third-party tools to your site, make sure they are categorized and configured in your consent platform. Uncategorized scripts that fire without consent are a compliance gap regardless of how good your banner looks. You can use Consentify's domain scanner to check for new or uncategorized cookies on your site at any time.

What to Avoid

Dark patterns: hidden decline buttons, pre-ticked boxes, guilt-inducing language
Blocking the entire page until the user accepts (not legally required)
Launching the banner before the page has loaded, which can cause layout shift
Using the banner to collect data you haven't disclosed — this is a GDPR violation regardless of whether the user clicked accept
Forgetting to test on mobile