WCAG 对比度检测 — AA/AAA 比率在线算
选择前景色与背景色，即时查看 WCAG 对比度比率及普通/大号字的 AA、AAA 通过情况。步骤：选色或输入 HEX → 点「检测」→ 查看比率与徽章 → 可交换颜色或采纳建议。示例：#767676 配 #ffffff 约 4.54:1，AA 普通字通过、AAA 普通字不通过。色值不上传。
怎么用
用取色器或输入 HEX 设定前景与背景。页面将 sRGB 转为相对亮度，计算对比度比率，并显示 AA/AAA（普通/大号字）的通过/不通过。可交换前后景色、复制文字摘要，或在对比不足时查看建议色。
规则说明
WCAG 对比度基于相对亮度，而非色相本身。比率异常时可对照下列规则。
- 相对亮度 L 由 sRGB 通道经 WCAG 线性化公式得出。对比度 = (较亮 L + 0.05) / (较暗 L + 0.05)。
- 阈值：AA 普通字 4.5:1，AA 大号字 3:1，AAA 普通字 7:1，AAA 大号字 4.5:1。同一比率对应本页四个徽章。
- 本页仅支持不透明 sRGB HEX（#RGB 或 #RRGGBB）。非法 HEX 会提示错误；前景与背景相同时比率为 1:1，各级均不通过。
- 隐私：色值仅在当前标签页本地计算，不会发送到服务器。
示例
载入样例：前景 #767676、背景 #ffffff，比率约 4.54:1。AA 普通字通过（需 ≥4.5:1），AA 大号字通过（需 ≥3:1），AAA 普通字不通过（需 ≥7:1），AAA 大号字通过（需 ≥4.5:1）。交换前后景色可看到比率如何变化。
适用场景
- 界面设计：交付前核对正文、标签与品牌背景色的对比是否达标。
- 按钮与标签：检查白字配彩色底或彩色字配白底是否满足 AA 普通/大号字。
- 暗色模式：交换浅/深背景，确认次要文字仍达 4.5:1 或大号字 3:1。
常见问题
WCAG 对比度阈值是多少？
AA 普通字至少 4.5:1；AA 大号字（18 pt 常规或 14 pt 粗体及以上）至少 3:1；AAA 普通字至少 7:1；AAA 大号字至少 4.5:1。本页一次显示四个徽章。
什么算大号字？
大号字因字号更大，允许更低对比度。WCAG 规定：常规字 ≥18 pt（24 px），或粗体 ≥14 pt（约 18.66 px）即视为大号字。预览区同时展示大号与普通两行，便于对照。
色值会上传吗？
不会。对比度计算完全在浏览器本地进行，色值不会上传。
配色建议怎么用？
当对比度低于 4.5:1 时，工具可能建议调深或调浅前景或背景，使 AA 普通字达标。建议色是向黑或白混合的近似值，供起步参考，未必符合品牌色规范。
和品牌色 token 工具有什么关系？
本页适合验证任意前景/背景配对。若需完整品牌色板与语义 token，可打开品牌色 token 工具；也可先用「从图片取色」采样再回来检测。
相关工具
咨询与反馈
页面不清、功能异常或想提建议？在下方起草邮件，我们会阅读每一封关于工具的来信。