accent-color

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.

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.

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

Video: accent-color on ShopTalk

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)