颜色对比度检查器

使用方法

使用颜色选择器或直接键入 hex 值选择前景色和背景色。该工具使用 WCAG 2.1 公式 — gamma 解码后 sRGB 通道的加权和 — 计算每种颜色的相对亮度，并将更亮的亮度除以更暗的亮度 (分子和分母加 0.05 以避免纯黑除以零)。对比度从 1:1 (相同颜色) 到 21:1 (纯黑背景上的纯白)。四个 WCAG 徽章显示通过或失败：常规文本 AA (≥ 4.5:1)、大字号文本 AA (≥ 3:1)、常规文本 AAA (≥ 7:1)、大字号文本 AAA (≥ 4.5:1)。实时预览面板显示常规和大字号的示例句子以便视觉验证。所有计算完全在浏览器中完成，无需服务器调用。

使用场景

• 在发布网站重新设计之前检查品牌调色板是否符合无障碍性
• 选择在深色或浅色主题下仍然可读的按钮和链接颜色
• 满足 Section 508、EN 301 549 或 ADA 合规性的 WCAG 2.1 AA 或 AAA 要求
• 在开发开始前审查设计师发送的原型以标记不可读文本
• 通过展示小的亮度差异如何导致大的对比度失败来教授无障碍性概念