The CSS accent-color is a part of the CSS Basic User Interface Module Level 4. The CSS accent-color property is a CSS property used to change the browser's default color to contrast the utilitarian background and foreground colors of some input elements. This color is typically known as the accent color of the input element. In this article, we'll be discussing how the CSS accent-color works.

progress{
  accent-color: yellow;
}

The code above changes the foreground color to yellow, and adjusts the background color to contrast it. The browser is responsible for adjusting the contrast between them for it to appear aesthetically pleasing. Here's the result for the code above below:

https://codepen.io/sunkanmii-the-styleful/pen/xxmVgjN

The accent-color CSS property only works for these CSS properties for browsers that support them:

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

The CSS accent-color is formally defined as:

accent-color: auto | <color>

This means it can take two values:

auto: The browser's selected default color
<color>: Can be any accepted CSS color value from RGB to HEX, etc.

Demo

In the demo below, we have a simple progress bar animation that shows how the browser's accent-color contrasts three colors (red, yellow, and green) at different intervals of progression. Notice when the progress bar's foreground color changes to red, the background color remains white for better contrast, but when the foreground color changes to yellow, the background color changes to grey, and finally the background color changes towhite when the foreground changes to green for the same reason.

https://codepen.io/sunkanmii-the-styleful/pen/xxmVgao

Unfortunately, CSS has not advanced to the point of animating this progress bar's accent-color with an increase in the progress bar's value. All has to be done with a little JavaScript.

Conclusion

In this article, we learned how CSS accent-color works with a simple progress bar animation demo that shows how the browser adjusts its contrast when the accent-color is changed. Do you have a cool demo you'd like to show on this property or any useful info you'd love to add? Let me know in the comments below! Thank you for reading, and I hope to see you in the next article!

CSS Tip: How CSS accent-color Works

Demo

Conclusion