WCAG 色彩对比检查器
输入文字和背景颜色，即时获取对比度分析与 WCAG 2.x 合规建议。
支持 HEX 颜色输入，提供 AA / AAA 合规检测、实时预览与颜色改善建议。
预览效果
普通文字 — 这是一段普通大小的示例文字（16px）
大型文字 — 大标题示例（24px）
粗体大文字 — 副标题示例（18.67px bold）
对比度比值
—
:1
—
1:1
3:1
4.5:1
7:1
21:1
WCAG 2.x 合规性
| 合规等级 | 普通文字 | 大型文字 |
|---|---|---|
|
WCAG AA
普通 4.5:1 ／ 大型 3:1
|
— | — |
|
WCAG AAA
普通 7:1 ／ 大型 4.5:1
|
— | — |
普通文字：< 18pt 或 < 14pt 粗体（约 24px 或 18.67px bold）
大型文字：≥ 18pt 或 ≥ 14pt 粗体（约 24px 或 18.67px bold）
颜色改善建议
设计小提示
对比不足会让低视力用户难以阅读，也影响屏幕在强光下的可读性。建议正文对比度不低于 4.5:1。
大型文字（≥ 18pt 或粗体 ≥ 14pt）门槛较低（3:1），因为较大字体本身就更易辨认。
WCAG AAA 是最严格的规范，建议在重要说明文字与正文段落上努力达到 7:1 以上。
- 在「文字颜色」输入框粘贴文字色码（HEX 格式，例如 #333333）。
- 在「背景颜色」输入框粘贴背景色码（例如 #FFFFFF）。
- 对比度比值与 WCAG 2.x AA/AAA 合规性结果实时显示在表格中。
- 查看「颜色改善建议」区块，获取可达到各等级标准的替代色码，点击即可套用。
提示：网页正文文字的对比度建议不低于 4.5:1（WCAG AA）；关键内容建议达到 7:1（WCAG AAA）。
什么时候会用到？
- 设计网站、简报、后台界面或 App 画面时，想快速确认文字与背景是否足够清楚。
- 品牌配色、按钮色或提示信息色已经定好，但不确定是否符合无障碍标准时。
- 准备交付设计稿或前端切版前，想先检查重要文字是否容易阅读时。
为什么常听到 4.5:1 和 7:1？
4.5:1 是普通文字常见的 WCAG AA 门槛，7:1 则是更严格的 AAA 目标。这两个数值代表前景与背景亮度差距是否足够，数字越高，通常越容易阅读。
大字和小字的标准为什么不同？
因为字体越大、越粗，本来就比较容易辨识，所以大字只要达到较低的对比门槛也可能合格。但如果内容重要，保持更高对比仍然更稳妥。
通过 AA 就一定够用吗？
大多数正式网站或产品界面先达到 AA 已经很实用，但如果页面信息密集、使用情境复杂，或服务对象包含更多低视力用户，追求 AAA 会更保险。
这个工具提供的建议色可以直接拿去用吗？
可以把它当成快速修正方向。建议你仍要回到真实界面检查整体视觉风格、品牌一致性，以及 hover、disabled、dark mode 等不同状态是否也都清楚可读。
只看数值就能保证可读性吗？
不能完全保证。对比度是重要基准，但字体粗细、字号、行距、背景纹理与屏幕环境都会影响阅读感受，所以最好搭配实际画面一起检查。