WCAG Contrast Checker

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Aa Large Text
Normal text preview at 14px
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand WCAG Contrast Checker

计算文字颜色与背景颜色之间的对比度，并报告它是否满足 WCAG AA 和 AAA。

How it works

每种颜色首先被换算为相对亮度。三个通道归一化到 0–1 并做线性化——低于 0.03928 阈值时除以 12.92，否则经 ((c + 0.055) / 1.055)^2.4 提升——然后按红 0.2126、绿 0.7152、蓝 0.0722 加权，因为人眼对绿色远比对蓝色敏感。对比度是 (L_较亮 + 0.05) / (L_较暗 + 0.05)，取值从颜色相同时的 1:1 一直到黑底白字的 21:1。式中的 0.05 项代表屏幕的环境眩光，也正是它让公式在纯黑时不会除以零。

When to use it

  • 在设计系统的颜色定稿之前，检查正文与其背景的对比
  • 找出在白底上仍能通过的最深灰色——#767676 约为 4.54:1，再浅一档就无法通过 AA
  • 审查占位文字、禁用态和辅助说明文字，对比度问题通常就藏在这些地方
  • 为 WCAG 2.1、EN 301 549 或 Section 508 下的无障碍审计提供证据

Watch out for

  • 阈值取决于文字，而不是颜色。AA 对正文要求 4.5:1，但对大号文字只要求 3:1——18pt（24px），或加粗时 14pt（18.66px）。工具会同时报告两者，由你判断适用哪一个。
  • 非文本元素有自己的规则。按 WCAG 1.4.11，图标、焦点框、输入框边框和图表色块需要 3:1，而当你只检查段落时很容易漏掉这一点。
  • 半透明颜色无法直接测量。带 alpha 的颜色必须先与它背后真实存在的内容合成，结果取决于那层背景。
  • 压在照片或渐变之上的文字没有单一的对比度。请测试最差的区域，或者在文字后加一层不透明的遮罩。

Not the right tool for: 证明某套配色对色觉缺陷人群可用。对比度是亮度层面的度量——两种颜色可以达到 7:1，却仍然让绿色弱视者无法区分，因此绝不要仅用色相来编码含义。

Frequently Asked Questions

如何为无障碍检查颜色对比度？

用 HEX 或 RGB 输入前景（文字）色和背景色。工具会按 WCAG 2.1 的相对亮度公式计算对比度，并给出 AA（正文 4.5:1）和 AAA（7:1）的通过或未通过结果。调整颜色直到通过为止。

颜色对比度为什么对无障碍很重要？

低对比度会让低视力用户、色觉障碍用户，或身处强光环境的用户难以阅读。约有 8% 的男性存在某种形式的色觉缺陷。WCAG 的对比度要求确保内容在这一大范围的视觉能力和环境条件下都可读。

WCAG AA 的最低对比度是多少？

WCAG 2.1 AA 要求正文（小于 18pt 或 14pt 加粗）达到 4.5:1，大号文字（18pt 以上或 14pt 以上加粗）达到 3:1。非文本 UI 组件（图标、输入框边框）需要 3:1。AAA 级把这些提高到 7:1 和 4.5:1。多数法律层面的无障碍标准要求达到 AA。

How to Use WCAG Contrast Checker

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.