color-contrast() 函数报错因浏览器原生不支持，仅 safari tp 部分实现；替代方案为手动计算、js 库或 postcss 插件；wcag 对比度需按 srgb 相对亮度公式计算，半透明色须先合成背景。
color-contrast 检查工具为什么总报错？
因为浏览器原生不支持 color-contrast() 函数，CSS 里直接写会解析失败。它目前只是 CSS Color Module Level 5 的草案函数，仅 Safari 技术预览版（TP）部分支持，Chrome 和 Firefox 完全不识别。
常见错误现象：color: color-contrast(#333 vs #fff, #000); 在大多数环境里被忽略，文字变成默认色或继承色，毫无预警。
实际能用的替代方案只有：
- 手动计算对比度（用 WCAG 公式）
- 借助 JS 库如 tinycolor2 或 @radix-ui/colors 的运行时判断
- 构建时用 PostCSS 插件（如 postcss-accessibility）做静态校验
WCAG 2.1 对比度要求到底怎么算？
不是看 RGB 差值，也不是简单用亮度公式。WCAG 使用相对亮度（relative luminance）+ 对比度比值（contrast ratio），公式固定为：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮色、L2 是较暗色，结果 ≥ 4.5 才满足正文可读性。
关键细节：
- 灰度转换必须按 sRGB 标准：对每个通道先归一化，再分段应用 gamma 校正（≤ 0.03928 时除以 12.92，否则用 ((val + 0.055) / 1.055)^2.4）
- 不同色彩空间（如 HSL、Lab）不能直接代入，必须转回 sRGB 再算
- 半透明色要先合成到背景上，再计算最终对比度 —— 很多人漏掉这步，拿纯色去验带 opacity: 0.8 的文字
用 CSS 自定义属性模拟“自动选色”可行吗？
可以做有限场景的近似，但无法真正动态响应背景变化。CSS 本身没有颜色分析能力，color-mix() 和 color-contrast() 都不支持变量输入或条件分支。
立即学习“前端免费学习笔记（深入）”；
实操中更可靠的做法是：
- 定义两套主题色变量：--text-primary-light 和 --text-primary-dark
- 用媒体查询配合 prefers-color-scheme 切换
- 对于深色/浅色混合区域（比如卡片叠加在图片上），放弃纯 CSS，改用 JS 读取背景色并设置 style.color
- 若用 Tailwind，避免 text-white 这类绝对值，改用 text-on-surface 这类语义类，背后靠 JS 或构建时生成对应色值
设计师给的“高对比组合”为什么上线后还是被反馈看不清？
因为人眼分辨力受尺寸、字体粗细、环境光、屏幕类型影响极大。WCAG 的 4.5:1 是最小门槛，不是舒适阈值。小字号（
容易被忽略的点：
- 移动端 OLED 屏幕黑底显示深灰文字（如 #333）时，对比度暴跌，视觉上接近灰雾
- 中文字符笔画密集，同等对比度下比拉丁字母更难辨识
- 色觉障碍用户（尤其红绿色盲）对某些组合完全无感，比如 #990000 和 #CC6666 在他们眼里几乎同色
- 所有测试必须在真实设备上做，Figma 或 Chrome DevTools 的色值模拟不反映物理发光特性
