CSS颜色对比度检查技巧提升可访问性

CSS 的 `color-contrast()` 函数虽为提升可访问性提供了原生对比度计算能力，但其浏览器支持极其有限（仅 Chrome 111+，Firefox 和 Safari 完全不识别），且存在诸多易被忽视的关键限制：它不提供自动合规判断或降级回退，语法错误会导致整条声明被丢弃甚至崩溃；计算高度依赖 LAB/LCH 色彩空间，混用 sRGB/HSL 等格式将导致结果不可靠；返回的仅为数值，需配合 JavaScript 或构建时逻辑才能实现 WCAG AA/AAA 判断；而实践中更稳定、可控的方案反而是绕过该函数，利用 `lch()` 的明度通道（L）进行差值估算——既规避兼容性风险，又贴近人眼感知，直击“看起来够亮”与“算出来够对比”之间那层微妙偏差的本质。

color-contrast() 函数在 Chrome 111+ 才可用，旧版浏览器直接忽略

Chrome 111 是 color-contrast() 首个稳定支持版本，Firefox 和 Safari 当前（2024 年中）完全不识别该函数。它不是降级 fallback 的选项，而是“有就用，没有就失效”——CSS 解析器遇到不认识的函数会丢弃整条声明，不会保留默认值。

• 写成 color: color-contrast(white vs black, gray, #333); 在 Safari 中，color 属性直接不生效，元素沿用继承色或初始值
• 不能靠 @supports (color: color-contrast(...)) 安全包裹，因为语法校验阶段就报错（部分旧引擎甚至 crash）
• 真要兼容，得用 JS 检测 + 动态设置，或彻底放弃该函数，改用预设对比度表 + lab()/lch() 手动计算

对比度计算依赖 LAB 色彩空间，sRGB 值直接传入会出错

color-contrast() 内部按 CIE LAB 计算相对亮度差，但函数参数必须是已解析为 LAB 的颜色值。你传 rgb(255, 0, 0) 或 #ff0000 进去，浏览器会先转成 sRGB，再转 LAB；而如果传 lab(54.2 80.8 -49.2)，就跳过转换，直接参与计算——两者结果可能差 0.3+ 对比度单位。

• 推荐统一用 lab() 或 lch() 输入，例如 color-contrast(lab(99 0 0) vs lab(10 0 0), lab(50 0 0))
• 避免混用：不要写 color-contrast(#fff vs rgb(0,0,0), hsl(0 0% 50%))，不同色彩模型转换路径不一致，结果不可复现
• 工具链注意：PostCSS 插件如 postcss-color-function 不处理 color-contrast()，需手动确保输入已是 LAB

对比度阈值不是固定 4.5，AA/AAA 是 WCAG 标准，函数本身不判断合规性

color-contrast() 只返回一个数值（比如 4.72），它不关心这是 AA 还是 AAA，也不自动 fallback。你得自己写逻辑判断是否达标，再决定用哪个候选色。

• AA 小字号文本要求 ≥ 4.5，大字号（≥ 24px 或粗体 ≥ 19px）只需 ≥ 3.0；AAA 要求 ≥ 7.0（小字号）或 ≥ 4.5（大字号）
• 别指望 color-contrast(white vs black, gray, #333) >= 4.5 这种写法——CSS 不支持表达式比较，必须靠 JS 或构建时生成
• 常见误用：把多个候选色塞进函数，以为它会“选最高分”，其实它只返回第一个满足阈值的色（按参数顺序），没达标就回退到列表末尾色

真实项目里，更可靠的是用 calc() + lch() 手动控制亮度差

想稳控对比度又不想绑死 JS，目前最可行的是绕过 color-contrast()，用 lch() 的明度通道（L）做差值估算。LAB/LCH 中 L ∈ [0,100]，两色 L 差 ≥ 40 时，绝大多数组合能达到 AA 级别（实测误差率

• 示例：color: lch(calc(100 - var(--bg-l, 30)) 20 270); —— 背景 L 存在 CSS 变量里，文字 L 反向推算
• 注意：L 差只是强相关，不是等价。深红（L=30）配浅灰（L=75）差 45，但因色相差异，实际对比度可能仅 3.8
• 关键点：必须用 lch() 而非 lab()，因为 LCH 的 L 通道和人眼感知亮度更一致，LAB 的 L 是线性映射，容易高估暗色对比

事情说清了就结束。真正卡住人的从来不是函数怎么写，而是 LAB 空间里“看起来够亮”和“机器算出来够对比”之间那点微妙偏差。

以上就是《CSS颜色对比度检查技巧提升可访问性》的详细内容，更多关于的资料请关注golang学习网公众号！