颜色对比度检查工具
输入前景色与背景色，实时计算 WCAG 2.1 对比度比值，自动评级 AA / AAA 是否达标。 覆盖普通文字、大文字、UI 组件三类场景，配真实文字渲染预览，所见即所得。 所有计算在浏览器本地完成，无需上传。
请选择前景色与背景色，或点击「示例」载入演示配色。
常见问题
什么是 WCAG 颜色对比度？为什么前端开发需要关注？
WCAG（Web Content Accessibility Guidelines，Web 内容无障碍指南）是 W3C 制定的
Web 无障碍国际标准。颜色对比度指前景色（如文字）与背景色之间的亮度差异，用比值
1.0:1 到 21.0:1 表示（1.0 为同色，21.0 为黑底白字）。
对比度过低会导致色弱用户、老年用户、强光环境下用户难以阅读，许多国家（如美国 ADA、欧盟 EN 301 549）
将 WCAG 列为法律法规要求。前端开发在交付前应检查所有文字 / 图标 / 控件边框的对比度是否达标。
WCAG 2.1 的 AA 和 AAA 级别有什么区别？
WCAG 分为三个合规级别：A（最低）、AA（行业基准，多数政府与商业网站要求）、
AAA（最高，特殊场景如医疗、政府关键信息才要求）。
对比度要求：AA 普通文字 ≥ 4.5:1、AA 大文字 ≥ 3.0:1；
AAA 普通文字 ≥ 7.0:1、AAA 大文字 ≥ 4.5:1。
大文字定义为 ≥ 18px（约 14pt）普通字重，或 ≥ 14px（约 11pt）加粗。
UI 组件（按钮边框、图标、表单控件）≥ 3.0:1 即可。
对比度比值 4.5:1 是怎么算出来的？
WCAG 使用相对亮度（relative luminance）计算对比度。每个 RGB 通道先做 gamma 解码
（c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4），然后按人眼对绿色的敏感度加权求和
（L = 0.2126·R + 0.7152·G + 0.0722·B）。两色的对比度公式为
(L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮色、L2 为较暗色。
加 0.05 是为了补偿显示器的最低亮度（不是纯黑）和环境光反射。
本工具完全使用此公式计算，结果与 W3C 官方计算器一致。
同一种颜色在不同背景下对比度不同吗？
是的。对比度只取决于两色的相对亮度差，与色相无关。
例如 #1f2937（深灰）在白底上对比度约 14.7:1（达标 AAA），但在
#374151（中灰）底上对比度仅约 3.5:1（普通文字不达标）。
因此配色方案应在实际背景下逐一验证，不能假设「深色文字一定合规」。
本工具支持一键交换前景/背景色，便于快速验证双向场景。
为什么我用了品牌色，对比度总是不达标？
品牌色通常饱和度高、明度中等，与白色背景对比度往往不足 4.5:1。
常见解决方案：1) 加深品牌色作为文字色，原色仅用于按钮背景、图标等大面积色块；
2) 改用更深的同色相变体（如品牌蓝 #2b6cff 文字不达标，可改用
#1e3a8a）；3) 加大字号使其符合「大文字」标准（≥ 18px 或 ≥ 14px 加粗），
只需 ≥ 3.0:1；4) 更换背景色，如浅灰 #f9fafb 替代纯白，差异虽小但有时足够。
渐变背景或图片背景的对比度怎么算？
WCAG 对渐变与图片背景没有精确公式，建议做法：1) 在渐变最浅和最深
两端分别测试文字对比度，取较低值；2) 图片背景应在图片上叠加半透明遮罩
（如 rgba(0,0,0,0.5)）后再测文字对比度；3) 若图片背景复杂无法保证一致对比度，
应改为纯色背景文字区（如卡片、胶囊背景）。本工具仅支持纯色对比纯色，
渐变场景需手动取代表点验证。
暗色模式下还需要满足对比度要求吗？
需要。WCAG 对比度要求与主题无关，暗色模式下文字与背景的对比度同样需达到
AA / AAA 标准。常见误区是认为「暗色背景天然高对比」，但实际上许多暗色 UI 使用
#374151 背景 + #9ca3af 文字，对比度仅 4.0:1，不达 AA。
建议暗色模式下文字色至少使用 #e5e7eb 以上亮度，背景色不超过 #1f2937，
才能稳定达到 4.5:1。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有颜色解析、对比度计算、评级判断逻辑由 JavaScript 在你本地执行， 输入的颜色值不会发送到任何服务器。这对于处理品牌色、商业设计稿配色尤其重要， 可避免配色方案提前泄露。但请注意：浏览器历史记录、屏幕截图、共享设备可能留下痕迹， 如需彻底保密请在隐私模式中使用。