Published at
Updated at
Reading time
1min

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
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
939393929215.415.417.093

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

Playground
Choose an accentColor
Choose a colorScheme
Preview

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 web.dev.

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 19 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles