accent-color

Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); disponible de forma generalizada. Safari 26.2 añadió ajuste automático de legibilidad.

Chrome 93Edge 93Safari 15.4Firefox 92

Recolorea checkboxes, radios, sliders de rango y barras de progreso nativos con el color de tu marca, manteniéndolos nativos y accesibles.

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: Los navegadores sin soporte conservan el color por defecto del sistema.

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

Prompt

No sustituyas checkboxes, radios, rangos ni barras de progreso nativos por marcado propio. Pon `accent-color: var(--brand)` en el formulario (o en `:root`) para que adopten el color de marca, y mantén `color-scheme` definido para que los controles en modo oscuro se rendericen bien.