demo · v149
Contrast Compliance Checker
Chrome 149 restricts AccentColor to a fixed fallback on regular web pages. That fallback might have a very different contrast ratio than the user's actual OS accent. This tool reads the live AccentColor and AccentColorText values, computes the WCAG contrast ratio against your chosen background, and shows which components pass AA/AAA — across regular tab, Chrome 149 PWA, and a custom theme color.
Choose context
#0060df (Firefox blue)
as read from this browser
fingerprinting vector
chosen accent color
WCAG compliance across all contexts
| Context | AccentColor | AccentColorText | Ratio | WCAG AA (4.5:1) | WCAG AAA (7:1) |
|---|---|---|---|---|---|
| Loading… | |||||
Note: "PWA / web app scope" and "Chrome <149" rows use the real AccentColor value read from your current browser. The "Chrome 149 fixed fallback" is #0060df (a browser-neutral blue). Your custom theme_color is from the picker above.
/* Chrome 149: AccentColor is a fixed fallback in regular tabs.
The contrast ratio of that fallback against white text is ~5.5:1 (AA pass).
But a user's OS accent could be bright yellow — 1.2:1 on white (fail).
Chrome 149's restriction actually improves the reliability of AccentColor-based UIs
because the fixed fallback is chosen to have reasonable contrast. */
/* Always check contrast with both the fallback AND your target theme_color: */
button {
background: AccentColor;
color: AccentColorText; /* guaranteed contrast in spec, but verify */
}see also
- Fingerprinting Explainer — how AccentColor was used to fingerprint
- Accent Color UI Kit — component gallery with AccentColor
- Scope Detection — live probe of current AccentColor value
- ChromeStatus: Web app scope system accent color
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗