One-line branding for form controls

Customizing built-in HTML form elements has always been a painful trade-off. You either accept the browser's default look, or you strip the native styles and rebuild them from scratch—a process that quickly balloons in scope, often at the expense of state styles like :indeterminate and built-in accessibility behavior. accent-color, defined in the CSS UI specification, offers a middle path: tint form controls with your brand color using a single CSS declaration.

input {
  accent-color: hotpink;
}
A light theme screenshot of an accent-color demo where checkbox, radio buttons, a range slider and progress element are all tinted hotpink.
Demo

Working with color schemes

accent-color composes cleanly with the color-scheme property. A page that sets color-scheme: light dark can apply the same accent-color value in both modes, so controls stay on-brand regardless of the user's theme selection. In a dark theme, for example, controls render with the same hotpink tint as they do in light mode.

A dark theme screenshot of an accent-color demo where checkbox, radio buttons, a range slider and progress element are all tinted hotpink.
Demo

Which elements are affected

Currently, four form controls respond to accent-color: checkbox, radio, range, and progress elements. You can see each control in both light and dark schemes at accent-color.glitch.me.

  • Checkbox
  • Radio
  • Range
  • Progress

Contrast is handled for you

Browsers that support accent-color are responsible for picking a contrasting color to pair with your chosen accent, preventing inaccessible combinations. Chrome and Firefox have shipped slightly different algorithms for this task—Chrome 94 and Firefox 92 Nightly, for instance—but the underlying guarantee is the same.

A screenshot of Firefox and Chromium side by side, rendering a full spectrum of checkboxes in various hues and darknesses.

The practical takeaway: supply your brand color and let the browser compute the accessible details. You don't need to design a secondary color for checkmarks or radio dots yourself.

Tinting beyond the four controls

If you need to extend your brand color further, a small set of additional CSS properties can handle related UI chrome:

  • the focus ring
  • text selection highlights
  • list markers
  • arrow indicators (WebKit only)
  • scrollbar thumb (Firefox only)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Future expansion

The accent-color spec isn't limited to the four elements covered here. The specification leaves room for broader adoption, and future versions could see the property applied to other native UI—for instance, highlighting the selected <option> inside a <select> dropdown. The current support is a starting point, not a ceiling.