accent-color
accent-color lets you theme the highlighted portions of native controls such as checkboxes, radios, and range inputs. It provides lighter-weight customization than replacing controls entirely.
Overview
accent-color lets you theme the highlighted portions of native controls such as checkboxes, radios, and range inputs. It provides lighter-weight customization than replacing controls entirely.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 93 | 93 | 92 | 15.4 | 93 | 15.4 | |
auto | 93 | 93 | 92 | 15.4 | 93 | 15.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Safari does not maintain minimum contrast for legibility of the control. See bug 244233.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Chrome for Android does not maintain minimum contrast for legibility of the control. See bug 343503163.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Safari on iOS does not maintain minimum contrast for legibility of the control. See bug 244233.
Syntax
CSS
input[type="checkbox"] {
accent-color: #6200ee;
}
progress {
accent-color: coral;
}Live demo
Use cases
Branded form controls
Align checkboxes, radio buttons, and other native UI accents with your product palette.
Lightweight theming
Customize key control highlights without building fully custom replacements.
Cautions
- Accent color support should still be tested across browsers because native control rendering varies.
- Brand colors may look appealing but still fail contrast or clarity in some control states.
Accessibility
- Use accent-color to complement native controls, not to remove the need for labels, hit areas, or visible focus indicators.
Related links
Powered by web-features