WCAG对比度标准是SEO隐性门槛，因Lighthouse等工具将≥4.5:1（普通文本）或≥3:1（大号文本）设为可访问性硬性扣分项，不达标直接拉低SEO质量分。
CSS颜色定义本身不被搜索引擎解析为排名因子，但直接决定页面能否通过可访问性审计——而Lighthouse、CrUX等核心指标已将对比度合规作为硬性扣分项，不达标会拉低SEO质量分。
WCAG对比度标准为什么是SEO的隐性门槛
Google 不读你的 #333，但它会抓取 Lighthouse 报告里明确标红的 color-contrast 失败项。这类问题一旦出现在 CrUX 数据中，会被标记为“低质量体验”，直接影响搜索曝光权重。
- 普通文本（如正文段落）必须满足
contrast ratio ≥ 4.5:1，否则 Lighthouse 可访问性得分直接掉档 - 大号文本（
font-size ≥ 18pt或加粗的≥ 14pt）可放宽到≥ 3:1，但别误用——很多 UI 库默认的16px字体仍属“普通文本”范畴 - 暗色模式切换后，若只改
background-color却没同步调整color，会导致黑底+深灰字（如#333on#1e293b），实际对比度可能跌破 2:1
Chrome DevTools里一眼识别对比度风险
不用装插件，打开 Elements 面板选中文字元素，在 Styles 面板悬停 color 或 background-color 值，右侧立刻显示当前对比度比值和是否通过（如 4.2:1 (fail)）。
- 这个检测基于 WCAG 算法，实时计算相对亮度（Luminance），比肉眼判断可靠得多
- 注意：它只校验当前渲染状态，对
rgba()叠加透明层、backdrop-filter模糊背景等复合场景不自动穿透，需手动验证最终叠加效果 - 如果看到
(pass)但字体偏细（font-weight: 300），别松懈——WCAG 对细体字无额外宽容，仍按普通文本标准卡 4.5:1
color-mix() 是目前最可控的动态调色方案
比起 JavaScript 计算或一堆预设变量，color-mix() 能在 CSS 层原生生成满足对比度的衍生色，且浏览器支持已在主流版本落地（Chrome 111+、Firefox 119+、Safari 16.4+）。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是完整声明：
@supports (color-mix(in srgb, black, white))，不能简写成@supports color-mix() - 典型用法：用它压暗浅色背景上的按钮，确保白字始终够亮——
background-color: color-mix(in srgb, var(--primary), black 15%) - 它不解决所有问题：无法应对渐变背景、图片背景或运行时 JS 动态换肤，这些场景仍需 fallback 静态配色或 JS 辅助
别让暗色模式成为对比度漏洞高发区
很多人以为开了 @media (prefers-color-scheme: dark) 就万事大吉，结果一测发现暗色下 color: #666 on background-color: #1f2937 对比度仅 3.1:1，正文直接不可读。
- 必须验证每一对暗色组合，尤其注意系统级高对比模式（
@media (prefers-contrast: high)）会强制覆盖你所有颜色，此时只能靠forced-colors媒体查询兜底 - 避免用
!important锁死颜色——它会拦截系统高对比主题的强制重绘，导致页面在 Windows 高对比模式下彻底失能 - 常见翻车点：CSS 变量未在暗色媒体查询中重新赋值、伪元素（
::placeholder）颜色遗漏、第三方组件样式未覆盖
真正难的不是算出一个合规色值，而是让所有动态场景（主题切换、用户系统偏好、半透明叠加、字体粗细变化）下的每一段文字都稳定落在 4.5:1 以上——这需要把对比度当成接口契约来对待，而不是设计完成后的补救检查。
