# accent-color

Status: Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); widely available. Safari 26.2 added automatic legibility adjustment.  
Source: https://webkit.org/blog/17640/webkit-features-for-safari-26-2/  
Page: https://designforai.dev/css/accent-color

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

## HTML

```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>
```

## CSS

```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; }
```

Fallback: Unsupported browsers keep the OS default color.

## 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.