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 8 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