对比度检查器
检查前景色与背景色的对比度，验证 WCAG AA 和 AAA 无障碍合规性。
Normal text sample — The quick brown fox jumps over the lazy dog.
Large text sample (18px+)
Contrast Ratio21.00:1
WCAG AANormal Text (≥4.5:1)✓ Pass
WCAG AALarge Text (≥3:1)✓ Pass
WCAG AAANormal Text (≥7:1)✓ Pass
WCAG AAALarge Text (≥4.5:1)✓ Pass
How to Use
- 分别设置前景色（通常为文字或图标颜色）和背景色，可使用颜色选择器或直接输入 HEX 值。对比度比值会随调整即时更新。
- 查看 WCAG AA 和 AAA 合规结果。工具分别显示普通文本（小于 18pt）和大文本（18pt 及以上，或 14pt 粗体）的通过/失败状态。
- 若某项检查未通过，根据结果调整前景色或背景色，直至达到 AA 级最低 4.5:1 的对比度要求，同时尽量保持接近原始色彩。
Frequently Asked Questions
- WCAG 合规需要什么对比度？
- AA 级要求：普通文本 4.5:1，大文本 3:1。AAA 级要求：普通文本 7:1，大文本 4.5:1。UI 组件和图形元素与相邻颜色至少需要 3:1。检查器会清晰显示你的颜色组合通过了哪些等级。
- 对比度是如何计算的？
- 对比度使用 WCAG 2.1 公式基于两种颜色的相对亮度计算，亮度公式考虑到人眼对红、绿、蓝亮度感知的差异。比值范围从 1:1（完全相同的颜色）到 21:1（纯黑与纯白）。
- 这个工具只能检查文字对比度吗？
- 虽然主要面向文字与背景的对比检查，WCAG 2.1 同样要求 UI 组件（按钮、表单边框、图标）与相邻颜色的对比度至少达到 3:1。你可以用同样的工具，输入组件颜色和其背景颜色来验证组件对比度。