The accent-color
property in CSS is capable of re-tinting the accented color of form controls provided by the browser’s default styles with a custom color value.
.element {
accent-color: #f8a100;
}
accent-color
is defined in CSS Basic User Interface Module Level 4, which is currently in Working Draft. That means the details are still a work in progress and could change between now and when the spec becomes a formal recommendation.
Syntax
accent-color: auto | <color>;
- Initial value: auto
- Applies to: all elements
- Inherited: yes
- Computed value: the keyword
auto
or a computed color - Animation type: by computed value type
Values
/* Keyword */
accent-color: auto;
/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);
/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;
Finally, an “easy” way to style forms!
Styling forms has traditionally been… well, awful. No need to look further than customizing the <progress>
element to see just how difficult it is to style controls. What that generally leads to is a decision between accepting the browser’s default styles or a major lift to reset and recreate them from scratch.
Here’s what it usually takes to get a custom <progress>
color:
accent-color
allows us to change the color used in form controls with just one line of CSS:
It works with specific form controls
Before you go off adding accent colors to all the things, it’s worth noting that four specific form controls support the accent-color
property:
- checkboxes (
<input type="checkbox">
) - radio buttons (
<input type="radio">
) - range (
<input type="range">
) - progress (
<progress>
)
It works with preferred color schemes
The accent-color
property respects color schemes. If a user has their preferred color scheme set to, say, light in their OS settings then the browser has to evaluate the accent-color
value and determine an appropriate UI color for it. This way, we’re assured an accessible color contrast between the browser’s UI and the accent. There’s no putting up with a light accent color that sits against light form control UI.
![](jpg/radio-buttons-accent-color-ui5441.jpg)
Each browser has its own way of calculating what color to use. This demo on Glitch shows a series of checkbox controls with various accent colors. View it in a browser that supports accent-color
to see how that browser pairs UI color with different accent colors.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/08/DJhB56n10Eh8O29RsRdE.webp?resize=1600%2C1664&ssl=1)
And, if we have an accent color that we love but it just ain’t working with the browser’s choice of UI color, we can reach for the color-scheme
property to override it.
Buuuuuut, you might not wanna question the browser’s choice even if it ends up a little inconsistent between browsers. That’s a lot to juggle and you might do more harm to the UI’s accessibility than good.
The browser will not override an accent-color
in dark mode like it sometimes does in other situations.
A different approach is required for other form controls
Again, only a few form controls currently support accent colors. That means we still need to resort to traditional hacks approaches to styling other types of form controls. But, hey, Adam Argyle and Joey Arhar have your back with a nice snippet that helps bring an accent color to other form controls as well as list markers, selection, and visible focus:
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
Browser support
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
No | 93 | 92 | 93 | 15.4 | 79 |
iOS Safari | Android Chrome | Android Firefox | Android Browser | Opera Mobile |
---|---|---|---|---|
15.4 | 104 | 101 | 104 | No |
Source: caniuse
accent-color
on ShopTalk
Video: Chris and Dave show off not just the basics of accent-color
, but how it can be used to write leaner CSS, account for color schemes, and even some tricks that would have been difficult to pull off without it.
Further reading
- CSS accent-color (web.dev)
- CSSWG Pull Request #5187 (GitHub)
- accent-color CSS property (Chrome Platform Status)
- Firefox Bug Ticket #1705605 (Mozilla Bugzilla)
- Safari Bug Ticket #227587 (Safari Bugzilla)
- Request for position: accent-color CSS property (Chromium message to Safari)