v158 · css · system colors

Resolution inspector

accent-color inherits, and the spec says AccentColor resolves against the element’s own computed accent-color — own or inherited, whichever the cascade produced. This tool sets the property at three levels of a tree and reads back, per element, what getComputedStyle says AccentColor and AccentColorText actually are.

Probing this browser…

Set accent-color per level

The leaf value is validated with CSS.supports("accent-color", value) before it is applied; an invalid value is reported and not applied.

#ancestor

#branch

#leaf

What each element resolves, straight from getComputedStyle
elementspecified accent-colorcomputed accent-colorAccentColor resolves toAccentColorText resolves to
Change any control to re-read the table.

how each cell is read

// per element: a hidden probe child inherits the element's accent-color,
// then asks for the keyword's resolved value
const probe = document.createElement("span");
probe.style.color = "AccentColor";        // dropped entirely on pre-158 parsers
element.appendChild(probe);
const resolved = getComputedStyle(probe).color;   // e.g. "rgb(255, 105, 180)"
probe.remove();

// the WPT contract this mirrors (accent-color-keyword-resolution.html):
//   ancestor.style.accentColor = "rgb(1, 2, 3)";
//   descendant.style.backgroundColor = "AccentColor";
//   getComputedStyle(descendant).backgroundColor === "rgb(1, 2, 3)"

see also