WCAG 对比度 - 文本工具 · 萤炬工具箱

WCAG 对比度计算前景色与背景色的亮度对比比值，并直接标出是否达到 AA、AAA 两级标准（普通文本与大文本分别判定）。设计稿里浅灰字配白底看着精致，实际弱视用户和强光下的手机屏幕根本看不清。上线前拿主色和背景色算一遍，是最低成本的无障碍检查。按 WCAG 相对亮度公式计算，输入为 HEX 颜色。

WCAG 对比度计算前景色与背景色的亮度对比比值，并直接标出是否达到 AA、AAA 两级标准（普通文本与大文本分别判定）。设计稿里浅灰字配白底看着精致，实际弱视用户和强光下的手机屏幕根本看不清。上线前拿主色和背景色算一遍，是最低成本的无障碍检查。

使用步骤

1. 填入前景色（文字色）与背景色的 HEX 值。
2. 查看计算出的对比度比值。
3. 对照 AA / AAA 在普通文本与大文本下的达标情况。
4. 未达标就调整明度后重算。

功能与限制

• 按 WCAG 相对亮度公式计算，输入为 HEX 颜色。
• 不检测色盲友好性、不评估半透明叠加后的实际色值。

常见问题

AA 和 AAA 的门槛分别是多少？

普通文本 AA 要求 4.5:1、AAA 要求 7:1；大文本（约 18pt 以上，或 14pt 加粗）门槛放宽到 AA 3:1、AAA 4.5:1。多数产品以 AA 为交付基线。

为什么大文本的要求可以放宽？

字号越大笔画越粗，可辨识度本身就更高，所以标准允许较低的对比度。但这只针对确实达到尺寸门槛的文本，正文不能借这条降标准。

对比度和「颜色好不好看」冲突怎么办？

优先保证正文与关键操作达标，装饰性元素（分割线、辅助图形）不在文本对比度要求内。想保留浅色调可以只把文字压深，背景不动。

达标了就说明无障碍没问题吗？

不是。对比度只是其中一项。色盲友好（不能只靠颜色传达信息）、焦点可见、键盘可达、图片替代文本等都要单独检查。