Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
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.

Related Topics

Related Articles