accent-color

Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); widely available. Safari 26.2 added automatic legibility adjustment.

Chrome 93Edge 93Safari 15.4Firefox 92

Recolors native checkboxes, radios, range sliders and progress bars to your brand color while keeping them native and accessible.

Checked Radio

CSS

.fx-017 {
  accent-color: #7c3aed;
  font-family: system-ui;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap
}
.fx-017 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-017">
  <label><input type="checkbox" checked> Checked</label>
  <label><input type="radio" name="r" checked> Radio</label>
  <input type="range"> <progress value="60" max="100"></progress>
</div>

Fallback: Unsupported browsers keep the OS default color.

Source: webkit.org/blog/17640/webkit-features-for-safari-26-2/

Prompt

Do not replace native checkboxes, radios, ranges or progress bars with custom markup. Set `accent-color: var(--brand)` on the form (or `:root`) so they adopt the brand color, and keep `color-scheme` set so dark mode controls render correctly.