颜色与检查目标

文字类型

目标等级

希望调整的颜色

建议在原有色相与饱和度附近调整明度,保留前景透明度。点击应用才会替换颜色。

已显示灰色文字与白色背景的检查结果。

检查结果

4.48 : 1
对比度 · 判定使用完整精度
普通文字 AA 未通过

清晰的文字,让阅读更轻松。
Make every word easy to read.

前景 #777777 · 背景 #FFFFFF

使用场景最低比值结果
普通文字 AA4.5 : 1未通过
普通文字 AAA7 : 1未通过
大文字 AA3 : 1通过
大文字 AAA4.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。合成色的十六进制显示值会取整,判定使用完整精度。

继续使用:配色方案 · 图片配色提取 · 颜色选择器

使用说明

三步完成操作

  1. 01 · 填写颜色

    输入文字的前景色与不透明背景色,可使用 HEX、RGB 或 HSL。

  2. 02 · 核对标准

    查看普通文字、大文字和非文本的对比度,选择需要的 AA 或 AAA 目标。

  3. 03 · 调整与导出

    比较明度调整建议,确认应用后复制报告或下载 JSON。

常见问题

使用前先了解这些

为什么显示 4.50 仍未通过?

判定使用未舍入的比值。4.499 虽然显示为 4.50,仍未达到普通文字 AA 的 4.5 阈值。

什么属于大文字?

WCAG 将至少 18pt 的常规字,或至少 14pt 的加粗字(或等效的 CJK 字号)视为大文字。常见 CSS 换算约为 24px 和 18.67px,实际还需核对字体。

透明颜色怎么检查?

前景先与背景合成,再计算相对亮度。背景需要明确的不透明底色;本工具不会猜测透明背景下方的颜色。

通过后就代表页面无障碍合格吗?

不能。这里只检查指定颜色组合;真实页面还需检查图片背景、字号、控件状态、键盘操作和其他无障碍要求。