WCAG 颜色对比度：可访问性的实战指南
了解 WCAG 颜色对比度比率是什么、为何重要，以及如何为无障碍设计进行检查。
什么是 WCAG 颜色对比度？为什么重要？
WCAG（Web 内容无障碍指南）定义了文本与背景之间被视为无障碍的最低对比度。指南规定：AA 级下，正文文本为 4.5:1，大字为 3:1；AAA 级下分别为 7:1 和 4.5:1。
无障碍的颜色对比度不只是一个检查项——它直接影响低视力、色盲用户，以及在强光下阅读的人能否看清你的内容。在设计阶段就考虑对比度，能让你的产品被更广泛的受众所使用，并且在许多司法管辖区也是法律要求。
常见使用场景
- 正文和标题：验证设计中的前景/背景配色
- 按钮和链接：确保 CTA 在其背景上清晰可读
- 表单字段：检查标签和占位文字的对比度
- 图表和可视化：让数据标签从图像中凸显
- 移动端 UI：补偿眩光和小屏幕的影响
方法 1：使用 UtilBoxx 免费 WCAG 对比度检查器（推荐）
我们的 WCAG 颜色对比度检查器 能即时计算两种颜色之间的对比度，并对照 AA 和 AAA 阈值评估。步骤如下：
- 访问 utilboxx.com/zh/tools/color/contrast
- 选择前景色和背景色（hex、RGB 或拾色器）
- 查看对比度数值以及 AA / AAA 通过状态
- 直接在工具中尝试推荐调整
- 复制数值用于设计系统
这个方法的优势：
- 调整颜色时实时更新
- 一目了然显示 AA、AAA、AA Large、AAA Large 状态
- 不达标时给出可访问的替代方案
- 包含视觉模拟（正常、低视力、色盲）
- 完全在浏览器中运行，不上传图片
方法 2：手算对比度
对比度公式由 WCAG 定义：
- 把每种颜色转换为相对亮度
- 计算 (L1 + 0.05) / (L2 + 0.05)，L1 为较浅颜色
- 保留两位小数
例如，黑 (#000000) 配白 (#FFFFFF) 得到 21:1——这是最大可能值。
如果你不想算，对比度检查器 更快。
方法 3：使用浏览器开发者工具
大多数现代浏览器都内置无障碍检查器。在 Chrome DevTools 中点击"检查"，然后在 Elements 面板切换到"Accessibility"标签页，就能看到页面上任意元素的对比度。这对调试生产代码非常方便。
常见问题
多少对比度算好？
AA 级下，正文至少 4.5:1，大字至少 3:1。AAA 级下分别目标 7:1 和 4.5:1。超过 7:1 已经非常优秀。
"大字"的定义？
WCAG 把大字定义为 18pt（24px）常规或 14pt（18.66px）粗体。大字在低对比下也更容易看清，所以阈值更宽松。
对比度规则适用于非文字元素吗？
是的。WCAG 2.1 对 UI 组件和图形对象引入了 3:1 的最低要求。图标、表单边框、图表元素都应满足该最低值。
如何检查渐变和图片背景的对比度？
把文本放在最坏情况（背景最浅的部分）下用纯色块测试。对于图片，可以提高覆盖层的不透明度或添加文字阴影以保持可读性。
结论
可访问的对比度是包容性设计的基石。UtilBoxx WCAG 对比度检查器 让验证颜色对变得快速、直观且具有教育意义。