Stay barrier-free: Design cookie banners with the etracker consent manager

by Katrin Nebermann

June 28, 2025 is an important date for all website and online store managers: The Accessibility Reinforcement Act (BFSG) comes into force. We show you what you need to consider when adapting the consent dialog or cookie banner.

A brief digression – WCAG and BFSG

The European Parliament and the Council drew up a directive back in 2019 that defines the accessibility requirements for products and services (see: https://eur-lex.europa.eu/eli/dir/2019/882/oj?locale=de). It is based on the international principles of the Web Content Accessibility Guidelines (WCAG). This laid the foundations for strengthening accessibility in Europe. This directive is being implemented in Germany through the Barrierefreiheitsstärkungsgesetz – BFSG for short.

The resulting WCAG process checks the accessibility of online content. A distinction is made between three conformance levels: A, AA, AAA. This grading indicates whether a feature has a high (A) or low (AAA) priority. WCAG 2.2 (AA) is binding for the launch in June(https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/).

Cookie banner – first contact according to WCAG 2.2

For most users, the cookie banner is the first contact with a website. With regard to the design of the banner, the current WCAG 2.2 requirements play just as important a role as for the actual website. There are a total of four principles that must be observed:

• Perceptible – clearly visible placement, compliance with contrasting colors
• Operable – can also be operated via keyboard
• Understandable – text and buttons are clearly defined
• Robust – cross-platform and cross-device display

Accessible cookie banner from etracker

In addition to etracker analytics and the etracker tag manager, the etracker consent manager is another important component of etracker’s all-in-one solution.

By default, the content and design settings of the consent banner provided in the etracker consent manager are accessible. This means that in the initial settings, etracker has already paid attention to criteria such as keyboard control, screen reader readability, contrast ratios and sufficient font size.

If adaptations are made, for example to meet CI specifications, it is essential that the design process then includes a look at compliance with accessibility. The following points should then be checked:

• Is the supplemented or amended text (still) comprehensible?
• Does the color choice of background and text correspond to the necessary contrast ratio?

Testing colors and contrast values

According to the WCAG 2.2 (AA) guidelines, a distinction is made between three elements. These are small text with less than 24px/18pt, large text with 24px/18pt or more and “non-text contrast”, which refers to icons or graphic objects.

All these elements must have a certain contrast ratio:

• Large text: Contrast 3:1
• Normal text: Contrast 4.5:1
• Non-text contrast: Contrast 3:1

Selection of test tools* that fulfill at least WCAG 2.2:

• WCAG Color Contrast Checker by Skynet Technologies USA LLC
  https://www.skynettechnologies.com/color-contrast-checker
• DigitalA11Y Color Contrast Checker (Addon) from DigitalA11Y
  https://chromewebstore.google.com/detail/color-contrast-checker-by/hfcoldjibhgbnlambdiecfneiegagkhi?hl=en
• AudioEye Color Contrast Checker from AudioEye
  https://www.audioeye.com/color-contrast-checker/

Summary – Accessibility for cookie banners

It is important that website operators adapt their online offerings to the requirements of the BFSG. Not only to ensure that they meet the needs of all users, but also to avoid fines and penalties.

The content banner, which is usually the first to appear on a website, must also meet certain BSFG criteria. These are: Visibility, usability, comprehensibility and robustness.

etracker already offers accessible content and design settings as standard in the etracker consent manager. These can be customized individually. However, points such as the legibility of texts and the contrast ratio between background and text should be checked when making subsequent adjustments. Tools that check the contrast between colors, for example, help to ensure that the requirements of WCAG 2.2 (AA) are met.

---