How to set an accent color

Short answer

accent-color recolors built-in form controls in your site's color:

<style>
  .form { accent-color: deeppink; display: grid; gap: 8px; justify-items: start; }
</style>
 
<div class="form">
  <label><input type="checkbox" checked> Send me news</label>
  <label><input type="radio" name="plan" checked> Monthly</label>
  <input type="range">
  <progress value="60" max="100"></progress>
</div>

For the whole site

The property is inherited, so setting it once is enough:

:root { accent-color: var(--brand, royalblue); }

Why it beats custom checkboxes

Recoloring a checkbox used to mean hiding it and redrawing it from pseudo-elements. accent-color keeps the built-in control: it works with the keyboard, screen readers understand it, and it looks right on a phone. The browser makes the check mark light or dark by itself so it stays visible on the chosen color.

If you need full control

accent-color does not change the shape, size or border. For a completely custom look use appearance: none and draw the control yourself.

Common mistake

People set color or background on input type="checkbox" and wonder why nothing changes. Built-in checkboxes ignore those properties — only accent-color changes their color.