🎨 Color Contrast Checker — WCAG AA/AAA
Check foreground/background color contrast ratios against WCAG AA and AAA accessibility standards. Instant pass/fail results for normal and large text. Free color contrast checker.
The quick brown fox jumps over the lazy dog
Normal body text — can you read this clearly?
Large Text (24px bold)
—
Contrast Ratio
—
AA Normal ≥4.5:1
—
AA Large ≥3:1
—
AAA Normal ≥7:1
—
AAA Large ≥4.5:1
How to Use
1
Pick your colors
Use the color pickers or type HEX codes for both the foreground (text) color and background color.
2
Read the contrast ratio
The tool instantly calculates the contrast ratio and shows Pass/Fail for all four WCAG 2.1 standards (AA/AAA × normal/large text).
3
Adjust until you pass
Tweak colors until you reach the standard you need. The preview text updates in real time so you can see the actual readability.
Frequently Asked Questions
What contrast ratio does WCAG require?
WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is defined as 18pt (24px) or larger, or 14pt bold (18.67px bold) or larger. Below these sizes the stricter AA 4.5:1 requirement applies.
How is the contrast ratio calculated?
The tool calculates relative luminance for each color using the WCAG formula, then divides the lighter luminance by the darker: (L1 + 0.05) / (L2 + 0.05).
Can I check transparent overlays?
This tool checks opaque colors. For semi-transparent text, first compute the final rendered color by blending with the background, then paste that result into the checker.
完整指南：WCAG颜色对比度检查器
为什么颜色对比度很重要？
WCAG 2.1定义了无障碍访问标准：AA普通文字（比率≥4.5:1）、AA大文字（≥3:1）、AAA（≥7:1）。对比度不足会使低视力或色盲用户难以阅读，影响超过8%的男性用户。
如何使用
- 选择文字颜色（前景色）。
- 选择背景颜色。
- 对比度比率和WCAG结果即时显示。
- 调整颜色直到达到所需级别。
专业技巧
- 目标至少达到WCAG AA——在许多国家是法律合规的最低标准。
- 深色背景上的白色文字通常更容易满足无障碍要求。
- 使用HSL调整亮度以在保持色调的同时达到阈值。