Algorithmic Theming Engines: 构建自校正色彩系统

背景

长期以来，网页色彩对比度不足一直是 Web 开发中难以根治的顽疾。HTTP Archive 的 Web Almanac 多年来一直在追踪色彩对比度失败的数据，但数字几乎纹丝不动。尽管过去五年间出现了专门的设计系统工具、可访问性 Linter 以及大量用于计算可读文本颜色的 JavaScript 库，但在 2025 年，仍有 70% 的网站未能通过基本的 WCAG（Web 内容可访问性指南）对比度检查。

WebAIM Million 的数据描绘了更为严峻的图景：2026 年，83.9% 的主页因文本对比度低而被标记，这一比例高于 2025 年的 79.1%。在某些基准测试中，改进率每年仅提升几个百分点，而在其他方面甚至恶化。这证明了一个事实：依赖运行时 JavaScript 来处理这种基础性的视觉呈现问题，在开放 Web 上无法规模化扩展。我们需要的不是更好的库，而是更好的 CSS。

核心内容

contrast-color() 函数：更优的 CSS 解决方案

contrast-color() 正是那种“更好的 CSS”。它通过一条声明即可解决问题：浏览器在样式计算阶段（页面绘制之前）运行对比度数学计算，并直接返回正确的文本颜色。无需库、无需构建步骤、无需处理水合闪烁（hydration flash）。

注意：在早期的文章和规范草案中，该函数曾被称为 color-contrast()。该名称已被更改，旧语法在任何浏览器中均不再有效。

功能定义与限制

当前 Level 5 版本的逻辑非常简单：你传入一个颜色，它返回 black（黑色）或 white（白色）中与你输入颜色对比度更高的那一个。

.button {
  background-color: var(--brand-color);
  color: contrast-color(var(--brand-color));
}

• 将 --brand-color 改为霓虹绿，文本变为黑色。
• 将其改为午夜蓝，文本变为白色。
• 通过 JavaScript 在运行时交换主题，文本会即时适应——无需事件监听器，无需重新计算。

当前版本的关键注意事项：

• 返回类型：它返回 <color> 类型，而非数字。你得到的是实际的颜色值（black 或 white），可以在任何 CSS 接受颜色的地方使用。
• 仅限黑白：目前仅支持黑色或白色。候选颜色列表和目标比率计划将在 Level 6 中引入。
• 无关键字：如果你在过去的博客文章中看到过 max 关键字，它已被从规范中移除。使用它会导致声明静默失效。
• 命名变更：如前所述，早期草案中的 color-contrast() 已死。CSS 工作组（CSSWG）将其重命名为 contrast-color()，以遵循“CSS 函数以其返回值命名”的惯例（例如 color-mix() 返回颜色，contrast-color() 也返回颜色）。旧的 color-contrast() 听起来像是返回对比度比率（如 4.5 这样的数字），这具有误导性。2021–2023 年间的任何教程若展示 color-contrast() 语法，在当前浏览器中均无法工作。

规范分裂：Level 5 与 Level 6

该函数跨越两个规范存在，这一点不常见且值得深入理解。

CSS Color Level 5：当前浏览器实现

Level 5 定义了浏览器目前交付的功能：输入一个颜色，输出黑色或白色。该算法被刻意标记为“UA-defined”（用户代理定义），意味着浏览器决定内部使用何种数学计算。目前，所有引擎均使用 WCAG 2.x 相对亮度。

但这种“UA-defined”标签并非偶然，它是一个计划中的“逃生舱口”。

在此背景下，APCA（Accessible Perceptual Contrast Algorithm，可访问感知对比度算法）常被提及。APCA 模拟人眼实际感知对比度的方式，考虑了字体粗细、空间频率和环境光——这是对 WCAG 2.x 公式的真实改进。通过不在 Level 5 规范中锁定“使用 WCAG 2.x”，浏览器供应商可以在未来切换到 APCA，而不会破坏现有代码。如果规范以 wcag2() 关键字作为默认值发布，所有使用它的网站将被永久锁定在旧算法上。

APCA 的不确定性

APCA 的未来远不如炒作所暗示的那样确定。Adrian Roselli 在《2026 年 4 月的 WCAG3 对比度》一文中清晰地阐述了现状：APCA 在 2023 年中因未获得足够的工作组支持，被从 WCAG 3 工作草案中撤回。目前的 WCAG 3 规范表示对比度算法“待定”，标准本身可能直到 2030 年或更晚才能最终确定。Roselli 还在 2024 年 5 月提交了一个 Chromium 问题，要求从 DevTools 中完全移除“Advanced Perceptual Contrast Algorithm”实验标志，理由是实施已过时，并可能误导开发者认为 APCA 比实际情况更成熟或更官方。该问题目前仍开放。

这并不意味着 APCA 已死。其背后的研究经过同行评审且内容扎实，其创建者指出，在绝大多数情况下，通过 APCA 指南的颜色远超 WCAG 2 最低标准。但目前无法保证 APCA 将成为取代 WCAG 2.x 的算法——这种不确定性对 contrast-color() 至关重要。如果其他算法胜出，或者 WCAG 3 采用完全不同的新方法，“UA-defined”标签意味着浏览器可以适应而不会破坏你的代码。这也意味着 Level 6 的功能（候选颜色列表、目标比率、tbd-fg/tbd-bg 关键字）都是围绕一种可能以当前形式出现、也可能不出现的算法设计的。

CSS Color Level 6：扩展语法

Level 6 增加了扩展语法，包括候选颜色列表和目标对比度比率：

/* Level 6 未来语法 — 尚未发布 */
color: contrast-color(var(--bg) tbd-bg wcag2(aa), #1a1a2e, #e2e8f0, #fbbf24);

浏览器将从左到右评估每个候选颜色，并选择第一个满足 4.5:1 AA 阈值的颜色。tbd-fg 和 tbd-bg 关键字指示基础颜色是前景还是背景，这对于像 APCA 这样的方向性对比模型很重要。目前这些都处于工作草案阶段——鉴于 APCA 的不确定状态，更是如此。现在请使用 Level 5 版本。

浏览器支持

这一功能的浏览器支持情况比大多数新 CSS 功能要好。三大引擎已在稳定版本中发布：Chrome 147（2026 年 4 月）、Firefox 146 和 Safari 26.0。它在 2026 年 4 月达到了 Baseline Newly Available（基线新可用）状态。

尽管 caniuse 上的全球支持百分比看起来较低，但这主要反映了企业浏览器用户和从不更新浏览器的人群。如果你正在阅读这篇文章，你的浏览器几乎肯定已经支持它。

所有三大引擎都通过了 contrast-color() 的 Web Platform Tests，这意味着边缘情况（例如，平局打破逻辑、颜色空间转换、语法解析）在各浏览器中行为一致。

渐进增强与陷阱

使用 @supports 进行渐进增强非常简单：

.card {
  background: var(--bg);
  color: #fff;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.8);
}

@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg));
    text-shadow: none;
  }
}

旧版浏览器将获得带有深色阴影的白色文本以确保可读性。支持该功能的浏览器将获得原生计算结果。没有人会看到损坏的文本。

需要注意的陷阱：

1. 自动化可访问性扫描器：Lighthouse、Axe 等自动化扫描器无法评估 text-shadow。它们只查看计算后的 color 与 `background