1-Minute CSS Tip: Accent Colors

First, the video. Below is a more detailed explanation (it's mostly a video transcript, plus some additional details.)

You built a website, and one of your pages has a form. If you are using the native form controls, you may be facing some issues:

their color doesn't match the web page's styles
their look is not the same across all the browsers
their color differs across operating systems (even for the same browser!)

This isn't very pleasant and breaks the website experience. We can fix it by creating our components in a design system. Still, we will need to take care of how the components look and how they behave, all without breaking the web accessibility features that we get out of the box with the native elements.

Luckily, there is a CSS property that can help us: accent-color. Its basic usage is straightforward: just one line of code.

input, progress {
  accent-color: #c9c;
}

With that, browsers will update some form elements to be painted with the specified color, providing a more consistent experience across browsers and platforms.

Currently, accent-color applies only to four controls:

Radio buttons
Checkboxes
Progress bars ()
Sliders ()

It is safe to use as all major desktop and mobile browsers widely support it. And if, for any reason, the browser doesn't support it, the only downside is that the form controls will be displayed with the ugly default color.

Another considerable advantage of this method is that browsers come with built-in color contrast accessibility features for accent-color. What does this mean? If you pick a color that wouldn't have enough contrast, the browser will modify the secondary color for the form control to provide additional contrast.

For example, in the video above, when we select yellow as the accent-color value, borders turn darker (for checkboxes and radio buttons), icons go black (in checkboxes), or backgrounds go black (for sliders and ranges), providing a higher contrast that wouldn't be there between yellow and white.