对比度检测
普通文本 — The quick brown fox jumps over the lazy dog
大号文本示例 18pt+
Button
链接文字
—
对比度
| WCAG 等级 | 要求比率 | 结果 |
|---|---|---|
| AA 普通文本 | ≥ 4.5 : 1 | — |
| AA 大号文本 | ≥ 3 : 1 | — |
| AA UI 组件 | ≥ 3 : 1 | — |
| AAA 普通文本 | ≥ 7 : 1 | — |
| AAA 大号文本 | ≥ 4.5 : 1 | — |
什么是 WCAG 以及为何重要
Web Content Accessibility Guidelines (WCAG) 是由 W3C 制定的网页无障碍指南。它确保残障人士（包括色觉缺陷、低视力用户）也能清晰阅读网页内容。2019 年欧盟无障碍法案（EAA）和美国 ADA 法规都引用 WCAG 作为合规标准，不满足对比度要求可能导致法律风险和用户流失。
WCAG 2.1 对比度等级详解
- A 级（最低）— 无特定对比度要求，仅基本可感知标准。
- AA 级（推荐）— 普通文本 ≥ 4.5:1，大文本（≥18pt 或 14pt 粗体）≥ 3:1，UI 组件和图形 ≥ 3:1。大多数法规要求此级别。
- AAA 级（增强）— 普通文本 ≥ 7:1，大文本 ≥ 4.5:1。适用于政府、医疗等需最高可读性的场景。
对比度计算原理
对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮色的相对亮度，L2 是较暗色的相对亮度。相对亮度通过将每个 sRGB 通道线性化（≤0.03928 时除以 12.92，否则 ((V+0.055)/1.055)^2.4），再加权求和：L = 0.2126R + 0.7152G + 0.0722B。结果范围 1:1（相同色）到 21:1（纯黑对纯白）。
常见无障碍配色组合
Dark on White — 16.6:1
Light on Dark — 12.4:1
Blue on White — 7.0:1
Dark on Cream — 12.7:1
Green Palette — 10.2:1
Red on White — 5.5:1
常见问题
对比度 4.5:1 够用吗？
4.5:1 满足 WCAG AA 普通文本要求，是绝大多数网站应达到的最低标准。若你的受众包含老年人或视力障碍者，建议争取 7:1（AAA 级）。
大文本的定义是什么？
WCAG 定义大文本为至少 18pt（24px）常规字重，或 14pt（约 18.66px）粗体。大文本只需 3:1 对比度即可通过 AA。
UI 组件的对比度要求是什么？
WCAG 2.1 Success Criterion 1.4.11 要求所有关键 UI 组件（按钮边框、输入框轮廓、图标）与相邻色对比度 ≥ 3:1。
如何在深色模式中保持对比度？
避免使用纯白(#fff)文字配深黑背景，推荐使用略带灰调的浅色（如 #e2e8f0）。确保链接、按钮等交互元素在深色背景上也通过 3:1 检测。