Chrome 147 的 contrast-color() 已可用吗：前端无障碍配色上线前要核对哪些兼容边界

做主题色按钮时，最容易漏掉的是文字颜色：背景从浅蓝换成深紫，原来固定的白字可能就不再合适。Chrome 147 带来的 CSS contrast-color() 可以在黑色和白色之间选择对比度更高的一种，但它解决的是“二选一”，不是替你完成全部无障碍验收。

如果项目只支持较新的浏览器，可以先用 contrast-color() 减少主题色分支；面向旧环境时必须保留固定颜色回退，并对中间色背景做人工对比度复核。

Chrome 147 这次到底增加了什么

Chrome Developers 的版本说明把 contrast-color() 列为 Chrome 147 的 CSS 更新。它接收一个颜色值，在黑色和白色之间返回对输入背景对比度更高的一种，因此可以直接出现在 color、border-color 等接受颜色值的属性里。

这项能力适合主题色来自配置、用户选择器或品牌变量的场景。以前常见的写法是为每个背景色手工维护一组前景色，颜色一多，遗漏就会变成视觉回归。

最小写法：让按钮文字先跟着背景色变化

把背景色集中到自定义属性，再让文字颜色读取这个变量，最容易验证，也方便后面替换主题。

:root {
  --button-bg: #5b2a86;
}

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

这里的“黑白字”是函数的结果，不是任意灰度文字。切换 --button-bg 后，浏览器会重新选择黑色或白色。实际页面仍要检查按钮文字、图标和焦点环，不能只看代码是否被解析。

兼容回退应该放在哪里

浏览器不认识这个函数时，整条声明可能失效。因此，先写一个能工作的固定颜色，再用特性查询覆盖，是比较稳妥的“兼容回退”边界：

.theme-button {
  background: var(--button-bg);
  color: #fff;
}

@supports (color: contrast-color(red)) {
  .theme-button {
    color: contrast-color(var(--button-bg));
  }
}

回退色要根据产品的常用主题来定。如果旧环境占比很高，可以把主题色限制在已验收的浅色或深色集合内，而不是让任意用户输入颜色直接进入按钮。

为什么自动选黑白字仍然不够

MDN 的说明提醒，黑色和白色中对比度更高的一方，并不保证每种中间色都能让小字号清楚可读。比如偏亮的皇家蓝背景，算法可能返回黑色，但小号文字的阅读体验仍然不理想。

发布前至少抽查三类状态：正常按钮、悬停/按下状态、键盘焦点状态。若品牌色落在中间明度，优先调整背景色或字号，不要只把文字加粗当成补救。

上线前的最小验证清单

• 在目标浏览器中确认新声明生效，开发者工具的 Computed 面板能看到最终文字色。
• 关闭或模拟不支持该函数的环境，确认固定颜色回退仍能保持按钮可读。
• 用真实主题色、字号和焦点样式检查黑白字，不只拿纯黑或纯白背景做样例。
• 如果背景色来自用户输入，增加色值范围或人工审核，避免把任意中间色当作合格主题。

相关问题

contrast-color() 会返回任意灰色吗？

不会。当前用法返回黑色或白色，适合快速选择前景色，但不等于完整的配色系统。

旧浏览器会把整个按钮隐藏吗？

只要先写固定的 color，再用 @supports 覆盖，旧浏览器通常会保留回退声明。

使用这个函数后还需要做无障碍检查吗？

需要。尤其是中间色、小字号、焦点状态和图标，仍应使用实际页面做对比度与可读性检查。

Chrome 147 让主题色文字的第一层选择简单了不少，真正上线时要把它看成渐进增强：新环境获得自动选择，旧环境保留明确回退，边界颜色继续由设计和测试共同验收。