v150 · CSS · PWA · Color
Contrast Explorer
AccentColorText is a browser-computed color guaranteed to be readable on AccentColor. This demo simulates different OS accent colors, computes the contrast ratio, and shows WCAG AA compliance for AccentColor + AccentColorText pairs.
matchMedia('(display-mode: standalone)')
checking...
Actual AccentColor resolution
checking...
Demo color source
picker simulation
Checking installed-PWA context...
Simulated OS accent color
#1a73e8
AccentColor (simulated)
#1a73e8
AccentColorText (computed)
#ffffff
Forced-colors override
normal accent simulation
AccentColorText used as foreground text on AccentColor background:
| Pair | Contrast ratio | WCAG AA (4.5:1 normal) | WCAG AA (3:1 large text) | WCAG AAA (7:1) |
|---|
how AccentColorText is computed
The browser computes AccentColorText by choosing black or white as the foreground that achieves the higher contrast against AccentColor. It uses the WCAG relative luminance formula. The result is always either #000000 or #ffffff — the browser picks whichever gives the better ratio.
see also
- System Palette Explorer — AccentColor in UI patterns
- Web App Theme Preview — full app simulation
- UI Components — buttons, badges, tabs themed with AccentColor
- Forced Colors & AccentColor — dedicated forced-colors system palette demo
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗