👁️ 颜色对比度检查

关于颜色对比度检查工具

这个颜色对比度检查工具完全在你的浏览器中运行。选择一个前景（文本）颜色和一个背景颜色，工具会计算 WCAG 对比度并告诉你该组合是否通过 AA 和 AAA 级别的普通文本和大号文本检查。整个过程不会上传任何数据到服务器——所有计算都通过 JavaScript 在本地完成。

WCAG 合规级别

• AA 普通文本 —— 对比度至少 4.5:1。
• AA 大号文本 —— 至少 18pt（24px）或 14pt（18.66px）粗体。要求 3:1。
• AAA 普通文本 —— 对比度至少 7:1。
• AAA 大号文本 —— 对比度至少 4.5:1。

对比度如何计算

1. 将每种颜色从 sRGB 转换为线性 RGB 值（伽马解码）。
2. 计算相对亮度：L = 0.2126·R + 0.7152·G + 0.0722·B。
3. 对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 是两者中较亮的。

如何使用

1. 用前景颜色选择器选择你的文本颜色。
2. 用背景颜色选择器选择你的背景颜色。
3. 读取对比度和 WCAG 通过/未通过徽章。
4. 调整任一颜色，直到达到所需的合规级别。

常见问题

这个工具会上传我的颜色吗？ 不会。所有计算都在本地浏览器中完成。

什么算“大号文本”？ 根据 WCAG，大号文本是至少 18pt（24px）常规或 14pt（18.66px）粗体。

这能验证完整的 WCAG 合规吗？ 仅检查颜色对比度。完整的 WCAG 合规涉及许多其他标准（文本调整大小、焦点指示器等）。

非文本元素覆盖吗？ 对于非文本 UI 组件（图标、边框），WCAG 要求与相邻颜色 3:1。你也可以用这个工具检查。