CSS accent-color: Styling HTML form elements with only one line of CSS

1 min read
CSS accent-color: Styling HTML form elements with only one line of CSS

The CSS property accent-color makes it easy to style HTML form elements with a single line of CSS.

What is the 'accent-color' CSS property?

Styling HTML elements is not always easy. Often the standard style has to be reset for minor design changes and the element has to be styled from scratch. To remedy this, there is now the CSS property accent-color. accent-color is a CSS property from the CSS UI Module Level 4 to personalize some standard HTML elements with an accent color with a single line of CSS.

:root {
    accent-color: #E93CAC;
}
CSS property accent-color in light mode

The property accent-color also works perfectly in conjunction with color-scheme.

@media(prefers-color-scheme: dark) {
    :root {
        accent-color: #59CBE8;
    }
}
CSS property accent-color in dark mode

Which elements support the CSS property 'accent-color'

At the moment only 4 HTML elements support accent-color by default. checkbox, radio, range and progress. A preview of all supported elements is available at https://accent-color.glitch.me/. It is to be expected, however, that there will be even more elements with accent-color support in the future.

Browser Support

At the moment accent-color is only supported by the browsers of just under 62% of internet users.

Browser support of the CSS property accent-color via CanIUse.

The current status can be checked at any time via CanIUse.

Even if some browsers do not yet support accent-color, it is worth using accent-color now because browsers without accent-color -Support continues to use the standard style as fallback and there are no technical restrictions for users of this browser.

Browser-Implementierung garantieren ausreichenden Kontrast

In order to avoid elements with too little contrast, which would impair the accessibility of the page, the browsers automatically calculate a suitable contrast colour for the selected accent-color. However, different browsers use different algorithms. Here, Chrome 95 (left) and Firefox 93 (right) for comparison.

Different browsers calculate the contrast value of the accent-color on different white.

Our conclusion

The CSS property accent-color is an easy way to customize the HTML elements supported so far. Even though only a few elements and not all browsers support accent-color yet, we think it is still worthwhile to use accent-color because there are no technical restrictions for users of browsers without accent-color support and more HTML elements will certainly support this useful CSS property in the future