WCAG 2.1 AA级要求小字号文本对比度≥4.5:1、大字号≥3:1，AAA级则为7:1和4.5:1；需用官方公式(L1+0.05)/(L2+0.05)计算，不可仅凭RGB差值或肉眼判断。
WCAG 2.1 对比度要求到底是多少？
AA 级最低要求是 4.5:1（小字号文本）或 3:1（大字号文本，即 18pt 或 14pt 加粗），AAA 级则要 7:1（小字）或 4.5:1（大字）。别信“差不多就行”——屏幕反光、视力轻度下降、旧手机 LCD 屏都会吃掉 1–2 个对比度点。
-
contrast ratio不是简单算 RGB 差值，得用 WCAG 官方公式：(L1 + 0.05) / (L2 + 0.05)，其中 L 是相对亮度（需先转 YIQ 或 sRGB 转线性光） - 浏览器 DevTools 的颜色选取器只显示十六进制和 HSL，不自动计算对比度；得靠插件（如 axe DevTools）或手动输到
https://webaim.org/resources/contrastchecker/ - 灰色文字配白色背景看似安全，但
#999在#fff上只有 4.06:1，不满足 AA 小字标准
怎么快速验证现有页面的对比度问题？
别逐个像素点测。优先查三类高风险位置：按钮文字、表单 placeholder、禁用态（disabled 元素）——它们常被设计师忽略，又最容易踩线。
- Chrome 扩展
axe DevTools可一键扫描整页，报错直接定位到 CSS 选择器和具体元素 - VS Code 插件
Color Highlight配合Color Picker，悬停颜色值时实时显示当前色对背景的对比度 - 命令行可用
color-contrastCLI 工具：运行npx color-contrast "#333" "#fff"输出4.52，立刻知道是否达标
深色模式下对比度容易翻车的三个地方
深色模式不是简单把 background-color 换成 #121212 就完事。系统级暗色适配（@media (prefers-color-scheme: dark)）会让很多“看起来还行”的组合瞬间失效。
-
#e0e0e0文字在#121212背景上是 15.7:1，很安全；但若背景其实是#1f1f1f（某些 OLED 设备模拟值），对比度暴跌到 6.2:1 —— 仍达标，但已接近临界 - 图标按钮常用
opacity: 0.6表示非活跃状态，这会同时降低前景与背景的相对亮度，必须重新验算，不能沿用不透明时的配色 - CSS 自定义属性（
--text-primary）若没按明/暗双色系分别定义，currentColor在暗色背景下可能继承父级未重置的浅灰，直接崩掉对比度
用 CSS color-mix() 动态保对比度可行吗？
目前（2024 年中）color-mix() 还不能替代人工校验。它能混合颜色，但无法感知上下文背景，更不会自动满足 WCAG 公式里的非线性亮度转换。
立即学习“前端免费学习笔记（深入）”；
- 写
color: color-mix(in srgb, var(--fg) 70%, white 30%)只是调亮，不保证结果 ≥4.5:1 - 真正可靠的动态方案是 JS +
window.matchMedia("(prefers-color-scheme: dark)")+ 预置两套经过验证的色板，而非实时计算 - 若真要用函数生成，推荐
chroma.js的.brighten()或.darken()，它内部按亮度通道调整，比简单 mix 更贴近可访问性目标
对比度不是“设完就跑”的参数，它是字体大小、设备类型、环境光照、CSS 层叠顺序共同作用的结果。哪怕你用了最准的工具，也得在真机上开闪光灯照着看一眼——有些灰，在实验室里达标，到地铁里就糊成一片。
