CSS 全新函数 contrast-color()：自动选择高对比文本色，实现无缝可访问性设计

什么是 contrast-color()？

contrast-color() 是 CSS Color Module Level 5 中新增的实验性函数，用于根据指定基础颜色（如背景或前景色），自动返回黑色或白色中对比度最高的颜色。默认候选颜色为白与黑，也可以自定义备用色列表。

目前该功能已在 Safari Technology Preview 中支持，尚未进入 Chrome／Firefox 的稳定版本，因此在生产环境中需谨慎使用。

基本语法与参数说明

color: contrast-color(<base‑color> vs <candidate‑list> [to <target‑contrast>]);

<base‑color>：基础颜色，通常是背景色或前景色。
vs <candidate‑list>：候选颜色列表，如 vs #fff, #000。
to <target‑contrast>（可选）：设定目标对比等级（如 WCAG 的 AA、AAA），函数会返回列表中第一个满足该要求的颜色，如若没有候选色满足，会退回黑或白。

如果省略候选列表，则默认使用黑/白；省略目标对比，则默认选取列表中对比最大者。

使用代码示例

1. 背景色决定文本色

section {
  --bg: var(--your-bg-color);
  background: var(--bg);
  color: contrast-color(var(--bg) vs #fff, #000);
}

无论背景是什么色，文本将自动切换为黑或白中对比度更高的颜色。

2. 配合伪元素（如 ::selection）自动选色

article {
  --article-bg: #222;
  --article-color: contrast-color(var(--article-bg) vs #fff, #000);
  background: var(--article-bg);
  color: var(--article-color);
}

article::selection {
  background: contrast-color(var(--article-color) vs #fff, #000);
}

根据正文文字自动决定选中背景色，对焦时显著可见。

3. 按钮样式与状态色处理

button {
  --btn-bg: #ffba76;
  --btn-color: contrast-color(var(--btn-bg) vs #fff, #000);
  background: var(--btn-bg);
  color: var(--btn-color);
}
button:hover {
  --btn-bg: #b15900;
  color: contrast-color(var(--btn-bg) vs #fff, #000);
}
button:focus {
  box-shadow: 0 0 1px 3px
    contrast-color(var(--btn-bg) vs var(--btn-color), #bbb, #555);
}

自动处理 hover/focus 状态下的文本与边框色，提高可访问性。

指定对比等级示范

h1 {
  color: contrast-color(#000 vs #111, #222 to AA);
}

若候选色中无人达到 WCAG AA（4.5:1）对比标准，则最终会回退为白色或黑色，以保证符合目标标准。

注意事项与限制

对比算法不一定保证最终组合符合可访问性标准：该函数只比较颜色本身，并不考虑字体大小、粗细和透明度等视觉因素。即使返回的是对比度最高的颜色，也可能不足以让视觉障碍用户阅读。

候选列表之外只有黑/白可备选：即使指定了多个候选颜色，若 none 满足目标对比，会退回默认黑/白。

渐变颜色不支持：目前无法对渐变背景自动选择对比色，开发者需自行处理。

浏览器支持有限：目前只在 Safari TP 中实验性启用，建议结合 @supports() 语句以渐进增强方式应用。

最佳实践建议

与设计系统配合：通过定义可访问性目标（如全站 AA 等级），让 contrast-color() 自动调整主题文本色。

使用 @supports() 检测兼容性：

@supports (color: contrast-color(#000 vs #fff)) {
  /* 启用函数逻辑 */
}

对中间灰色或中性色谨慎测试，确保选色确实具有可读性。

即便启用 contrast-color()，仍需手工检查所有文本在不同背景下是否满足 WCAG 对比率与视觉清晰度。

总结

contrast-color() 是一项能够自动为动态背景色选择最佳高对比文本色的 CSS 函数，极大简化了可访问性设计逻辑。虽然当前支持有限且仍在标准制定阶段，但熟练掌握语法可能预见其未来在设计系统中的广泛应用。结合目标对比等级与渐进增强策略，可以创建更具可读性与包容性的界面。