v149 · css · privacy change
Web App Scope: System Accent Color
The AccentColor and AccentColorText CSS system color keywords — and accent-color: auto — now resolve to their real system values only inside installed PWAs. On the open web, they fall back to a fixed default, removing a fingerprinting vector that exposed the user's OS colour scheme to every website.
accent-color: auto, color: AccentColor, or color: AccentColorText to match the user's OS theme, those styles will no longer reflect the actual system accent in regular browser tabs from Chrome 149. They continue to work in installed PWAs.
at a glance
| Shipped in | Chrome 149 |
|---|---|
| Status | Privacy change — enabled by default |
| Flag | None |
| ChromeStatus | 5106043975761920 — Web app scope system accent color |
why it exists
The CSS System Colors spec defines keywords like AccentColor that resolve to the OS-level UI accent colour the user has chosen — on Windows, for example, this might be a vivid blue, orange, or purple set in Settings → Personalisation. When these keywords are available everywhere, any website can sample the resolved colour in JavaScript and use it as a stable, passively collected fingerprinting signal that persists across clearing cookies, changing IP addresses, or using private browsing.
Installed PWAs get an exemption because installation is an explicit, user-consented action that creates a more trusted context. In that context, matching the system accent colour for in-app UI elements is a legitimate, user-expected feature. On the open web, where any random page can read the value, the fingerprinting risk is not justified by the aesthetic benefit.
Source: blink-dev Intent to Ship "Web app scope system accent color" and Chrome 149 beta notes.what changes
| CSS keyword | Regular tab (Chrome 149+) | Installed PWA (Chrome 149+) |
|---|---|---|
AccentColor |
Returns a fixed default (no longer OS value) | Returns the user's actual OS accent colour |
AccentColorText |
Returns a fixed default | Returns the matching text colour for the accent |
accent-color: auto |
Browser-chosen default; no OS leak | OS system accent colour |
what is an "installed web app" context?
A page runs in an installed web app context when it is opened from an installed PWA (Progressive Web App) that the user has added to their home screen, taskbar, or Start menu. The origin must match the app's declared scope in the Web App Manifest. Regular browser tabs — even on the same origin — are not considered installed app contexts.
/* This CSS in a regular tab: */
button {
/* In Chrome 149+: no longer reads user's system accent */
background-color: AccentColor;
color: AccentColorText;
}
/* In an installed PWA on the same origin:
AccentColor / AccentColorText still resolve correctly. */migration
| Goal | Before Chrome 149 | Chrome 149+ web solution |
|---|---|---|
| Match OS accent colour | AccentColor |
Provide your own accent via CSS custom property; consider offering a theme picker |
| Tint form controls | accent-color: auto |
Set an explicit brand colour: accent-color: #your-brand |
| Match OS accent in PWA | Worked | Still works — no change in PWA context |
browser support
| Chrome | 149 — AccentColor restricted to installed PWA scope |
|---|---|
| Edge | 149 (Chromium) |
| Firefox | AccentColor always returned a fixed value — no OS leak |
| Safari | AccentColor supported; scoping behaviour may differ |