accent-color

accent-color suggests an accent color for supported native controls, including checkboxes, radio buttons, range inputs, and progress indicators. It preserves the native control instead of rebuilding its checked state or keyboard behavior.

Compare two native controls

<label><input type="checkbox" checked /> Default accent</label>
<label><input class="accent" type="checkbox" checked /> Blue accent</label>

.accent {
  accent-color: #164eae;
}
/* Optional presentation */
label {
  display: block;
  margin: 1rem 0;
}

Both checkboxes keep their native names and keyboard interaction. Press Tab to focus a control and Space to change its checked state.

Values and defaults

The initial value is auto, which lets the browser use its default accent. A CSS color selects another accent. The property is inherited, so it can be set on a form or document root for its descendant controls.

Browsers choose how to apply the color across states and control parts and may adjust accompanying colors for contrast. Not every control or browser combination exposes the same styling. An unsupported declaration leaves the native appearance usable.

A practical form

.preferences { accent-color: #164eae; }

Place a group of radio buttons inside a labeled fieldset, using one shared name for that group. Keep each input associated with a visible label.

Common mistakes

An accent is not a replacement for a text label or an error message. Check high-contrast and forced-color modes, where the browser may use system colors. If appearance removes the native appearance entirely, there may be no native accent part left to color.

A second working case

<fieldset>
  <legend>Reading mode</legend>
  <label><input type="radio" name="mode" value="day" checked /> Day</label
  ><label><input type="radio" name="mode" value="night" /> Night</label>
</fieldset>

fieldset {
  accent-color: #164eae;
}
label {
  display: block;
  padding: 0.7rem;
}

Both radio controls inherit the fieldset’s accent. Tab to the group and use arrow keys to change the choice; the shared name keeps it single-choice.

Sources and browser support

MDN: accent-color describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.