Accessibility

CSS accent-color

Sets the specific accent color that will be used by some user-interface controls UI elements (like checkbox, radio, range or progress inputs).

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;

Examples:

input[type='radio'].accent {
  accent-color: darkred;
}

<label>Default accent color:</label>
<input type="radio" checked />

<label>Custom accent color:</label>
<input type="radio" style="accent-color: darkred;" checked />

↓

Default accent color:

Custom accent color:

---

It also follow the user's color scheme preference (light or dark mode).

Preview Tool

accent-color.glitch.me (source: https://web.dev/articles/accent-color#potential_future)

CSS-Tricks article

Reduced Motion Media Query

/* Applies styles when Reduced Motion is enabled */
@media screen and (prefers-reduced-motion: reduce) {
}

@media screen and (prefers-reduced-motion) {
}

An Introduction to the Reduced Motion Media Query - CSS-Tricks

Conditional animations with CSS properties - Christian Heilmann

@media (prefers-reduced-motion: reduce) {
  :root {
    --nomotion: none;
  }
}
html {
  scroll-behavior: var(--nomotion, smooth);
}
button {
  animation: var(--nomotion, rotate 1s infinite alternate);
}