demo · v150
Forced Colors & AccentColor
AccentColor and AccentColorText are CSS Color 4 system color keywords — meaning they carry special authority in @media (forced-colors: active) mode. When a user enables Windows High Contrast or macOS Increased Contrast, AccentColor maps to the OS-chosen highlight color, the same value the browser uses for Highlight. Toggle the simulation below to see how the same components render in normal and forced-colors contexts.
The divider uses background: AccentColor. In forced-colors mode it maps to Highlight, keeping the emphasis visible without any extra CSS.
Normal mode
In a standard installed PWA context, AccentColor resolves to the user's OS accent color. Each component uses background: AccentColor; color: AccentColorText for the primary color and a readable foreground.
On the open web (non-installed), AccentColor returns a neutral system fallback — fingerprinting protection.
Forced-colors mode
When @media (forced-colors: active) is true, the browser replaces most colors with a restricted OS palette. AccentColor maps to the Highlight system color keyword — the same value the browser uses for selected text and focused elements.
Components with forced-color-adjust: none opt out and maintain their authored colors. Use this sparingly; it can break accessibility.
/* AccentColor works in both normal and forced-colors contexts */
.themed-btn {
background: AccentColor;
color: AccentColorText;
}
/* In @media (forced-colors: active) the browser maps:
AccentColor → Highlight
AccentColorText → HighlightText
No extra CSS needed — system colors adapt automatically */
/* To opt out of forced-colors substitution on specific elements: */
.custom-accent-element {
forced-color-adjust: none;
/* Now AccentColor keeps its authored value in forced-colors mode */
}
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗