输入前景色和背景色即可计算对比度比值，判断是否满足 WCAG AA/AAA，并实时预览文字可读性。
WCAG对比度标准详解
WCAG（Web内容无障碍指南）规定了文本与背景的最低对比度要求。AA级要求普通文本对比度至少4.5:1，大文本（18pt以上或14pt粗体）至少3:1；AAA级要求普通文本7:1，大文本4.5:1。对比度比值基于相对亮度计算，考虑了人眼对不同颜色的感知差异。
为什么颜色对比度重要
- 约8%的男性和0.5%的女性有色盲
- 老年用户视力下降需要更高对比度
- 移动设备户外使用时屏幕可见性降低
- 符合无障碍标准是法律要求（如ADA）
- 良好的对比度提升所有用户的阅读体验
对比度计算原理
对比度比值通过颜色的相对亮度（Relative Luminance）计算。相对亮度考虑了人眼对红、绿、蓝三色的不同敏感度（绿色最敏感），使用公式：L = 0.2126R + 0.7152G + 0.0722B。对比度比值 = (L1 + 0.05) / (L2 + 0.05)，其中L1是较亮颜色的亮度。
实用的对比度检查流程
先检查正文与背景，确保至少满足 AA 标准；再检查辅助文本、占位符与禁用态，这些往往对比度更低。按钮和链接建议同时测试默认、悬停和按下状态，避免状态变化时对比度下降。若文字覆盖在图片或渐变上，应以最差区域为准，必要时增加遮罩或底色。最后在不同设备亮度和环境光下复核，确保实际使用场景仍可读。
FAQ
Q: 什么是大文本的定义标准？
A: WCAG定义大文本为：18点（24像素）及以上的常规字体，或14点（约18.5像素）及以上的粗体字体。大文本因为字形更大更容易辨认，所以对比度要求可以适当降低。UI中的标题通常可按大文本标准处理。
Q: 对比度检测只看黑白吗？
A: 不是。对比度检测考虑所有颜色组合的亮度差异。即使两个颜色看起来差异明显（如红色和绿色），如果它们的亮度相近，对比度仍可能不足。这就是为什么某些颜色组合对色盲用户特别困难。工具会根据实际亮度计算准确的对比度值。
Q: 如何快速修复对比度不足的问题？
A: 最简单的方法是调整明暗度：让文字更深或背景更浅，以提高亮度差异。也可以增大字号达到大文本标准，或在文字下方加半透明遮罩提升可读性。