How to style radio and checkbox inputs with accent-color

Written by Stefan Judis
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 6 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