accent-color for Checkboxes and Radios

The Problem Before accent-color

Before accent-color existed, giving a checkbox or radio button a custom brand color meant either accepting the browser's default blue, or building an entirely custom control from scratch with hidden native inputs and styled replacement elements - a fair amount of work for a small visual change.

Using accent-color

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

This single line recolors the checked state of native checkboxes, radio buttons, range sliders, and progress bars to match a brand color, while keeping the browser's normal native rendering, animations and accessibility behavior fully intact.

Applying It Globally or Selectively

:root {
  accent-color: #1d4ed8; /* applies to all supporting form controls site-wide */
}
.danger-zone input[type="checkbox"] {
  accent-color: #dc2626; /* overridden just in this section */
}

accent-color inherits like most other color properties, so setting it once on :root is often enough for an entire site, with local overrides where a different color makes sense.

What accent-color Does Not Change

It only affects the checked/active color of supported controls - it does not change their size, border, spacing, or unchecked appearance. Deeper visual customization (a completely custom shape, for instance) still requires the more involved custom-control technique covered elsewhere in this section.

Why This Is Worth Using

For most projects, a small brand-colored tint on checkboxes and radios is enough to feel consistent with the rest of the design - accent-color achieves that with a single declaration and no compromise on native accessibility behavior.