*Contact emails* [email protected] *Specification* https://www.w3.org/TR/css-color-4/#css-system-colors <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss-color-4%2F%23css-system-colors&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263355947969%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=bn%2BZS%2FTPPurMIPKv%2FVMTsLP2bdHKrG9T6%2BcY5ReRXpY%3D&reserved=0>
*Summary* `AccentColor` and `AccentColorText` reflect the element's effective `accent-color` value instead of only platform-provided system accent colors. This allows CSS to reference the same colors used by `accent-color` styling, making it easier to keep custom styling consistent with form controls and other accented UI. It aligns Chromium's behavior with the CSS Color Module Level 4 specification. *Blink component* Blink>CSS <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%3Fq%3Dcustomfield1222907%3A%2522Blink%253ECSS%2522&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263355961615%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=%2FrOBhNA%2FtkSP%2F4hyYzb8PGvHOogw2%2B8dPMdUb8ZjmPM%3D&reserved=0> *Web Feature ID* accentcolor <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwebstatus.dev%2Ffeatures%2Faccentcolor&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263355977495%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=p%2FkBdXHRL5kxO89K2nARX2JxANP06XnWkaZWeJ56tjQ%3D&reserved=0> *Motivation* Currently, `AccentColor` and `AccentColorText` keywords have been implemented in a limited capacity for Chromium. They reflect the OS' chosen system accent color when `accent-color` is set to `auto` in an installed web app, and return a default value otherwise. The CSSWG resolved that the keywords should reflect the value of `accent-color`, allowing developers to use the keywords for intuitive styling of elements. Without this change, the keywords provide no additional value unless being used specifically for a system accent color. *Initial public proposal* [css-color-4] [css-ui-4] `color: AccentColor; accent-color: currentColor` cycle · Issue #14192 · w3c/csswg-drafts <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fissues%2F14192%23issuecomment-5202877510&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263355994546%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=tIgdVWj6wmIADgr1%2BOW0VrMmLjlBNAV8MU4cdc8ZYMo%3D&reserved=0> *TAG review* This resolution is a minor update to an existing API, it is a final published standard and is actively being worked on by another browser. *TAG review status* Not applicable *Risks* *Interoperability and Compatibility* Low risk. This change aligns Chromium with the CSS Color Module Level 4 specification for `AccentColor` and `AccentColorText`. Sites using these keywords may observe different color values when `accent-color` is specified, but the new behavior matches the standardized definition of the keywords and improves interoperability. *Gecko*: Positive ( https://github.com/mozilla/standards-positions/issues/1438 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmozilla%2Fstandards-positions%2Fissues%2F1438&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356007096%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=0ZKaYE%2BlLXwtkD2mmQbR3VF5BIOBMgr%2FTDUPZwVy2yg%3D&reserved=0> ) *WebKit*: Shipped/Shipping (https://github.com/WebKit/WebKit/pull/74949 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FWebKit%2FWebKit%2Fpull%2F74949&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356018987%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=Yc1GISp%2FjDoVdVPhHZiP3VAF1oWvkQt9viUhRi6WxTg%3D&reserved=0> ) WebKit currently has a PR out to make this change (*See link.)* *Web developers*: Positive (https://issues.chromium.org/issues/536420071 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%2F536420071&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356032448%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=KOkEmqij0NsGqRlTjYR9jpuieKBKrNeqryFdtFbruiI%3D&reserved=0> ) CSSWG Issue: https://github.com/w3c/csswg-drafts/issues/5900#issue-795306279 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fissues%2F5900%23issue-795306279&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356045227%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=dujEDGW6NWJlFND4fxwSiW2bhkZiHdGjOIn%2F14x%2BA10%3D&reserved=0> Positive upvotes on both CRBug and original CSSWG issue *Other signals*: *Ergonomics* This change makes `AccentColor` and `AccentColorText` behave consistently with accent-color styling defined by the specification. It does not introduce new APIs or syntax and is expected to reduce developer confusion by making these keywords reflect the colors authors already use for `accent-color`. *Activation* No developer action is required to enable or adopt this feature. Existing use of `AccentColor` and `AccentColorText` automatically receives the updated spec-defined behavior. *Security* This feature does not expose new information, permissions, or browser capabilities. It only changes how existing CSS color keywords resolve in accordance with the CSS Color Module Level 4 specification. *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, any change is cosmetic. *Debuggability* The resulting colors are visible through existing CSS inspection and debugging tools. Developers can inspect `accent-color`, `AccentColor`, and `AccentColorText` using standard DevTools workflows without requiring new debugging surfaces. *Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?* Yes *Is this feature fully tested by **web-platform-tests* <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromium.googlesource.com%2Fchromium%2Fsrc%2F%2B%2Fmain%2Fdocs%2Ftesting%2Fweb_platform_tests.md&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356061738%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=zlbcgUy7au0B6340fCuW3KfP42peHYw6%2FPl5dnH7BzM%3D&reserved=0> *?* Yes https://wpt.fyi/results/forced-colors-mode/accent-color-keyword-forced-colors.html?label=master&label=experimental&aligned <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fforced-colors-mode%2Faccent-color-keyword-forced-colors.html%3Flabel%3Dmaster%26label%3Dexperimental%26aligned&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356078511%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=TvFC1st5f84frwtsKeuw1%2B6AXlXNW32v6114uj74auE%3D&reserved=0> https://wpt.fyi/results/css/css-ui/accent-color-keyword-animation.html?label=master&label=experimental&aligned <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fcss%2Fcss-ui%2Faccent-color-keyword-animation.html%3Flabel%3Dmaster%26label%3Dexperimental%26aligned&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356095498%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=ktoyn56AOGwfTbm3bXmDLi%2Bcawl1q%2FAWgxDrTe2EKu8%3D&reserved=0> https://wpt.fyi/results/css/css-ui/accent-color-keyword-cyclic.html?label=master&label=experimental&aligned <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fcss%2Fcss-ui%2Faccent-color-keyword-cyclic.html%3Flabel%3Dmaster%26label%3Dexperimental%26aligned&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356111531%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=acRJGYf1uIqjXY5tz4LwKJjTk5%2Be6ZqB7E0A42QLqyk%3D&reserved=0> https://wpt.fyi/results/css/css-ui/accent-color-keyword-resolution.html?label=experimental&label=master&aligned <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fcss%2Fcss-ui%2Faccent-color-keyword-resolution.html%3Flabel%3Dexperimental%26label%3Dmaster%26aligned&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356128240%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=e%2FfOxUb%2FYh2yHMVPOhMFVyx2FzqRBaAx0b0lNt7uEiw%3D&reserved=0> https://wpt.fyi/results/css/css-ui/accent-color-text-keyword-resolution.html?label=experimental&label=master&aligned <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwpt.fyi%2Fresults%2Fcss%2Fcss-ui%2Faccent-color-text-keyword-resolution.html%3Flabel%3Dexperimental%26label%3Dmaster%26aligned&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356148963%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=EzMRepiCd81cqR0vYoRK5hSe2GrEaOP043nzk9VYU%2Fc%3D&reserved=0> *Note: the broader `forced-colors-mode` WPT suite covers substantially more than `AccentColor` and `AccentColorText`, so existing Blink failures in that directory are not specific to this feature. Dedicated WPT coverage for this change has now landed, but these tests are expected to fail until the dependent implementation change ships.* *Flag name on about://flags* *No information provided* *Finch feature name* CSSSystemAccentColorKeyword *Rollout plan* Will ship enabled for all users *Requires code in //chrome?* False *Tracking bug* https://issues.chromium.org/issues/536420071 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%2F536420071&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356167601%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=1Z5S4Y9h9bsU5l12mgM7QjkYA7V0stEBSw%2FW9%2F9Y97w%3D&reserved=0> *Measurement* The `AccentColor` feature counter and usage is viewable at https://chromestatus.com/metrics/webfeature/timeline/popularity/6 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2Fmetrics%2Fwebfeature%2Ftimeline%2Fpopularity%2F6&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356184400%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=gM1YvTQbnkvuF4JZFO270u0iiLsW%2FGVC%2B9%2BunhtdcGU%3D&reserved=0> *Availability expectation* Feature is available on Web Platform Baseline within 12 months of launch in Chrome. Safari is mid-implementation and Mozilla has shown positive signals towards implementation. *Adoption expectation* Feature is considered best practice for providing `accent-color` styling as a value keyword within 12 months of reaching Web Platform baseline. *Adoption plan* We will drive availability through the existing CSSWG standardization and coordination with other browser vendors. For adoption, we will update MDN and Chrome developer documentation to recommend AccentColor and AccentColorText as the preferred way to reuse the effective accent-color value in authored CSS. *Non-OSS dependencies* *Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?* No. *Estimated milestones* Shipping on desktop 159 Shipping on Android 159 *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).* The standardized text for this feature has been in spec for a few years now with no changes. There are no open issues left and changes are not anticipated. *Link to entry on the Chrome Platform Status* https://chromestatus.com/feature/6207138742534144?gate=6191488821231616 <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2Ffeature%2F6207138742534144%3Fgate%3D6191488821231616&data=05%7C02%7Cakyereboah%40microsoft.com%7C4e8179bfc54e4c5f71ce08df29770355%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639275263356201187%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=aamqOIpmhVAhhHH9CFqKjpyhe45typTRswAREkJUXzQ%3D&reserved=0> -- 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 [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/423e6b8b-31f5-4ac1-912d-9f53ad42e0b5n%40chromium.org.
