今日已更新 294 条资讯 | 累计 31122 条内容
关于我们

Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`

hello@smashingmagazine.com (Durgesh Pawar) 2026年05月28日 21:00 2 次阅读 来源:Smashing Magazine

Seventy percent of websites still fail basic WCAG contrast checks in 2025. After years of design system tooling, accessibility linters, and JavaScript libraries, nothing moved the needle. We didn’t need better libraries. We needed better CSS. `contrast-color()` is that better CSS.

The HTTP Archive Web Almanac has been tracking color contrast failures for years. The numbers have barely moved. After half a decade of design system tooling, accessibility linters, and entire JavaScript libraries dedicated to computing readable text colors, 70% of websites still fail basic WCAG contrast checks in 2025 . The WebAIM Million paints an even grimmer picture — 83.9% of homepages flagged for low contrast text in 2026, up from 79.1% in 2025. The rate improves by maybe a few percentage points per year on one benchmark and actually gets worse on another. That’s not progress — that’s proof that relying on runtime JavaScript for something this fundamental doesn’t scale across the open web. We didn’t need better libraries. We’ve needed better CSS. The contrast-color() function is that better CSS. One declaration. The browser runs the contrast math during style computation, before the page paints, and hands you the right text color. No library, no build step, no hydration flash. Note : If you’ve seen it called color-contrast() in older articles and spec drafts — that name was changed , and the old syntax no longer works in any browser. What It Does (And What It Doesn’t) The Level 5 version is simple. You give it a color. It gives you back black or white , whichever has more contrast against your input. .button { background-color: var(--brand-color); color: contrast-color(var(--brand-color)); } Change --brand-color to neon green, text goes black. Change it to midnight navy, text goes white. Swap themes at runtime via JavaScript and the text adapts instantly — no event listeners, no recalculation. A few things to know about the current version: It returns a , not a number. You get an actual color value ( black or white ), you can use anywhere CSS accepts a color. Black or white only , for now. Candidate color lists and target ratios are planned for Level 6. No keywords. If you’ve seen max in older blog posts, that was stripped from the spec. Using it will
本文内容来源于互联网,版权归原作者所有
查看原文