颜色对比度检查器 (WCAG)

前景（文字）

背景

对比度比率 —

AA · Normal — 文字 < 18pt 或 < 14pt 粗体 ≥ 4.5 : 1

AA · Large — 文字 ≥ 18pt 或 ≥ 14pt 粗体 ≥ 3.0 : 1

AA · UI — 图标、边框、焦点环 ≥ 3.0 : 1

AAA · Normal — 增强正文对比度 ≥ 7.0 : 1

AAA · Large — 增强标题对比度 ≥ 4.5 : 1

预览点击编辑

The Quick Brown Fox

Jumps over the lazy dog. 此示例展示您的颜色组合在不同大小下的外观。

小号文字 — 11px 说明文字

22px — 大号文字 · AA Large, AAA Large 14px — 普通文字 · AA Normal, AAA Normal 11px — 低于 AA 标准

对比度比率按 WCAG 2.1 计算。所有计算在您的浏览器中运行。

颜色对比度检查器 (WCAG 2.1)

输入前景色（文字）和背景色的 HEX 值，或使用颜色选择器。工具即时计算 WCAG 2.1 对比度比率，并检查五个合规级别：AA 普通文字、AA 大文字、AA UI 组件、AAA 普通文字和 AAA 大文字。实时预览展示颜色组合的实际效果。

什么是对比度？

对比度衡量两种颜色之间相对亮度的差异，范围从 1:1（颜色相同，无对比）到 21:1（白底黑字，最大对比）。比值越高，文字越容易阅读。

WCAG 是什么的缩写？

WCAG 是 Web Content Accessibility Guidelines（网页内容无障碍指南）的缩写。这份由 W3C 发布的指南规定了最低对比度，确保低视力或色盲用户也能阅读内容。

AA 级和 AAA 级有什么区别？

AA 级要求普通文字 4.5:1、大号文字 3:1，是大多数网站应达到的最低标准。AAA 级要求普通文字 7:1、大号文字 4.5:1，建议用于内容密集网站的正文。

WCAG 中什么算大号文字？

大号文字指常规粗细至少 18pt（24px），或粗体至少 14pt（约 18.67px）。达到此尺寸的文字对比度要求更低，因为字号本身提高了可读性。

这个工具能检查图片或图形上的对比度吗？

本工具检查两种纯色之间的对比度，即前景色和背景色。对于叠加在图片上的文字，请分别取背景中最亮和最暗的区域，找出最差情况下的对比度。