对比度检查器
依据 WCAG AA/AAA 检查颜色对比度。
Good color contrast keeps text and interface elements readable for everyone, including people with low vision. Pick a foreground and background color to see the WCAG contrast ratio and whether it passes AA and AAA for normal text, large text and UI components — plus simple suggestions when it falls short.
良好的对比度可让文字和界面对所有人（包括低视力人群）都清晰可读。正文建议至少达到 4.5:1。
天地玄黄 宇宙洪荒 The quick brown fox
天地玄黄 宇宙洪荒 The quick brown fox
对比度21.00:1
- 正文文字 AA · 4.5
- 正文文字 AAA · 7
- 大号文字 AA · 3
- 大号文字 AAA · 4.5
- UI 组件 3.0
所有颜色转换均在你的浏览器本地完成 —— 不上传、不存储、不记录。
工作原理
- 1 Choose a foreground (text) color.
- 2 Choose a background color.
- 3 Read the contrast ratio and AA/AAA pass/fail.
- 4 Follow the suggestions until it passes.
常见用例
- Make sure body text meets WCAG AA (4.5:1).
- Check button and link colors for accessibility.
- Validate a brand palette before shipping.
- Avoid low-contrast text that's hard to read.
常见问题
Is my color data sent anywhere?
No. Every conversion and calculation runs entirely in your browser — nothing is uploaded, stored or logged.
What ratios do AA and AAA require?
AA needs 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or ≥24px). AAA needs 7:1 and 4.5:1. UI components and graphics need at least 3:1.
How is the ratio calculated?
Using the official WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1/L2 are the relative luminance of the lighter and darker colors.
Is it really free?
Yes — free, with no signup, no watermark and no limits.