Intent to Ship: System accent color for accent-color property.

[Chromestatus]

Contact emails

priy...@microsoft.com

Explainer

None

Specification

https://drafts.csswg.org/css-ui-4/#widget-accent

Summary

This feature empowers web developers to enhance the visual appeal of their websites by leveraging the operating system's accent color for form elements. By utilizing the "accent-color" CSS property, developers can ensure that form elements such as checkboxes, radio buttons, and progress bars automatically adopt the accent color defined by the user's operating system. This feature is an enhancement to existing feature that is already shipped in Chromium: https://groups.google.com/a/chromium.org/g/blink-dev/c/WwYkLjbGhoA

Blink component

Blink>CSS

Search tags

accent-color, accent, color, system accent color

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: Shipped/Shipping Firefox currently supports this feature on Mac and Linux platforms.

WebKit: No signal

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

When the platform's accent color is utilized for the "accent-color" CSS property, either due to the absence of a specified value or when set to "auto," the getComputedStyle() JS function returns "auto" instead of the actual hexadecimal value of the color being applied. Related link: https://github.com/w3c/csswg-drafts/issues/6158

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

No

This feature is currently supported on Windows, macOS, and ChromeOS. Future work for Linux is planned and can be tracked at the following link: https://issues.chromium.org/issues/391917949. Android features a setting for accent color, and we plan to add support for Android in the future. The strategy is to release this feature incrementally, allowing web developers to provide feedback and assess the necessity of allocating additional resources for other less requested platforms.

Is this feature fully tested by web-platform-tests?

Yes

- https://wpt.fyi/results/css/css-ui/accent-color-visited.tentative.html - https://wpt.fyi/results/css/css-ui/accent-color-parsing.html - https://wpt.fyi/results/css/css-ui/accent-color-computed.html - https://wpt.fyi/results/css/css-typed-om/the-stylepropertymap/properties/accent-color.html - https://wpt.fyi/results/css/css-ui/animation/accent-color-interpolation.html Note: The provided links are WPT for the accent-color property, including scenarios where the value is set to "auto." This feature relies on the platform's accent color and necessitates a WebDriver extension to simulate the accent-color property accurately. To ensure consistent testing with WPT, we would need to look into WebDriver API to support this functionality properly.

Flag name on about://flags

None

Finch feature name

CSSSystemAccentColor

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40764875

Estimated milestones

Shipping on desktop

137

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6548224737017856?gate=5857060564238336

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/q9zf-frdewo/m/zxw2HuzGAQAJ

This intent message was generated by Chrome Platform Status.

[Alex Russell]

Hey Priya,

Can we make sure to request explicit signals from WebKit? Thanks.

LGTM1 modulo that nit.

Best,

Alex

[Mike Taylor]

Just to clarify, this intent proposes to add an `auto` value to accept-color, that picks up the system accent-color. Do I have that right?

Are there any bugs to track this WebDriver follow-up work?

Flag name on about://flags

None

Finch feature name

CSSSystemAccentColor

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40764875

Estimated milestones

Shipping on desktop

137

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6548224737017856?gate=5857060564238336

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/q9zf-frdewo/m/zxw2HuzGAQAJ

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/54317d12-4347-4265-8f06-c9d1dd795110n%40chromium.org.

[Priya Palanisamy]

Hi Mike,

Yes, the I2S proposes using the system accent color when the value is set to "auto". To clarify, "auto" is also the default option if no value is provided. Therefore, if the accent-color is not explicitly set, the form elements will automatically use the system accent color by default.

Thanks,

Priya

---

From: Mike Taylor <mike...@chromium.org>
Sent: Tuesday, April 29, 2025 7:46 AM
To: Alex Russell <sligh...@chromium.org>; blink-dev <blin...@chromium.org>
Cc: Chromestatus <ad...@cr-status.appspotmail.com>; Alison Maher <alm...@microsoft.com>; Howard Wolosky <Howard....@microsoft.com>; Joey Arhar <jar...@chromium.org>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Natasha Gaitonde <naga...@microsoft.com>; Priya Palanisamy <priy...@microsoft.com>
Subject: [EXTERNAL] Re: [blink-dev] Re: Intent to Ship: System accent color for accent-color property.

 

You don't often get email from mike...@chromium.org. Learn why this is important

[Priya Palanisamy]

Thanks Alex.

 
>> Can we make sure to request explicit signals from WebKit? Thanks.

I was able to file a position for WebKit:  Request to use platform accent color for accent-color property as default option · Issue #485 · WebKit/standards-positions

[Mike Taylor]

Thanks,

LGTM1

[Mike Taylor]

Or rather, LGTM2

[Yoav Weiss (@Shopify)]

On Wednesday, April 30, 2025 at 1:07:19 PM UTC+2 Mike Taylor wrote:

Or rather, LGTM2

On 4/30/25 7:06 AM, Mike Taylor wrote:

Thanks,

LGTM1

On 4/29/25 1:45 PM, Priya Palanisamy wrote:

Hi Mike,

Yes, the I2S proposes using the system accent color when the value is set to "auto". To clarify, "auto" is also the default option if no value is provided. Therefore, if the accent-color is not explicitly set, the form elements will automatically use the system accent color by default.

Would that change current rendering of sites that don't set any accent-color?

 

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Priya Palanisamy]

Hi Yoav,

For

 >>" Would that change current rendering of sites that don't set any accent-color?"

Yes, when accent-color is not set, it is basically set to default value "auto", which will take system's accent color with this change.

[Dan Clark]

LGTM3

It turns out from the WebKit position thread that this is already shipped there as well.  Request to use platform accent color for accent-color property as default option · Issue #485 · WebKit/standards-positions

-- Dan

[Emilio Cobos Álvarez]

Curious, is the idea to do this on Windows too? (I assume that given Microsoft is implementing, it is).

Is this also going to affect things like selection colors and the Highlight / AccentColor system colors?

For context, the reason it doesn't work on Firefox is that we had to turn it off because grey accent colors were confusing to users and such, see https://bugzilla.mozilla.org/show_bug.cgi?id=1776588 for some discussion.

 -- Emilio

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4dfca947-254a-47b2-885e-164a71f90b9cn%40chromium.org.

[Howard Wolosky]

Emilio, this I2S is for the Windows implementation.

The Mac implementation was already done.  We (Microsoft) will be working on the Linux implementation in the coming weeks.

---

From: Emilio Cobos Álvarez <emi...@crisal.io>
Sent: Saturday, May 3, 2025 5:29 AM
To: Daniel Clark <dan...@microsoft.com>; blink-dev <blin...@chromium.org>
Cc: Priya Palanisamy <priy...@microsoft.com>; yoav...@chromium.org <yoav...@chromium.org>; mike...@chromium.org <mike...@chromium.org>; Chromestatus <ad...@cr-status.appspotmail.com>; Alison Maher <alm...@microsoft.com>; Howard Wolosky <Howard....@microsoft.com>; jar...@chromium.org <jar...@chromium.org>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Natasha Gaitonde <naga...@microsoft.com>; sligh...@chromium.org <sligh...@chromium.org>
Subject: Re: [EXTERNAL] Re: [blink-dev] Re: Intent to Ship: System accent color for accent-color property.

 

Some people who received this message don't often get email from emi...@crisal.io. Learn why this is important

[Priya Palanisamy]

Hi Emilio,

To clarify, this feature affects ONLY form elements like Radio button, check box, Progress bar etc., that enables user selection. These elements will take system accent-color when the accent-color CSS property is not set or set to auto.

Highlight or AccentColor System Color Keywords are NOT affected by this change. 

Thanks,

Priya

---

From: Emilio Cobos Álvarez <emi...@crisal.io>
Sent: Saturday, May 3, 2025 5:29 AM
To: Daniel Clark <dan...@microsoft.com>; blink-dev <blin...@chromium.org>

Cc: Priya Palanisamy <priy...@microsoft.com>; yoav...@chromium.org <yoav...@chromium.org>; mike...@chromium.org <mike...@chromium.org>; Chromestatus <ad...@cr-status.appspotmail.com>; Alison Maher <alm...@microsoft.com>; Howard Wolosky <Howard....@microsoft.com>; jar...@chromium.org <jar...@chromium.org>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Natasha Gaitonde <naga...@microsoft.com>; sligh...@chromium.org <sligh...@chromium.org>
Subject: Re: [EXTERNAL] Re: [blink-dev] Re: Intent to Ship: System accent color for accent-color property.

 

You don't often get email from emi...@crisal.io. Learn why this is important

[Emilio Cobos Álvarez]

Thanks! One quick follow-up if you don't mind: It's not clear whether this affects the default selection (as in, text selection) colors. Are they effected?

It does feel odd / wrong to expose an inconsistent colors between AccentColor / Highlight and form controls / selection... As an author, if I want to use the default form controls and want my custom controls to feel native, I'd expect I'd be able to use AccentColor/AccentColorText for that.

That said, I understand there are more concerns about fingerprinting with those (not sure if Blink has or plans to have mitigations to prevent the native accent color from being read back from a canvas or so, if you e.g. draw a checked checkbox?). At least in Gecko we were considering making other platforms behave like windows in this area, to prevent fingerprinting the system accent color / system theme / etc...

Thanks,

 -- Emilio

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN6PR00MB2408F3ABDFC3247DDC754E9DCF8E2%40MN6PR00MB2408.namprd00.prod.outlook.com.

[Joey Arhar]

Text selection colors are not affected, I just tested it out with experimental web platform features enabled on Canary.

I agree that it would be nice to expose these colors in AccentColor/AccentColorText, but the fingerprinting concern as you mentioned is still there.

The native accent color should not be readable in any way, including drawing these elements to a canvas. This example makes a blue checkbox instead of a native accent colored one in chrome canary: https://codepen.io/jarhar/pen/WbbyjEY

[Stephen Chenney]

On Tue, May 6, 2025 at 5:00 PM Joey Arhar <jar...@chromium.org> wrote:

Text selection colors are not affected, I just tested it out with experimental web platform features enabled on Canary.

I agree that it would be nice to expose these colors in AccentColor/AccentColorText, but the fingerprinting concern as you mentioned is still there.

The native accent color should not be readable in any way, including drawing these elements to a canvas. This example makes a blue checkbox instead of a native accent colored one in chrome canary: https://codepen.io/jarhar/pen/WbbyjEY

Regarding drawing to canvas, we already have fingerprinting concerns from platform colors, scrollbars etc. Currently these can only be read-back via foreign object content in SVG-as-image. I'm working on a proposal to remove this pathway but I wouldn't expect anything to land until later in the year. The intent discussed here does not make things significantly worse (or better).

Stephen. 

 

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAK6btwLtA3fRB_sixD5%2B210Zwrrv9C4jrr%3D5p_sMS4ZH6nDacQ%40mail.gmail.com.

[Priya Palanisamy]

+1 to Joey's point - This feature doesn't influence the default text selection colors.

As for your subsequent question/concern:

>>It does feel odd / wrong to expose an inconsistent colors between AccentColor / Highlight and form controls / selection...

The consistent behavior between these 2 features is a valid point. It might be beneficial to dive deeper into this within the CSSWG. Since the AccentColor Keyword using system color poses fingerprinting risks, I think we could start by resolving https://github.com/w3c/csswg-drafts/issues/10372. Based on the resolution, we may start a new discussion on the distinct behavior between these features.

---

From: Joey Arhar <jar...@chromium.org>
Sent: Tuesday, May 6, 2025 2:00 PM
To: Emilio Cobos Álvarez <emi...@crisal.io>
Cc: Priya Palanisamy <priy...@microsoft.com>; Daniel Clark <dan...@microsoft.com>; blink-dev <blin...@chromium.org>; yoav...@chromium.org <yoav...@chromium.org>; mike...@chromium.org <mike...@chromium.org>; Chromestatus <ad...@cr-status.appspotmail.com>; Alison Maher <alm...@microsoft.com>; Howard Wolosky <Howard....@microsoft.com>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Natasha Gaitonde <naga...@microsoft.com>; sligh...@chromium.org <sligh...@chromium.org>; mtho...@mozilla.com <mtho...@mozilla.com>

Search tags [http:///features#tags:accent-color]accent-color, [http:///features#tags:accent]accent, [http:///features#tags:color]color, [http:///features#tags:system%20accent%20color]system accent color

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/54317d12-4347-4265-8f06-c9d1dd795110n%40chromium.org.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4dfca947-254a-47b2-885e-164a71f90b9cn%40chromium.org.