颜色与检查目标
文字类型
目标等级
希望调整的颜色
建议在原有色相与饱和度附近调整明度,保留前景透明度。点击应用才会替换颜色。
已显示灰色文字与白色背景的检查结果。
检查结果
4.48 : 1
对比度 · 判定使用完整精度
普通文字 AA 未通过对比度 · 判定使用完整精度
清晰的文字,让阅读更轻松。
Make every word easy to read.
前景 #777777 · 背景 #FFFFFF
| 使用场景 | 最低比值 | 结果 |
|---|---|---|
| 普通文字 AA | 4.5 : 1 | 未通过 |
| 普通文字 AAA | 7 : 1 | 未通过 |
| 大文字 AA | 3 : 1 | 通过 |
| 大文字 AAA | 4.5 : 1 | 未通过 |
| 非文本参考 | 3 : 1 | 通过 |
非文本参考适用于识别控件、状态与有意义图形所必需的信息,须与相邻颜色比较。装饰图案不应直接套用这一结论。
明度调整建议
前景:#777777 背景:#FFFFFF 对比度:4.478089 : 1 普通文字 AA 未通过;大文字 AA 通过。
颜色对比度检查
输入文字前景色和背景色,计算对比度并查看 WCAG AA、AAA 的普通文字、大文字及非文本判定,支持透明前景、改色建议与报告导出,方便检查阅读对比。
整理:喜爱工具箱 · 更新于 。依据 WCAG 2.2 的 文字对比度、增强对比度与非文本对比度说明。
计算规则:对比度 = (较亮颜色相对亮度 + 0.05) ÷ (较暗颜色相对亮度 + 0.05)。黑白为 21 : 1,同色为 1 : 1。合成色的十六进制显示值会取整,判定使用完整精度。
使用说明
三步完成操作
- 01 · 填写颜色
输入文字的前景色与不透明背景色,可使用 HEX、RGB 或 HSL。
- 02 · 核对标准
查看普通文字、大文字和非文本的对比度,选择需要的 AA 或 AAA 目标。
- 03 · 调整与导出
比较明度调整建议,确认应用后复制报告或下载 JSON。
常见问题
使用前先了解这些
为什么显示 4.50 仍未通过?
判定使用未舍入的比值。4.499 虽然显示为 4.50,仍未达到普通文字 AA 的 4.5 阈值。
什么属于大文字?
WCAG 将至少 18pt 的常规字,或至少 14pt 的加粗字(或等效的 CJK 字号)视为大文字。常见 CSS 换算约为 24px 和 18.67px,实际还需核对字体。
透明颜色怎么检查?
前景先与背景合成,再计算相对亮度。背景需要明确的不透明底色;本工具不会猜测透明背景下方的颜色。
通过后就代表页面无障碍合格吗?
不能。这里只检查指定颜色组合;真实页面还需检查图片背景、字号、控件状态、键盘操作和其他无障碍要求。