Dark pattern cookie banners: examples and how to redesign yours

What makes a cookie banner a dark pattern

Regulation 6 of PECR says you may only store or read non-essential cookies on a device if the user has given consent, and the standard for that consent comes from UK GDPR. It must be freely given, specific, informed and unambiguous, and given by a clear positive action. It must also be as easy to withdraw as it was to give.

A dark pattern is any design choice that pushes people towards the answer the site wants rather than letting them choose. On a cookie banner it usually works through one of three levers:

• Effort. Accepting takes one click and refusing takes three or more.
• Visibility. Accept is a large, high-contrast button; reject is small grey text or a link that does not look clickable.
• Framing. Wording such as No, I prefer a worse experience or warnings that the site will break if you refuse.

The test regulators apply is simple: would a typical visitor find it as easy to say no as to say yes? If the honest answer is no, the consent is unlikely to be valid. That matters because the cookies you set afterwards, such as analytics, advertising pixels and session replay, then have no lawful basis at all.

The dark patterns regulators target

The European Data Protection Board's cookie banner taskforce published a list of practices its members agreed were problems, and the ICO has written to many UK site owners about the same issues. These are the ones that come up again and again.

Confirmshaming, where the decline button carries guilt-tripping wording, and repeated nagging, where the banner returns on every page after a refusal, are also treated as pressure that undermines a free choice.

Examples of cookie banners: non-compliant and compliant

Example 1: non-compliant

We use cookies to improve your experience.
[ Accept all ]                      Manage preferences

Accept is a large filled button and the only other route is a small link into a settings panel, where every category is already switched on. Refusing needs at least three actions. This is the most common pattern regulators challenge.

Example 2: non-compliant

By continuing to use Example Bakery you agree to our use of cookies.  [ OK ]

There is no choice at all, and the analytics tag fires before the visitor does anything. An OK button that only closes the notice is not consent.

Example 3: borderline

[ Accept all ]   [ Reject all ]   Customise
(Reject all shown as pale grey text on a white button)

The options are present, but the visual weight is so uneven that one barely reads as a button. Fixing the styling is usually enough to bring it into line.

Example 4: compliant

Example Bakery uses cookies
We use essential cookies to run the shop. With your permission we would also
like to use analytics cookies to see which pages are used, and marketing
cookies to measure our adverts. You can change your choice at any time
from the Cookie settings link at the foot of every page.

[ Accept all ]   [ Reject all ]   [ Choose cookies ]

Three buttons of the same size and style, a plain explanation of each purpose, every optional category off by default in the settings panel, and a persistent link to change the choice. Nothing non-essential loads until the visitor clicks Accept or saves choices.

How to test your own banner

Open your site in a private window so no earlier choice is stored, and open DevTools before the page loads.

1. In the Network panel, filter for known tracking hosts such as google-analytics, googletagmanager, facebook or clarity. Any request before you click is a problem, unless it is a consent-mode ping that sets no cookies.
2. In Application, then Cookies, note every cookie present before you choose. Only strictly necessary ones should be there.
3. Click Reject all, reload and check again. No analytics or advertising cookies should appear, now or after browsing three or four pages.
4. Count the clicks needed to accept and to reject. They should be the same.
5. Use only the keyboard to reach each button. All options should be reachable with Tab and visible when focused.

A quick console check after rejecting:

document.cookie.split('; ').map(c => c.split('=')[0]).sort()

Names starting with _ga, _gid, _fbp or _clck after a refusal mean tags are ignoring the choice. A GDPR scan does the same check automatically across several pages.

Redesigning the banner: the key code

Give all three choices the same element, the same styles and the same size. Equal treatment in the markup makes it hard for a later restyle to tip the balance:

<div id="consent" role="dialog" aria-labelledby="consent-title" aria-live="polite">
  <h2 id="consent-title">Example Bakery uses cookies</h2>
  <p>Essential cookies run the shop. With your permission we would also use
     analytics and marketing cookies. See our cookie policy.</p>
  <button type="button" data-consent="all">Accept all</button>
  <button type="button" data-consent="none">Reject all</button>
  <button type="button" data-consent="choose">Choose cookies</button>
</div>

Hold back optional scripts until consent by giving them a non-executable type, then switch them on only after a yes:

<script type="text/plain" data-category="analytics" src="/js/analytics.js"></script>

<script>
function enable(category) {
  document.querySelectorAll('script[data-category="' + category + '"]').forEach(old => {
    const s = document.createElement('script');
    if (old.src) s.src = old.src; else s.textContent = old.textContent;
    old.replaceWith(s);
  });
}
</script>

If you use Google tags, set Consent Mode defaults to denied before the tag loads, then update them on the visitor's choice:

gtag('consent', 'default', {
  ad_storage: 'denied', analytics_storage: 'denied',
  ad_user_data: 'denied', ad_personalization: 'denied'
});

Settings panel switches for analytics and marketing must start off. Add a Cookie settings link in the footer that reopens the panel, so changing your mind takes one click from any page. The cookie consent guide covers the full set-up, and tracking without consent explains how to find tags that ignore the choice.

Platform notes

• Consent management platforms. Most can show Reject all on the first layer, but it is often switched off by default. Look for a first-layer reject option or equal-prominence setting, and check that categories start unticked.
• WordPress. Consent plugins only block scripts they know about. Tags added by themes, page builders or hard-coded in the header can still fire, so test after enabling the plugin rather than trusting its scan.
• Shopify. Use the store's customer privacy settings so Shopify's own pixels and compliant apps respect the choice, and check third-party apps that inject their own scripts.
• Google Tag Manager. Set consent requirements on each tag, or use a consent initialisation trigger, so tags wait for the right signal.

Make the banner usable for everyone: buttons need visible focus and enough contrast. The colour contrast guide and keyboard navigation guide cover both.

The fix, step by step

Edge cases worth knowing

• Cookie walls. Blocking the whole site until someone accepts is risky, because consent is not freely given if refusing means losing access. The ICO has said consent or pay models can be acceptable in some circumstances, but they need a fair alternative and careful assessment. Most small sites should not try it.
• Analytics exemptions. The Data (Use and Access) Act 2025 adds limited exemptions to PECR, including for some analytics used only to improve a service, once the relevant provisions are in force and with clear information and a way to object. Check current ICO guidance before removing analytics from your banner.
• Visitors outside the UK. EU visitors fall under the ePrivacy rules in each member state, which are similar in substance. One compliant banner for everyone is simpler than geo-targeting.
• Re-asking. Asking again after a refusal on every visit is nagging. Remember the refusal for a reasonable period, commonly six to twelve months.
• Banner covering content. A banner that blocks the page is not a dark pattern in itself, but it must be easy to dismiss with either choice.

Keeping it fixed

1. Repeat the private window test after every new plugin, app, tag or theme update, because new tags rarely respect the banner by default.
2. Keep a written list of each cookie, its purpose, its category and its lifetime, and check it against what the browser actually stores every quarter.
3. Lock the banner styles into the template so a redesign cannot quietly shrink the Reject button.
4. Record when and how consent was given, with the banner version, so you can show what visitors saw.

Your cookie policy and privacy notice should match what the banner says. The privacy policy guide shows what to include, and the GDPR compliance checklist puts cookies in the wider picture.