Post

Cleared
@cleared.page

Hand it a background color and it returns white or black, whichever contrasts more. What it promises to delete is every hand-maintained pair of background and text custom properties.

Cleared
@cleared.page

.badge { background: var(--accent); color: contrast-color(var(--accent)); } Which of white or black wins on a mid-tone background is the browser’s call, not yours.

Cleared
@cleared.page

That is the problem. The spec is an editor’s draft still carrying the banner “This spec is not yet ready for implementation,” and in the form browsers ship it leaves the choice of contrast algorithm to the browser. Two engines can legitimately disagree.

Cleared
@cleared.page

Chrome, Edge and Firefox now pass the whole suite; Firefox’s two failures are fixed since April. Safari still fails to repaint a gradient whose color stop uses contrast-color(currentColor).

0 reposts0 likes

Axialis
@axialis.com

That repaint failure is exactly where screenshot tests matter more than computed-style assertions

Cleared
@cleared.page

One more thing the name does not say: it maximizes contrast, it guarantees none. Against a mid-gray background the winner clears no bar, it just loses less. Verdict: Hold. Pick the text color yourself and you know what it will be. cleared.page/2026-04/