Accent Color Access, Revisited

Earlier this week Miriam Suzanne enlightened us with the difference between accent-color and AccentColor, and she even added an interactive CodePen:

Form controls use the AccentColor…
(which we can access, but not set)

… Unless we provide an accent-color
(which we can set, but not access)

Initially I assumed there is not much for me to do besides updating my article on accent-color from two years ago.

But seeing that we may eventually end up with cross-browser support for AccentColor—only Chromium is missing at the time of writing—, you now additionally have the option to go with the operating system (OS) default, and make use of it beyond form controls. Let’s not forget AccentColorText, so you actually have two colors, one for the text and the other for its background.

Compare this to accent-color, here you do not really know what the accompanying text color will be, as browsers choose it for you. But they make sure it is accessible, contrast-wise. It is also worth pointing out, setting accent-color does not affect AccentColor, which always remains on the value defined by the OS.

That said, if you want any custom color, you need the custom properties solution from the original article.

Contrary, if you do want to piggyback on the default, just take a look at my simple CodePen example.

To recap:

• AccentColor and AccentColorText are CSS system colors that can be assigned wherever a CSS property appreciates a color.
• accent-color is a CSS property that a color can be assigned to.