Toollet
按任务或应用名称搜索搜索联系我们
价格

对比度检查器

选择文本和背景颜色,检查其是否达到 WCAG AA 和 AAA 对比度阈值。分别查看普通文本和大号文本的结果,并使用所选颜色进行预览。

# 前缀可选。不支持 Alpha。

# 前缀可选。不支持 Alpha。

功能介绍

检查两种颜色的对比度比例

选择文本和背景颜色,以两位小数查看其对比度比例。

比较 AA 和 AAA 阈值

分别查看普通文本和大号文本的结果,并使用所选颜色进行预览。

与黑色和白色比较

打开可选详情,比较文本颜色在黑色和白色背景上的对比度。

使用方法

  1. 输入文本颜色

    选择 HEX、RGB、HSL、HSV 或 CMYK,然后输入文本颜色。选择色板颜色会将输入切换为 HEX。

  2. 选择背景

    输入三位或六位 HEX,或使用拾色器。# 前缀可选。

  3. 检查对比度

    选择“检查对比度”以查看比例、文本预览和 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 结果,以及文本预览。结果不提供保存操作。

当前设置

搜索工具