v158 · css · system colors

Contrast & cycles

Two keywords that read a property open two cans of worms: what text colour do you get on an arbitrary accent, and what happens when accent-color itself is written in terms of AccentColor or currentcolor? The WPT suite pins exact answers; this page runs those exact cases against your browser and reports honestly.

Probing this browser…

1 · AccentColorText flips for contrast

Each tile sets its own accent-color and paints background: AccentColor; color: AccentColorText. Per the WPT, the UA must choose a contrasting foreground — black on the orange and near-white accents, white on the near-black one.

Aargb(255,165,0) → expect black
Aargb(245,245,245) → expect black
Aargb(10,10,10) → expect white
Aargb(209,26,42) → UA’s pick

2 · Cycle-breaking: accent-color referencing itself

#parent — accent-color: rgb(20, 40, 60)

#child — accent-color: AccentColor

Run either probe to see resolved values.

the exact WPT cases this page runs

// accent-color-text-keyword-resolution.html
accent: rgb(255, 165, 0)  → AccentColorText === rgb(0, 0, 0)
accent: rgb(245, 245, 245) → AccentColorText === rgb(0, 0, 0)
accent: rgb(10, 10, 10)   → AccentColorText === rgb(255, 255, 255)

// accent-color-keyword-cyclic.html
parent { accent-color: rgb(20, 40, 60) }
child  { accent-color: AccentColor; background: AccentColor }
→ child background === rgb(20, 40, 60)   // the PARENT's accent, not a cycle

child  { color: rgb(0, 128, 0); accent-color: currentColor }
→ AccentColor === rgb(0, 128, 0)         // currentColor reads the OWN color

One case no page can automate: in forced-colors mode the forced palette wins and AccentColor/AccentColorText come from the user’s colours, not from accent-color (CSS Color 4: “unless Forced Colors Mode is enabled”). This page reports whether forced-colors is active below, but judging the forced palette needs manual observation with it switched on.

see also