DEV Community

Cover image for The CSS `accent-color` property explained
Technophile
Technophile

Posted on

The CSS `accent-color` property explained

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
  }
}
Enter fullscreen mode Exit fullscreen mode

Demo

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


Browser Support

Browser support chart for accent color property

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

Top comments (1)

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍