对比度检查器
选择文本和背景颜色,检查其是否达到 WCAG AA 和 AAA 对比度阈值。分别查看普通文本和大号文本的结果,并使用所选颜色进行预览。
功能介绍
检查两种颜色的对比度比例
选择文本和背景颜色,以两位小数查看其对比度比例。
比较 AA 和 AAA 阈值
分别查看普通文本和大号文本的结果,并使用所选颜色进行预览。
与黑色和白色比较
打开可选详情,比较文本颜色在黑色和白色背景上的对比度。
使用方法
输入文本颜色
选择 HEX、RGB、HSL、HSV 或 CMYK,然后输入文本颜色。选择色板颜色会将输入切换为 HEX。
选择背景
输入三位或六位 HEX,或使用拾色器。# 前缀可选。
检查对比度
选择“检查对比度”以查看比例、文本预览和 AA/AAA 结果。更改任一颜色后请重新检查。
适用场景
检查背景上的正文
输入页面所用的颜色,检查普通文本是否达到所需比例。
比较标题颜色
考虑标题的配色时,查看大号文本结果和预览。
结果说明
AA 和 AAA 比例
AA 要求普通文本至少达到 4.5:1,大号文本至少达到 3:1。AAA 要求普通文本至少达到 7:1,大号文本至少达到 4.5:1。结果使用未舍入的比例计算。
大号文本的判定标准
大号文本至少为 18 pt,或 14 pt 粗体。在 CSS 中对应 24px,或约 18.7px 粗体。预览使用 16px 和 24px 的常规字重文本。
检查范围
此工具检查两种不透明 sRGB 颜色之间的文本对比度,不评估图像背景、Alpha 混合、非文本元素或整个页面是否符合要求。
问答
比例通过是否表示整个页面符合要求?
此结果仅涵盖所选两种颜色的文本对比度。请另外评估整个页面是否符合要求。
黑白比较结果表示什么?
将所选文本颜色分别与黑色和白色进行比较,并显示比例较高的一方。这与所选背景的结果分开显示。
可以检查透明文字或图像上的文字吗?
不支持 Alpha 和图像背景。请输入不透明的文本颜色和背景颜色。
输入和输出
- 文本颜色
- HEX、RGB、HSL、HSV 或 CMYK 数值,也可以使用拾色器。CMYK 为未使用 ICC 配置文件时的估算值。
- 背景
- 三位或六位 HEX,或使用拾色器。不支持 Alpha。
- 结果
- 对比度比例、普通和大号文本的 AA/AAA 结果,以及文本预览。结果不提供保存操作。