1-Minute CSS Tip: Accent Colors
Learn about the accent-color CSS property and how it can improve user experience and accessibility (with a 1-minute video)
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 (
<progress>) - Sliders (
<input type="range">)
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…