Published at
Updated at
Reading time

While reading the Chrome 91 DevTools release notes, I discovered that soon, we'll be able to define the highlight color of radios and checkboxes using the accent-color CSS property. It allows matching form controls with the website's style and colors.

:root {
  accent-color: #4ab9f8;

What's cool about accent-color is that browsers pick a contrast color providing a reasonable contrast ratio, too. ๐Ÿ‘

Example showing that browser adjust the input radio/checkbox contrast color depending on the defined accent color to provide a reasonable contrast ratio.

I read about this new property in April 2021 for the first time, and now that browsers are on a roll lately, the browser support is looking great already!

MDN Compat Data (source)
Browser support info for accent-color

If your browser supports accent-color, play around with it below.

Choose an accentColor
Choose a colorScheme

If you want evaluate accent-color browser support, use CSS feature queries (@supports (accent-color: red) { /* ... */ }) or CSS.supports in JavaScript. ๐Ÿ‘

Read more about it in the CSS Basic User Interface Module Level 4 or on

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.