CSS accent-color Property

Sets the color of user interface controls like checkboxes, radio buttons, range sliders, and progress bars.

selector { accent-color: <color>; }
auto The browser uses its default platform color for user interface controls.
<color> Sets a specific color to be used as the accent for the control.

Code Examples

A basic example showing how applying accent-color to a parent container styles all child form inputs simultaneously.

<style>
  form {
    accent-color: #e91e63;
    font-family: sans-serif;
  }
</style>
<form>
  <label><input type="checkbox" checked> Subscribe</label><br>
  <label><input type="radio" name="choice" checked> Option A</label>
  <label><input type="radio" name="choice"> Option B</label><br>
  <input type="range" min="0" max="100" value="70">
</form>

An advanced example using JavaScript to dynamically toggle the accent-color of a progress bar and checkbox based on user interaction.

<style>
  .custom-accent {
    accent-color: #007bff;
  }
</style>
<div class="custom-accent">
  <progress id="pBar" value="50" max="100"></progress>
  <input type="checkbox" id="colorSwitch"> Change Theme
</div>
<script>
  const box = document.getElementById("colorSwitch");
  const parent = document.querySelector(".custom-accent");
  box.addEventListener("change", (e) => {
    parent.style.accentColor = e.target.checked ? "#ff5722" : "#007bff";
  });
</script>

Pro Tip

You can use CSS variables with accent-color to allow users to theme their own interface. By updating a single variable on the body tag, every form input on the page can instantly switch from 'corporate blue' to 'high-energy orange' without rewriting a single line of input-specific CSS.

Deep Dive

Think of accent-color as a quick coat of paint for standard browser-generated UI widgets. Historically, if you wanted a purple checkbox, you had to hide the native input and build a fake one from scratch using CSS and div elements. This property lets the browser keep its built-in accessibility and logic while you simply swap the primary highlight color. It currently targets four specific elements: checkboxes, radio buttons, range inputs, and progress bars. When you apply a color, the browser is smart enough to determine if it needs a light or dark checkmark or thumb to maintain readable contrast.

Best Practices

Apply this property at the root or form level to ensure all interactive elements share a consistent brand identity. This prevents the user from feeling like they are jumping between different apps within your single page. Always test your chosen color against the background to ensure it stands out enough for users to see.

Common Pitfalls

Don't expect this to style every part of a complex widget. It only changes the primary 'filled' or 'active' color. If you need to change borders, shadows, or the track of a range slider specifically, you will still need to use more advanced, browser-specific pseudo-elements.

Accessibility

The browser automatically handles the contrast ratio of the glyph (the check in the box or the dot in the radio). If you pick a very light accent-color, the browser will likely use a dark checkmark. This helps you stay compliant with accessibility standards without manual intervention, but you should still verify visibility with a contrast checker.

Dev Data Table: accent-color property

default auto
animatable yes
inherited yes
experimental no
year_intro 2021
year_standard 2022
js_syntax_1 element.style.accentColor = "#00ff00";
js_syntax_2 element.style.setProperty("accent-color", "#00ff00");
js_note When manipulating this property in JavaScript, use camelCase for the style object or the standard kebab-case string within the setProperty method.
browsers { "Chrome": 93, "Edge": 93, "Firefox": 92, "Safari": 15.4, "Opera": 79, "Chrome Android": 93, "Safari on iOS": 15.4, "Samsung Internet": 16, "Opera Mobile": 66 }
results render here...