🧰 UtlKit

WCAG 颜色对比度检测器

检查颜色对比度是否符合 WCAG 2.1 AA 和 AAA 标准。

天地玄黄宇宙洪荒日月盈昃辰宿列张
天地玄黄 宇宙洪荒 — 示例预览文本
小字预览(14px / 11pt 粗体)
对比度
21.00:1
✅ 通过
WCAG AA(普通文本) (min 4.5:1)
✅ 通过
WCAG AA(大文本) (min 3:1)
✅ 通过
WCAG AAA(普通文本) (min 7:1)
✅ 通过
WCAG AAA(大文本) (min 4.5:1)
🐛

报告问题 / 提出建议

发现 Bug 或有建议?帮助我们改进这个工具。

📊 数据摘要(自动填写)

工具: contrast-checker · /tools/contrast-checker/

foreground: #000000

background: #FFFFFF

这是什么工具?

WCAG 颜色对比度检测器评估前景色和背景色之间的对比度比率以确保无障碍合规性。对照 WCAG 2.1/2.2 标准(AA 和 AAA 级别)检查以确保所有用户(包括视觉障碍用户)可读。

如何使用

  1. 1

    设置前景色

    选择或输入文本颜色。

  2. 2

    设置背景色

    选择或输入背景颜色。

  3. 3

    查看结果

    查看对比度比率和 WCAG AA/AAA 通过/失败状态。

常见问题

我需要多少对比度比率?

WCAG 2.1 AA 级要求普通文本 4.5:1,大文本 3:1(18px+ 常规或 14px+ 粗体)。AAA 级要求普通文本 7:1,大文本 4.5:1。

为什么颜色对比度重要?

不足的对比度会使低视力用户、色盲用户在明亮屏幕上难以阅读文本。良好的对比度改善所有人的可读性并确保无障碍合规。

结果不对该怎么办

请双校输入值。工具使用标准公式但边界情况可能需要手动验证。