Animations & Dark Mode
CookieBoss supports smooth banner animations, automatic dark mode, and a built-in WCAG contrast checker to help you create an accessible, polished consent experience.
Banner animations
Available animation types
| Animation | Description |
|---|---|
none | Banner appears instantly with no animation |
fade | Fades in from transparent to opaque |
slide-up | Slides in from below the viewport |
slide-down | Slides in from above the viewport |
slide-left | Slides in from the left edge |
slide-right | Slides in from the right edge |
All animations are CSS-based with smooth easing for a polished feel. They run once when the banner first appears.
How to set
- Open your site’s Banner Editor
- Find the Animation section
- Select your preferred animation type
- Preview the animation in the live preview
- Click Save then Publish
Accessibility: reduced motion
CookieBoss respects the prefers-reduced-motion media query. When a visitor has enabled “Reduce motion” in their operating system settings, all banner animations are automatically disabled and the banner appears instantly. This ensures your consent banner is accessible to visitors with motion sensitivities.
Dark mode
Available modes
| Mode | Behavior |
|---|---|
| Off | Banner always uses your configured light colors |
| Auto | Follows the visitor’s system preference using the prefers-color-scheme: dark media query |
| Always On | Banner always uses the dark palette |
How to set
- Open your site’s Banner Editor
- Find the Dark Mode section
- Select your preferred mode: Off, Auto, or Always On
- Preview both light and dark versions in the editor
- Click Save then Publish
Dark palette
When dark mode is active, the banner renders with a dark background and light text. The dark palette is derived from your configured colors — CookieBoss automatically adjusts contrast to keep text readable against the darker background.
You can preview the exact dark mode appearance in the Banner Editor by toggling between light and dark preview modes.
WCAG Contrast Checker
The Banner Editor includes a built-in contrast checker that helps you meet accessibility standards.
What it checks
The checker evaluates contrast ratios for three elements:
- Text and background — your body text against the banner background
- Buttons — button text against button background colors
- Links — link text against the banner background
Pass/fail standards
| Standard | Ratio | Use case |
|---|---|---|
| WCAG AA | 4.5:1 | Minimum for normal-sized body text |
| WCAG AAA | 7:1 | Enhanced accessibility for all users |
Each element displays a pass or fail badge for both AA and AAA standards, so you can see at a glance whether your color choices meet accessibility requirements.
How it works
The contrast checker runs automatically as you change colors in the Banner Editor. There’s nothing to enable — just adjust your colors and watch the pass/fail badges update in real time.
Aim for AA compliance
The WCAG contrast checker runs automatically as you change colors. Aim for at least AA compliance (4.5:1 ratio) for body text. AAA compliance (7:1 ratio) is recommended for the best accessibility, but AA is the widely accepted minimum.
API configuration
You can set animation and dark mode via the API:
{
"banner": {
"animation": "slide-up",
"darkMode": "auto"
}
}Animation values
"none", "fade", "slide-up", "slide-down", "slide-left", "slide-right"
Dark mode values
"off", "auto", "always"