颜色对比度检测

颜色对比度检查器用于验证前景色（文字、图标）与背景色之间的对比度是否满足 WCAG 无障碍标准，输入两种颜色后即时显示对比度比值以及 AA / AAA 级别的通过状态。它是 UI 设计阶段和无障碍审查中验证文字可读性的常用工具。

WCAG 对比度标准与判断阈值

WCAG 定义的对比度比值从 1:1（完全无对比，如白底白字）到 21:1（黑底白字）。两个实用判断阈值：

• AA 级普通文本：对比度 ≥ 4.5:1，覆盖大多数网站和应用的合规要求
• AA 级大号文本：对比度 ≥ 3:1，适用于 18pt（约 24 px）及以上或 14pt（约 18.5 px）加粗文字
• AAA 级普通文本：对比度 ≥ 7:1，适用于正文内容和高无障碍要求场景
• AAA 级大号文本：对比度 ≥ 4.5:1

工具同时检测普通文本、大号文本和图形组件（图标、按钮边框、图表元素）三类场景，每类独立显示通过或失败状态。

亮度滑块的作用

颜色选择器旁边的亮度滑块调整颜色的明度（L 通道），保持色相和饱和度不变。当对比度不足时，上移文字色滑块（调亮）或下移背景色滑块（调暗）通常是最快的修复方式，不需要重新选色。例如品牌蓝 #3B82F6 在白色背景上对比度约为 3.0:1，不满足 AA 标准；将其调暗至约 #1D4ED8 后对比度可达 5.3:1，通过 AA 普通文本要求。

装饰性元素与例外情况

WCAG 豁免以下情形的对比度要求：纯装饰性元素（无信息意义）、禁用状态的表单控件、品牌 Logo 文字。导航链接、按钮标签、表单提示文字则必须符合标准，因为这些内容直接影响用户操作。

对比度通过但视觉仍不清晰

对比度计算基于相对亮度，部分颜色组合（如纯红 #FF0000 在黑底上）亮度对比达标，但色相差异导致色觉缺陷用户难以阅读。建议同时查看工具中的实际效果预览，不要仅依赖数字判断。

常用配色场景建议

正文内容建议达到 AAA 级（7:1），长时间阅读更舒适；按钮、导航链接满足 AA 级（4.5:1）即可；标题大字在 AA 大文本标准（3:1）下也具备良好可读性。过高的对比度（如纯黑白 21:1）在大面积使用时可能造成视觉疲劳，在满足标准的基础上选择柔和配色是更好的实践。