WCAG 2.1 AA级要求普通文本对比度≥4.5:1、大号文本≥3:1，AAA级分别要求≥7:1和≥4.5:1；须用DevTools、axe-cli或Sass函数验证，注意高对比模式适配及半透明导致的对比度崩塌。
WCAG 2.1 对比度的最低要求是什么
WCAG 2.1 AA 级要求：普通文本（字号 ≤ 18pt 或加粗 ≤ 14pt）对比度 ≥ 4.5:1；大号文本（≥ 18pt 或加粗 ≥ 14pt）可放宽至 ≥ 3:1。AAA 级则分别要求 ≥ 7:1 和 ≥ 4.5:1。这些不是建议值，而是可访问性合规的硬门槛——低于 4.5:1 的正文，在色觉障碍或低视力用户测试中会显著影响可读性。
如何用工具快速验证 CSS 中的颜色对比度
别靠肉眼判断，也别手动算相对亮度。推荐三类实操方式：
-
浏览器 DevTools：Chrome / Edge 在
Elements面板选中文字元素，右侧Styles下悬停color或background-color值，会直接显示当前对比度比值和是否达标（如4.2:1 (fail)） - 命令行检测：用
axe-cli扫描 HTML 文件：axe index.html --rules=color-contrast
，它会报出所有未达标的color/background-color组合及具体数值 - CSS 预处理器辅助：Sass 中可用
contrast-ratio()函数（需引入compass或自定义函数），但注意它只校验静态值，无法覆盖 CSS 变量或运行时动态背景
使用 CSS 变量 + prefers-contrast 适配高对比模式
仅满足默认状态的对比度远远不够。Windows/macOS 的“高对比主题”会强制覆盖页面颜色，而 prefers-contrast 媒体查询是唯一标准方式响应这一系统级偏好：
@media (prefers-contrast: high) {
:root {
--text-primary: black;
--bg-primary: white;
}
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 不要只改文字色——必须同步调整背景，否则可能反而降低对比度（比如深灰字配深蓝背景）
-
prefers-contrast: high不等于“黑底白字”，它取决于系统设置，有些是白底黑字，有些是黄底黑字 - 务必在真实开启高对比模式的系统中测试，模拟器（如 Chrome 的 Rendering 面板）不触发该媒体查询
为什么 opacity 和半透明背景会悄悄破坏对比度
这是最常被忽略的陷阱。例如：color: rgba(0, 0, 0, 0.8) 叠在 background: #f0f0f0 上，实际对比度 ≠ 黑色与浅灰的对比度，而是混合后的等效色块之间的比值。浏览器计算时会按最终渲染像素的相对亮度来算，结果往往远低于预期。
更危险的是 background: rgba(255, 255, 255, 0.9) 这类“几乎不透明”的背景——只要 alpha 1，就可能让底层背景透出，导致对比度崩塌。解决方案很直接：
- 避免对文本直接设
opacity；如需淡入效果，用transition: color或transform - 半透明背景只用于装饰层（如遮罩），文本容器本身用不透明色值
- 用
background-blend-mode或多层background实现视觉渐变，但确保最上层文本背景是纯色且不透明
对比度不是设计完成后的检查项，而是从第一个 color 声明开始就要约束的约束条件。尤其当项目要过政府采购或教育类合规审计时，4.5:1 是硬线，破了就得重调——不是换种灰，而是重构色阶体系。
