Blog

10 Cookie Banner Design Tips for GDPR Compliance

By
The Reform Team

Want to avoid GDPR fines and build trust with your website users? Start with a compliant cookie banner. Here's the deal: GDPR requires websites to give users real control over their data, and cookie banners are a key part of that. Missteps - like hiding "Reject All" buttons or using pre-checked boxes - can lead to hefty fines, as seen with Microsoft (€60M) and Mediahuis in 2024.

Key takeaways:

  • Use clear, simple language for cookie banners.
  • Offer specific cookie choices (e.g., necessary, marketing, analytics).
  • Ensure "Accept" and "Reject" buttons are equally visible.
  • Block non-essential cookies until active user consent is given.
  • Provide an easy way for users to change preferences anytime.

These steps aren’t just about compliance - they’re about improving transparency and user experience. Now, let’s break it down into actionable tips you can implement today.

Cookies banner best practices to avoid GDPR & CCPA fines

1. Write in Plain, Simple Language

GDPR Article 7 emphasizes that consent requests must use clear and straightforward language to inform users about data handling practices.

When users encounter complicated legal terms like "processing activities" or "legitimate interests", they might either ignore the notice or agree without fully understanding it. Neither option promotes trust or genuine informed consent.

Stick to simple, everyday language that anyone can understand. For example, instead of saying, "We utilize cookies to improve user experience", try something like, "We use cookies to make our website work better for you." This kind of clarity ensures visitors immediately grasp your purpose without needing a legal or technical background.

Your cookie banner should avoid unnecessary legal jargon and use language that feels approachable. It’s equally important to ensure the information in your cookie banner aligns with the details in your privacy policy. Any inconsistency could lead to compliance issues and possibly attract regulatory attention.

Consider using a layered approach to information. Start with a brief, easy-to-read summary and offer a "Learn More" link for users who want additional details. Writing in plain language isn’t just about meeting legal requirements - it’s about earning user trust, which is essential for effective design.

Clear and respectful communication helps users make informed decisions about their data and sets a solid foundation for their experience with your site. This transparency is a key step toward creating practical and user-friendly cookie banners.

When it comes to cookie settings, clarity and choice are key. GDPR mandates that consent must be "freely given, specific, informed, and unambiguous". This means offering users more than just an "accept all" button - your cookie options need to be detailed and easy to understand.

Break cookies into four clear categories:

  • Strictly necessary cookies: Essential for your website to function properly.
  • Preferences cookies: Save user settings like language or region.
  • Statistics cookies: Gather anonymous data to understand how users interact with your site.
  • Marketing cookies: Track user behavior for targeted advertising.

Your cookie banner should display these categories in a straightforward way, with toggles or checkboxes for each. This allows users to make specific choices, like enabling preferences and statistics cookies while opting out of marketing tracking. Giving this level of control respects user privacy while still allowing you to gather essential data for your business.

Avoid lumping different cookie types together or using vague descriptions that confuse users. Each category should have a clear explanation of its purpose, and toggles should make it simple to opt in or out. Transparency and ease of use are essential to building trust.

Also, ensure users can revisit and update their preferences anytime. This isn't just a courtesy - it’s a GDPR requirement.

Getting active user consent is a cornerstone of GDPR compliance. Simply put, websites cannot assume users are okay with cookies - they must actively choose to accept them. No pre-checked boxes. No implied consent from browsing. And certainly, no sneaky tactics. This approach builds on the earlier emphasis on clear and informed choices.

Under GDPR, consent must be an explicit, affirmative action. The Information Commissioner's Office (ICO) explains:

"Consent should be given by a clear affirmative act… such as by a written statement, including by electronic means, or an oral statement. This could include ticking a box when visiting an internet website, choosing technical settings for information society services or another statement or conduct which clearly indicates in this context the data subject's acceptance of the proposed processing of his or her personal data. Silence, pre-ticked boxes or inactivity should not therefore constitute consent."

In practice, this means your cookie banner should require users to click, tap, or make a deliberate selection to indicate their consent. Scrolling or simply browsing your site does not count as agreement under GDPR rules.

To comply, block all non-essential cookies by default when someone lands on your site. Your cookie banner should display clear options, with unticked boxes for each cookie category. Users must actively check the boxes for the cookies they want to enable.

This isn't just about following the law - it’s about trust. Studies show that 80% of consumers would walk away from brands that misuse their data. By being transparent and fair, you strengthen your relationship with your audience.

Also, avoid design tricks. Don’t make the "Accept All" button bright and bold while burying the "Reject All" option in tiny text. Both choices should be equally visible and easy to select.

Finally, consent isn’t a one-and-done deal. Users should be able to change their cookie preferences whenever they want. Offer an easy way to revisit and update their choices, like a settings link in your footer or a floating preferences button.

The goal? A process that’s simple, clear, and entirely user-driven - putting control firmly in your audience’s hands.

4. Make Accept and Reject Buttons Equal

When designing your cookie banner, it's crucial to ensure users can make choices without feeling nudged or influenced. Under GDPR, consent must be given freely, without any form of pressure or manipulation. This means your banner's buttons must offer equal options for users to accept or reject cookies.

To achieve this, visual balance is key. If your banner includes an "Accept All" button, there must also be a "Reject All" button that’s just as noticeable. Both buttons should have the same size, font, color contrast, and placement. Avoid using design tricks - like making the "Accept All" button brighter or larger - that could steer users toward one choice.

Regulators are paying close attention to this issue. For example, on September 6, 2024, the Belgian Data Protection Authority penalized Mediahuis for not including a "Reject All" button on the first layer of their cookie banner. Similarly, in December 2024, France's CNIL issued warnings to websites where "Accept" buttons were easy to find, but "Reject" options were hidden or less visible.

The ICO has also weighed in, stating:

"Make it as easy to refuse consent as it is to accept. For example with equally prominent options to 'Accept All' or 'Reject All' non-essential cookies, or to customize choices via a 'More Options' button."

To comply, use clear labels like "Accept All" and "Reject All" that leave no room for confusion. Both options should appear at the same visual level, ensuring users can immediately see and choose either without bias. Avoid any design choices that might make "Accept All" more appealing than "Reject All."

Up next, we’ll explore how to create detailed cookie settings that foster user trust even further.

After your initial cookie banner, it’s essential to provide a more detailed cookie settings page. This page allows users to review and adjust their preferences, offering deeper control and ensuring compliance. Here's how to design it effectively.

Start by organizing cookies into clear categories with simple, easy-to-understand descriptions. For example, under Performance Cookies, you might say: “These cookies help us improve our website by collecting anonymous data about how visitors use it.” Be upfront about retention, too: “Session cookies expire when you close your browser, while analytics cookies may remain active for up to 24 months.” This level of detail helps users understand how their data is handled and reinforces your commitment to transparency.

Include toggle switches for each cookie category. While strictly necessary cookies (those essential for basic site functions) don’t require user consent, you should still explain their purpose. For all other categories, ensure they are set to "off" by default, requiring users to actively opt in.

Make the settings page easy to find. Add a persistent link in your website footer with a label like “Cookie Settings” or “Privacy Preferences.” This ensures users can access it from any page, meeting GDPR requirements and showing respect for their choices.

Regulators often examine how accessible your preference center is.

Lastly, keep a record of user preferences. Track what options they selected, when they made those decisions, and the device or IP address they used. These records are crucial for demonstrating compliance during audits.

A thoughtfully designed cookie settings page isn’t just about meeting legal obligations - it’s also an opportunity to build trust by showing users you value their privacy.

Under the GDPR, it's crucial to document user consent effectively. Article 7 states:

"Where processing is based on consent, the controller shall be able to demonstrate that the data subject has consented to processing of his or her personal data."

This means you need to maintain thorough records that detail when, how, and what users agreed to. These records will be vital during audits or regulatory investigations to prove compliance.

What Information Should You Record?

When documenting consent, make sure to include five key details for every user interaction:

  • Date and Time: Use a clear format like YYYY-MM-DD HH:MM.
  • Method of Consent: Note how consent was obtained - via an online form, email signup, or even a phone call.
  • Information Presented: Record what users were shown before consenting, such as links to your privacy policy or details about data sharing.
  • User Identification: Capture identifiers like a full name, email address, or a session ID.
  • Scope of Consent: Specify exactly what the user agreed to, such as allowing data to be processed for marketing purposes.

By capturing this structured data, your system will be ready to handle audits with ease.

Technical Implementation Requirements

Every consent interaction should be logged and timestamped to ensure auditability. These records must be securely stored with strict access controls, ensuring only authorized personnel can view or edit them.

You also need to log consent withdrawals. If a user decides to withdraw their consent, document the date and time of the request, confirm the acknowledgment, and keep proof that their data was deleted or processing ceased as requested.

How Long Should These Records Be Retained?

The GDPR doesn’t specify exact retention periods for consent records. However, as long as you’re processing data based on a user’s consent, it’s best to keep these records securely. Tilman Harmeling, a privacy expert at Usercentrics, advises:

"To be prepared in case of an audit by data protection authorities, businesses should ensure they securely maintain updated and accessible records of their data collection and processing."

Preparing for Audits

To stay ready for audits, ensure your consent logs are well-organized and easy to access. Regulators may request these records on short notice, so your documentation system should allow quick searches by date, consent type, or user. Automated compliance tools can simplify this process, generating reports that track consent rates, withdrawals, and data processing activities.

Regular internal reviews, such as monthly audits of your consent logs, can help you identify and fix gaps early. This proactive approach not only ensures compliance but also reinforces the accountability required under GDPR.

sbb-itb-5f36581

7. Let Users Change Their Mind Easily

Under GDPR, withdrawing consent must be just as straightforward as giving it. If users click to accept cookies, they should be able to withdraw that consent with the same ease.

To make this process simple, provide clear and accessible ways for users to update their cookie settings. For example, include a prominently labeled link - like "Cookie Settings", "Manage Cookies", or "Privacy Preferences" - in the footer of every page on your site. This ensures users can quickly find it without digging through complicated menus. You might also consider adding features like tooltips or a sticky preferences button for instant access.

As an additional option, offer a dedicated email address (e.g., privacy@yourcompany.com) for handling data and consent-related requests.

Your cookie preference center should be just as user-friendly as your initial cookie banner. If users can accept all cookies with one click, they should also be able to reject them just as easily. The same applies to individual cookie categories - make it simple to toggle options like marketing cookies on or off. This approach not only complies with GDPR but also builds trust with your audience.

Don't forget about mobile users. A mobile-friendly design is critical. Ensure your preference center loads quickly, looks good on smaller screens, and includes adaptive features like a sticky footer button for easy access without interrupting the browsing experience.

To further enhance usability, consider adding dynamic, context-aware elements that adjust based on user preferences and browsing behavior. And be sure to regularly test your withdrawal process to ensure it’s intuitive and hassle-free. By making these controls clear and simple, you’ll foster trust and maintain compliance.

8. Optimize for Mobile Devices and Screen Readers

Make sure your cookie banner works smoothly on all devices to meet GDPR requirements. It should adapt seamlessly to smartphones, tablets, and desktops while staying accessible to every user.

Start with a mobile-first design that ensures fast loading. Focus on the smallest screen sizes first, then scale up to larger ones. This approach ensures the banner appears promptly, even on slower connections, reducing the risk of compliance issues. Quick loading is crucial - your banner should display before users interact with the page.

Interactive elements, like buttons, need to be touch-friendly. Size and space them properly to avoid accidental taps, and position the banner so it doesn’t block key content or navigation. These small adjustments improve the user experience, just as we discussed earlier with easy consent withdrawal options.

For accessibility, use semantic HTML, provide descriptive alt text, and add clear ARIA labels to all elements. Keyboard navigation should flow logically, with a visible focus indicator. Controls should respond to standard keys like Enter or Space, ensuring usability for everyone.

Before launching, thoroughly test your cookie banner on all major devices and browsers. Check how it performs during screen orientation changes and under different network conditions to ensure a consistent experience.

9. Avoid Misleading Design Tricks

Using deceptive tactics in cookie banners - often referred to as "dark patterns" - can mislead users into making choices they didn’t intend. This not only erodes trust but also violates the principle of freely given consent outlined in GDPR.

"Deceptive design patterns (also known as 'dark patterns') are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something."
– Harry Brignull, Deceptive Design

A staggering 72% of cookie banners reportedly use dark patterns. Among them, 45% preselect options, 58% make rejecting cookies unnecessarily difficult, and 31% rely on misleading button designs.

For example, many websites highlight the "Accept All" button with bright, eye-catching colors while muting or burying the "Reject" option. In some cases, rejecting cookies requires additional clicks or is placed in a way that’s easy to overlook. These tactics create undue pressure on users to consent.

Pre-ticked checkboxes are another common issue. GDPR explicitly states that consent cannot be assumed through inactivity or pre-selection:

"Silence, pre-ticked boxes, or inactivity should not therefore constitute consent."
– General Data Protection Regulation, Recital 32

Other misleading practices include vague phrases like "Continue to site" or "Personalize your experience", which mask the fact that agreeing to cookies is the only real option. Such strategies not only breach GDPR standards but can lead to hefty fines. For instance, in 2022, the French regulator CNIL fined Google €150 million and Facebook €60 million for making it confusing and difficult for users to reject cookies.

To comply with GDPR and build trust, avoid these manipulative designs. Instead:

  • Ensure both "Accept" and "Reject" buttons are equally visible and easy to use.
  • Avoid pre-selecting any non-essential cookie categories.
  • Use clear, straightforward language to describe choices.

As the European Data Protection Board puts it:

"A consent banner that manipulates is a banner that fails."
– European Data Protection Board

10. Explain What Data You Collect and Why

To create a transparent experience for users, it’s vital to clearly explain what data you collect and the reasons behind it. Transparency isn’t just about meeting GDPR requirements - it’s also about building trust with your audience.

Start by ensuring your cookie banner provides specific details about the types of cookies you use and their purposes. Avoid vague phrases like "we use cookies to improve your experience." Instead, be precise. For instance, you might state that certain cookies are used "to analyze site traffic patterns" or "to remember your login preferences".

Use plain, straightforward language to describe each cookie type and its role. This helps users understand exactly what they’re agreeing to. For example, if your website uses analytics tools like Google Analytics or advertising tools like Facebook Pixel, clarify which third-party services receive data and why.

Another important detail to include is how long you retain user data for each type of cookie. Many websites overlook this, but it’s a critical part of transparency. Clearly communicate data retention periods, either directly in the cookie banner or through a link to your detailed cookie policy. This ensures users can easily access the information they need.

To make this process user-friendly, start with concise descriptions directly in the banner. Then, offer expandable sections or links for users who want more in-depth details. This strikes a balance between providing essential information upfront and offering comprehensive details for those who seek them.

This approach not only aligns with GDPR principles like data minimization and purpose specification but also reinforces user control. By collecting only what’s necessary and clearly stating why, you can build a foundation of trust.

"Businesses should prioritize user experience by making cookie banners visually appealing, easy to understand, and simple to interact with." - Eike Paulat, Usercentrics Director of Product

Clear and honest disclosures aren’t just about compliance - they’re about creating meaningful connections with your audience. When users feel informed and in control, they’re more likely to engage with your site and trust your brand.

Understanding the difference between compliant and non-compliant cookie banners isn't just about avoiding penalties - it’s about respecting user privacy. The stakes are high: GDPR violations can lead to fines of up to €20 million or 4% of global annual turnover, whichever is greater.

To make these differences clear, let’s break down how compliant and non-compliant banners operate in practice. The table below provides a side-by-side comparison of key features.

Feature GDPR-Compliant Banner Non-Compliant Banner
Consent Mechanism Requires explicit opt-in consent before activating non-essential cookies Relies on implied consent, pre-ticked boxes, or cookie walls
User Control Options Offers granular controls with equal prominence for "Accept" and "Reject" buttons Provides only an "Accept All" option or hides the "Reject" button
Transparency Level Explains cookie types, purposes, and retention periods in clear, plain language Uses vague language, leaving users uninformed about cookie usage
Accessibility Features Includes keyboard navigation, screen reader compatibility, proper color contrast, and focus indicators Lacks support for keyboard navigation and fails to meet accessibility standards

Key Differences Explained

The consent mechanism is one of the most critical distinctions. GDPR-compliant banners require users to actively opt in before any non-essential cookies are activated. Non-compliant banners, on the other hand, often use manipulative tactics like pre-ticked boxes or cookie walls to pressure users into consenting.

User control is another area where compliant designs stand out. They provide users with clear options to accept or reject different categories of cookies, ensuring that the "Reject" button is just as easy to find as the "Accept" button. Non-compliant banners often make rejecting cookies unnecessarily difficult or use ambiguous language that leaves users confused.

Transparency is equally important. Compliant banners use straightforward language to explain what types of cookies are being used, why they’re needed, and how long the data will be retained. Non-compliant banners, by contrast, may obscure these details, making it harder for users to make informed decisions.

Finally, accessibility is a defining feature of compliant banners. They are designed to work seamlessly with keyboard navigation, screen readers, and other assistive technologies. They also ensure proper color contrast and focus indicators, making them usable for everyone, including individuals with disabilities. Non-compliant banners often neglect these elements, excluding some users from making informed consent choices.

Real-World Consequences of Non-Compliance

The risks of non-compliance are not theoretical. In 2022, the French regulator CNIL fined Microsoft €60 million for making it unnecessarily difficult for users to refuse cookies. Other cases, both in Europe and the U.S., have highlighted how non-compliant practices like cookie walls - where users are blocked from accessing a site unless they consent - violate GDPR principles by denying users a genuine choice about their data.

The takeaway? Every design detail matters. Ensuring clarity, transparency, and accessibility isn’t just about meeting legal obligations - it’s about building trust with your users and respecting their rights.

Conclusion

Following these 10 cookie banner tips can help you establish trust with your users while reducing legal and financial risks. Cookie banners that comply with data privacy laws - like GDPR, the ePrivacy Directive, CCPA, and LGPD - aren’t just a legal requirement; they’re a crucial step toward responsible data management. For instance, violations of CCPA and CPRA in the U.S. can lead to fines as high as $7,500 per violation. In 2022, Facebook faced a €60 million fine for making it challenging for users to reject cookies.

"Clear, transparent compliance with them, including implementing a cookie banner on your website, for example, also helps build trust and encourages long-term relationship development with your users and customers." – Usercentrics

Beyond avoiding fines, a well-executed cookie banner can foster trust and even enhance user engagement.

To ensure compliance, review your current cookie banner. Does it use clear language? Offer specific cookie options? Provide equal visibility for both “accept” and “reject” buttons? If not, it’s time to make changes. Using a Consent Management Platform (CMP) can simplify consent management and help you stay up-to-date as privacy laws evolve. Don’t forget to regularly update your cookie policies and banner designs to reflect any regulatory changes.

Taking compliance seriously not only protects your business but also strengthens credibility with your users. Start your audit today - it’s a step toward building trust and ensuring long-term success. Your users - and your bottom line - will appreciate it.

FAQs

When creating a cookie banner that complies with GDPR, steer clear of these frequent mistakes:

  • Pre-ticked boxes: Consent must be actively given, so avoid assuming agreement by default.
  • Hiding the 'Reject' option: The 'Reject' button should be just as accessible as the 'Accept' button, not buried or harder to find.
  • Misleading designs: Avoid using deceptive design elements (often called "dark patterns") that push users toward accepting cookies.
  • No option to change consent: Users should have a simple way to adjust or withdraw their consent whenever they choose.

Make sure your banner also provides a clear explanation of how cookies are used and keeps all legally required information visible. Overlooking these details not only risks non-compliance but can also erode user trust.

To ensure your cookie banner is accessible, make sure users can navigate it entirely with a keyboard and that every element features clear, descriptive labels. Use colors with enough contrast to make the text easy to read, and include text alternatives for any visual elements to support screen reader users. Adhering to WCAG 2.2 guidelines is a solid step toward creating an inclusive experience. Prioritizing accessibility not only expands your audience but also shows your dedication to usability and compliance.

To meet GDPR requirements, you need to safely document and store user consent details. This means keeping track of information like the date and time consent was provided, the exact permissions granted, and how the consent was obtained. Make sure your consent requests are straightforward, easy to understand, and clearly separated from other content.

Additionally, store these records in a secure system that allows for quick retrieval in case of audits or compliance reviews. Keeping precise and accessible records not only helps you stay compliant but also reinforces trust with your users.

Related posts

Discover proven form optimizations that drive real results for B2B, Lead/Demand Generation, and SaaS companies.

Lead Conversion Playbook

Get new content delivered straight to your inbox

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
The Playbook

Drive real results with form optimizations

Tested across hundreds of experiments, our strategies deliver a 215% lift in qualified leads for B2B and SaaS companies.