CSS accent-color Explained

The accent-color property recolors the “on” state of native form controls — checkboxes, radio buttons, range sliders, and progress bars — to match your site’s palette, without you having to rebuild those controls from scratch out of divs and JavaScript. Set one line of CSS and the browser handles the rest, including focus rings, hover states, and correct rendering on every platform.

The problem it solves

Native checkboxes and radio buttons are notoriously hard to style. Browsers render them using platform UI widgets, and for years the only way to change their color was appearance: none followed by rebuilding the entire visual — box, checkmark, focus ring, disabled state — by hand. That approach works, but it’s a lot of code for something as simple as “make the checkbox blue,” and it’s easy to lose accessibility behavior the native control gave you for free, like correct keyboard focus indication and screen reader semantics.

accent-color targets exactly the piece people actually wanted to change: the fill color used when the control is checked, selected, or dragged. Everything else about the control — its shape, its interaction with :focus-visible, its native accessibility tree — stays intact.

Syntax and supported elements

input[type="checkbox"],
input[type="radio"] {
  accent-color: #7c3aed;
}

You can also set it globally:

:root {
  accent-color: #7c3aed;
}

Because accent-color inherits, setting it on :root or body themes every supported control on the page in one declaration, while a more specific selector overrides it for particular inputs.

Supported values:

• A color — any valid CSS color, including values built from color functions like oklch() or color-mix().
• currentColor — ties the accent to the element’s computed color, useful when a form control should match surrounding text.
• auto — the default; the browser picks its own accent color (usually a shade of blue, though this varies by platform and can respond to system-level accent color settings).

The property applies to checkboxes, radio buttons, range inputs (<input type="range">), and <progress> elements. It has no effect on text inputs, buttons, or other controls that don’t have a distinct “accented” state.

Working with dark mode

accent-color cooperates with the color-scheme property rather than fighting it. If you set color-scheme: light dark and leave accent-color: auto, the browser’s own accent adapts appropriately in each mode. If you set an explicit accent color, it’s your job to make sure that color has enough contrast against both a light and dark control background — a fixed accent color doesn’t automatically adjust for the surrounding theme the way auto does.

A common pattern combines both:

:root {
  color-scheme: light dark;
  accent-color: light-dark(#7c3aed, #a78bfa);
}

This keeps the checked-state color on-brand while still shifting it slightly for readability in dark mode, using the same light-dark() function you’d use for any other themed color.

Accessibility considerations

Because accent-color changes a rendering detail rather than replacing the control, most of the accessibility work is already done for you — focus indication, keyboard operation, and label association all keep working exactly as they did before. The one thing worth checking yourself is contrast: a checked checkbox needs enough contrast against its unchecked state and against the page background for someone with low vision to tell at a glance whether it’s on. The same general contrast guidance covered in accessibility basics applies here — don’t pick an accent color that’s only a shade or two different from the surrounding background.

If your design calls for something accent-color can’t do — a completely custom shape, an icon instead of a checkmark, a switch-style toggle — you still need the full appearance: none rebuild, styled against real form states using the pseudo-classes covered in form validation. But for the very common case of “just recolor the built-in control,” accent-color is a one-line fix for something that used to take a component.

Browser behavior notes

A few practical details worth knowing:

• Setting accent-color doesn’t change the size of the control. If your design needs larger checkboxes or radios, you still need width/height or transform: scale(), since native controls only partially respect box-sizing properties across browsers.
• Range inputs style their entire filled track with the accent color, not just a thumb — so a range slider’s “progress” portion and a checkbox’s fill both use the same property, even though visually they look quite different.
• There’s no separate property for the unchecked state or the track background of a range input; those still come from the browser’s default styling or, if you need more control, from the pseudo-elements each browser exposes for range inputs (which remain vendor-prefixed and less consistent than accent-color itself).

The takeaway

accent-color gives you brand-consistent checkboxes, radios, range sliders, and progress bars in one CSS declaration, without sacrificing the accessibility behavior that comes free with native form controls. Pair it with color-scheme or light-dark() for a theme-aware accent, and reach for a full custom-control rebuild only when the design genuinely needs a shape or interaction the native element can’t provide.