v149 · CSS · Privacy

Web app scope system accent color

Chrome 149 restricts the CSS AccentColor and AccentColorText system color keywords — and accent-color: auto — so they only resolve to the user's actual system accent color when inside an installed PWA or a trusted profile context. On regular web pages they resolve to a fixed fallback, preventing fingerprinting.

concepts

  1. Accent Color Demo

    Shows the current resolved value of AccentColor and AccentColorText keywords on this page. In a regular browser tab the keywords resolve to a fixed fallback; install the demo as a PWA to see the real system color.

  2. Fingerprinting Context

    Explains why unrestricted system color access was a fingerprinting risk and how scoping to web app context neutralises it — with a comparison of what browsers expose before and after the change.

  3. Scope Detection

    Live probe of the current AccentColor and AccentColorText resolved values in your browser. Shows whether you're seeing the real OS accent (pre-149 or PWA context) or the fixed fingerprinting-safe fallback — plus the fingerprinting risk table by context.

  4. Accent Color UI Kit

    A gallery of buttons, checkboxes, radios, progress bars and range inputs all styled with AccentColor and AccentColorText. Toggle between "regular tab" (Chrome 149 fixed fallback) and "PWA context" (real OS accent) modes, or use the colour picker to simulate any OS accent and see how the component palette adapts.

    Interactive UI components

  5. Fingerprinting Explainer

    Step-by-step walkthrough of the fingerprinting attack: create a hidden element with background: AccentColor, read getComputedStyle, map the color to OS identity. A live probe shows what your browser currently returns. A timeline traces the change from pre-149 (real OS color everywhere) to Chrome 149 (fixed fallback on regular tabs, real color in PWA scope).

    Live probe Privacy

  6. Contrast Compliance Checker

    Reads the live AccentColor and AccentColorText values from your browser, computes WCAG contrast ratios, and shows pass/fail across four contexts: Chrome 149 regular tab (fixed fallback), PWA scope (real OS color), Chrome <149 (real OS color), and your custom theme_color. A component preview renders a button, checkbox, and progress bar in the chosen context so you can see contrast issues visually.

    Live probe WCAG Contrast

why it shipped

The AccentColor CSS system color keyword exposes the user's operating system accent color — a value that varies between users and devices. Because accent colors are user-configurable and vary widely, scripts that read the computed value via getComputedStyle() can extract a distinguishing bit for fingerprinting. Chrome 149 limits the real system value to installed PWA contexts where the user has already made a deliberate choice to install an app, falling back to a fixed neutral color on regular web pages.

the change

/* These keywords work in all browsers: */
button {
  background: AccentColor;      /* system accent color (or fallback in Chrome 149+) */
  color: AccentColorText;       /* text that contrasts with AccentColor */
}

/* accent-color: auto also uses AccentColor internally */
input[type=checkbox] { accent-color: auto; }

/* Chrome 149+ behaviour:
   - In a regular tab: AccentColor resolves to a fixed fallback (not user's OS color)
   - In an installed PWA (web app scope): AccentColor resolves to the real OS color

   This means AccentColor is still useful for PWAs that need to match OS theme,
   but cannot be used to fingerprint users on arbitrary web pages. */

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗