Home >CSS >CSS reference – properties, selectors, functions >accent-color

accent-color

accent-color: auto | <color>

Sets the accent color of form controls drawn by the browser: checkboxes, radio buttons (radio), the input type="range" slider and the progress indicator. The controls keep their look and behavior, they only take over the color of the website.

Values

auto – the default: a color by the browser and the system.
color – any color of the website.

Initial value: auto. Inherited: yes. Applies to: all elements (it shows on checkbox, radio, range and progress).

Examples

Form controls in the default color and in the color of the website:

<div class="row">
  <input type="checkbox" checked> <input type="radio" checked> <input type="range" value="60">
</div>
<div class="row brand">
  <input type="checkbox" checked> <input type="radio" checked> <input type="range" value="60">
</div>

.row { margin-bottom: 6px; }
.brand { accent-color: #e91e63; }

result

Things to watch out for

The browser chooses the color of the check mark and other parts by itself according to contrast – with a light color the check mark can be black. Safari up to version 26.1 did not check the contrast.
It has no effect on other fields (input type="text", select, buttons). A completely custom look of the controls requires appearance: none and drawing your own.
The property is inherited – it is enough to put it on :root or on the form.

Browser support

Not Baseline yet: it does not work in all major browsers yet (without a prefix). Since version: Chrome 93, Firefox 92, Safari 15.4 (fully since 26.2). As of October 2026 (MDN browser-compat-data).