CSS color recipe
accent-color Native controls in your brand color
accent-color sets the color of checkboxes, radio buttons, ranges and progress bars without rebuilding them, so they keep their keyboard behavior and their accessibility.
- Baseline
- Limited availability
- First versions
- Chrome 93 · Firefox 92 · Safari 26.2
- Tested
- 3 of 3 engines
Live example
The recipe, running
Left: the CSS below, as your browser runs it. Right: the same CSS as a browser without the feature reads it, so you see exactly what the fallback gives.
Turn on JavaScript to see whether your browser supports it; the examples work either way.Your browser supports it, so the left example runs the modern path.Your browser does not support it yet, so both examples show the fallback.
The CSS
Copy it as it is
This is the exact CSS the example runs. Fallbacks come first; the modern values follow, so each browser keeps the last line it understands.
accent-color.css
:root { --brand: #3959DA; }
/* Checkboxes, radios, ranges and progress bars take the brand. */
form { accent-color: var(--brand); }
form { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
input[type="range"], progress { width: 140px; }How it works
What each part does
No fallback to write. A browser without
accent-colordraws its usual controls; nothing breaks.The browser picks the tick color. The check mark is drawn in white or black to read on your accent, so you set one color, not two.
Not Baseline yet. browser-compat-data marks Chrome for Android as partial: Chrome for Android does not keep a minimum contrast for the control’s marks (Chromium bug 343503163), so check the tick yourself on mid-tone accents.
Browser support
Where it runs
First version of each browser with the feature, from the web-features project and MDN’s browser-compat-data. “No” means not supported yet.
- accent-colorLimited availabilityNot Baseline: at least one core browser does not fully support it.
| Browser | accent-color |
|---|---|
| Chrome | 93 |
| Chrome for Android | 93 (partial) |
| Edge | 93 |
| Firefox | 92 |
| Firefox for Android | 92 |
| Safari | 26.2 |
| Safari on iOS | 26.2 |
Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.
Tested
Tested in three engines
| Engine | Version | Supported | As written | Fallback |
|---|---|---|---|---|
| Chromium | 147.0.7727.15 | Yes | Pass | Pass |
| Firefox | 148.0.2 | Yes | Pass | Pass |
| WebKit | 26.4 | Yes | Pass | Pass |
Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.
Accessibility
Measured, not assumed
The brand color measures 5.81:1 against white, past the 3:1 a checked state needs to be seen (WCAG 1.4.11).
- 5.81:1AA
#3959DA / #FFFFFF
References
Go to the source
- CSS Basic User Interface Module Level 4: accent-colorwww.w3.org
- Understanding WCAG 2.2: Non-text Contrastwww.w3.org
- web-features at 98723fdgithub.com
- MDN browser-compat-data at 3b28abegithub.com