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.

Table of contents

• 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!

Resources

• MDN Docs
• CSS-Tricks
• Web Dev
• W3Schools