Repository navigation
[css-ui-4] outline-color: auto should not be required to represent the accent color #14148
Description
The spec currently says:
When
outline-styleisauto,outline-color: autocomputes toautoand represents the accent color.
I don't think outline-color: auto should be required to represent the accent color.
When a control already uses the accent color, drawing the focus outline in the same color can make the outline less distinguishable from the control itself. Since the purpose of the outline is to clearly indicate focus, it should remain visually distinct.
I think outline-color: auto should instead be left up to the UA, allowing it to choose a color that provides a more effective focus indicator while still matching the platform's design.
Activity
zcorpan commentedon Sep 9, 2026
I agree with this and was surprised that
accent-coloraffected the outline color in Firefox (it's still the system outline color in Safari and Chrome, on macOS at least). cc @emilioGive the queue one ordering and the browser's own focus rings
emilio commentedon Sep 10, 2026
What's the surprising part? The form controls should look consistent when focused and we use the accent color to style them.
zcorpan commentedon Sep 10, 2026
If I want to change
accent-colorbut only for checkboxes, now the focus outline color is inconsistent across focusable elements, with no way to undo the focus outline color AFAIK. (Demo.)On the other hand, changing the OS theme color in macOS changes both the control color and the focus outline color. But it's a global switch, not per-control.
emilio commentedon Sep 10, 2026
I'm still confused about the use case tho, why would you want inconsistent accent-color? In any case I think it's ok not to require this per spec but...
zcorpan commentedon Sep 10, 2026
Text fields and buttons usually aren't affected by
accent-colorexcept for the focus ring, so it seems reasonable to want to tweak the color of checkboxes without wanting it to affect the focus ring. (Compare with the "Comment" button below which is green, but has a blue focus ring, consistent with all other focusable elements in the page.)zcorpan commentedon Sep 10, 2026
An option could be to support
outline-color: system-accent-coloror so which uses the system accent color instead of taking theaccent-color.sb3nder commentedon Sep 10, 2026
can't
outline-color: autobe the system color, andoutline-color: AccentColortakeaccent-color?emilio commentedon Sep 10, 2026
The problem is that
outline-style: autodoes more things thanoutline-style: solid, andoutline-style: autodoesn't respectoutline-color(and can't, because by default it would turn all outlines black).sb3nder commentedon Sep 10, 2026
Why?
The spec says:
In Chrome
outline-colorworks fine withoutline-style: auto.emilio commentedon Sep 10, 2026
Huh, I guess it does. That's a bit weird tho? I find it weird that this has a black outline:
Just because
outline-colordefaults tocurrentColor?emilio commentedon Sep 10, 2026
I guess what Blink does in the UA sheet to prevent that by default is:
sb3nder commentedon Sep 10, 2026
Maybe
-webkit-focus-ring-colorcould be removed ifoutline-color: autodoes the same thing.