🌓
免费 WCAG 颜色对比度检查器
检查两种颜色是否符合 WCAG AA 和 AAA 无障碍对比度标准。在多种文字大小下实时预览，对比度不足时自动提供建议。
加载后可离线使用
大号标题文字
正文文字（18px），适合阅读与内容展示。
正文文字（16px），适合段落。
小号文字（14px），适合说明与元数据。
14.63:1
对比度
✓WCAG AA — 普通文字
要求 4.5:1 · 当前 14.63:1
✓WCAG AA — 大号文字
要求 3.0:1 · 当前 14.63:1
✓WCAG AAA — 普通文字
要求 7.0:1 · 当前 14.63:1
✓WCAG AAA — 大号文字
要求 4.5:1 · 当前 14.63:1
✓UI 组件 / 图形对象
要求 3.0:1 · 当前 14.63:1
快速预设
基于 WCAG 2.1 对比度规范。大号文字 = 18pt（24px）常规或 14pt（18.66px）粗体。HEX 代码双向同步：输入 HEX 或使用取色器，两个输入框保持同步。
常见用途
- 审计网页以获得WCAG合规性验证您网站的文本颜色符合WCAG AA或AAA可访问性对比度标准。
- 验证品牌颜色组合测试品牌调色板配对，确保它们适用于可访问的UI设计。
- 测试深色模式调色板浅色文本在深色背景上仍可能失败对比——在此处检查您的深色模式调色板配对。
- 打印材料的颜色配对海报、标志和打印材料也需要可读的对比——尤其是对于年长的观众。
- 设计无障碍按钮颜色确保你的 CTA、操作按钮和链接通过 WCAG 与其背景的对比度测试。
工作原理
对比度检查完全在你的浏览器中使用 WCAG 2.1 相对亮度算法运行——没有库、没有服务器，只有严格遵循规范的手写数学。你输入或选择颜色时，每个结果都会实时更新。
- 1十六进制输入与规范化接受 3 位（#abc）和 6 位（#aabbcc）十六进制值，并规范化为完整的 RGB 三元组。无效输入会被立即拒绝，而不是悄悄默认为黑色，因此会显示红色边框，而不是误导性的通过结果。
- 2WCAG 亮度计算每种颜色都按 WCAG 2.1 公式转换为相对亮度：sRGB 通道值通过分段伽马校正线性化（低于 0.03928 时除以 12.92，高于时取 2.4 次方），然后按 0.2126R + 0.7152G + 0.0722B 加权。
- 3对比度与合规检查对比度按 (较亮 + 0.05) / (较暗 + 0.05) 计算，并对照全部五个 WCAG 阈值检查：AA 普通文本（4.5:1）、AA 大号文本（3:1）、AAA 普通文本（7:1）、AAA 大号文本（4.5:1）和 UI 组件（3:1）。每次按键结果都会更新。
- 4保持色相的修正建议当颜色组合未通过 WCAG AA 时，工具会在 HSL 亮度空间中搜索——从原始亮度向两个方向逐步扩展——为每种颜色找到在保持相同色相和饱和度的同时达到 4.5:1 的最接近变体。还可以使用 EyeDropper API（Chromium）直接从屏幕上取色。