The CSS `accent-color` property explained

#css #webdev #beginners

In CSS, the accent-color property allows you to set the custom color for several UI elements (or more specifically user-interface controls), such as scrollbars, input elements, and range sliders. See the demo here.

How to Use it
Accessibility
Demo
Browser Support
Conclusion
Resources

How to use it

You can either apply accent-color to the root of your HTML or a specific element.

/* general */
:root {
  accent-color: red;
}

/* specific */
.custom {
  accent-color: #12345A;
}

The accent-color currently applies to the following elements:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

Accessibility

By default, the user agent always ensures contrast accessibility under the hood. However, once you set a custom color, the browser doesn't change the color based on the theme or other factors.

If you want to use a custom color for inputs and sliders to match the design, you need to make sure that color contrast is high. To achieve this, we can the prefers-color-scheme query to colors depending on a user's theme.

The "user agent" is a fancy word for a browser

/* for light or default theme */
:root {
  accent-color: #005451; /* dark green */
}

/* for dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #00ece3; /* light green */
  }
}

Demo

You can play with the demo below to see how the accent-color property works.

Browser Support

The accent-color is well-supported across browsers. As of June 15, 2022, support for Internet Explorer has officially ended.

Conclusion

It's always been a pain to style the form elements. While often being underused, the accent-color property is a great way of tweaking the form UI elements without having to write a lot of CSS or rely on JavaScript.

I hope this article has helped you get a better understanding of the accent-color property. If you have any questions or suggestions, feel free to leave a comment below. Thanks for reading!