Limited support A strong option when you want native controls to match brand color without losing browser behavior.

accent-color

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

FormsColorControls

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
accent-color
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

checkbox

CSS checkbox demo.

PreviewFullscreen

radio button

CSS radio button demo.

PreviewFullscreen

Progress bar

CSS progressba- demo.

PreviewFullscreen

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