AccentColor and AccentColorText system colors

concepts

1. System Palette Explorer

   A live grid showing AccentColor and AccentColorText applied to UI patterns — buttons, badges, borders, and focus rings. Compare each pattern against hardcoded hex colours and accent-color: auto to understand when the system keywords add value.

2. Web App Theme Preview

   Simulate an installed web app whose primary brand colour is wired to AccentColor. Pick different simulated OS accent colours and watch the entire app update — headers, buttons, focus rings — without touching any CSS variables or theme logic.

3. PWA Settings Panel

   A complete settings UI — header, tab strip, toggle switches, focus rings, primary and secondary buttons — all themed from AccentColor and AccentColorText. Pick any simulated OS accent and a live contrast checker confirms AccentColorText always produces a readable foreground.

4. Contrast Explorer

   Pick any simulated OS accent color; the demo computes AccentColorText using the browser's algorithm (black or white, whichever gives higher contrast), then shows WCAG AA/AAA pass/fail for every pairing. A card grid shows filled buttons, outline borders, focus rings, and headers with measured contrast ratios.

5. UI Components

   A gallery of eight component types — buttons (primary, outline, ghost), badges, tab strip, toggle switches, progress bars, focus rings, header bar, and links — all themed from AccentColor / AccentColorText CSS variables. Change the simulated accent from a preset palette or a color picker and every component updates instantly.

6. Forced Colors & AccentColor

   AccentColor is a CSS Color 4 system color — it carries special authority in @media (forced-colors: active) mode. Toggle a forced-colors simulation to see how primary buttons, badges, progress bars, and focus rings adapt: AccentColor maps to Highlight and AccentColorText maps to HighlightText automatically, with no extra CSS needed.

7. Titlebar Overlay & AccentColor

   The complete PWA chrome story: when Window Controls Overlay is enabled, the app can paint the system titlebar area using env(titlebar-area-*) CSS variables sized to the OS chrome. Wiring that area to AccentColor / AccentColorText makes the titlebar match the OS accent automatically — no JS, no hard-coded hex, WCAG-safe foreground guaranteed.

why it shipped

CSS has defined system color keywords since CSS Color 4, but browsers were slow to expose AccentColor and AccentColorText because doing so on the open web creates a fingerprinting vector — every site would receive a stable, user-specific signal. Chrome 150 resolves this tension by gating the keywords behind the installed web app context: they only resolve to the OS value when the page is running as an installed PWA. Arbitrary websites still see a fallback neutral colour. This means a task-manager app or note-taking PWA can use background: AccentColor; color: AccentColorText to produce a header that feels native on every OS without shipping OS-specific CSS.

what the keywords expose

• AccentColor — the OS highlight colour (e.g. macOS Highlight Color, Windows Personalisation accent)
• AccentColorText — a browser-computed high-contrast foreground for text painted over AccentColor (black or white)
• Both resolve in color, background-color, border-color, outline-color, SVG fill/stroke, and anywhere else <color> is accepted
• On the open web (non-installed page): both keywords resolve to a neutral fallback — no fingerprint exposed

references

• ChromeStatus entry
• CSS Color 4 — System Colors
• MDN — system-color keywords
• CSSWG — Fingerprinting mitigations for AccentColor