Skip to content

Accept and reject have to look equally clickable ​

The banner designer lets you colour the accept and reject buttons independently. One combination is not available: making the reject button hard to notice.

While you edit colours, the designer checks the pair and tells you if something is off. On a site running the IAB TCF CMP the same check runs when you publish, and a design that fails it is refused.

What is checked ​

Two things, both measured as WCAG contrast ratios.

Each label against its own button. At least 4.5:1, which is what makes text readable. This catches the obvious version — white text on a white button — and the less obvious one, a pale grey label that is technically visible if you go looking for it.

The two buttons against each other. The reject button's label may not read at less than half the contrast of the accept button's, unless it is already at 7:1 or better, at which point nothing is being hidden. This is the case that passes the first check and still fails the point of it: both labels readable, but one of them obviously the louder of the two.

Sizes, padding and font weight are not settings at all. Both buttons share them, so they cannot drift apart.

What is not checked ​

The button's outline against the banner. A white reject button with a light grey border is the pattern nearly every consent banner on the web uses, including ours by default. Its outline is faint by the numbers, and a rule against it would fire on almost every banner in existence, so there is no such rule.

Hover colours. What matters is what a visitor is shown before they touch anything.

When it blocks and when it advises ​

Category banner (GDPR, CCPA…)IAB TCF
While editingA note in the Colors tabA note in the Colors tab
On publishPublishes normallyRefused until the colours change

The difference is not that contrast matters less on a category banner. It is that TCF is a certification: a CMP that ships a suppressed reject button fails validation, and publishing one would put your own certification at risk. Nothing outside TCF fixes a number, so there the choice stays yours — with the caveat below.

A quiet reject button is the classic dark-pattern finding

GDPR Art. 7(3) asks that withdrawing consent be as easy as giving it, and supervisory authorities have repeatedly read "as easy" to cover visual prominence, not just the number of clicks. CNIL and the EDPB's dark-pattern guidelines both treat a de-emphasised refusal as a defect in the consent itself. If consent was never validly obtained, the records behind it do not help you.

How to fix a finding ​

The message names the field. In practice one of three things:

  • Give the reject button a readable label. Usually the whole fix: the same dark colour as your body text, on the button's own background.
  • Turn the accept button down rather than the reject button up. A slightly less saturated fill often reads better anyway.
  • Give both buttons the same treatment and let the wording carry the difference. Two identical buttons are always compliant and never look broken.

Colours we cannot read ​

The check needs an opaque colour it can measure. A CSS variable, a color-mix(), a half-transparent fill — it skips these rather than guessing what they resolve to, so they never block a publish. If you build your palette that way, the check has nothing to say about it and the responsibility comes back to you.

CookieWave consent management