Ctrl K
WCAG 颜色对比度 · 使用说明
WCAG 颜色对比度检查工具输入前景色与背景色后实时计算对比度比值，按 WCAG 2.1 判定普通文字与大号文字的 AA、AAA 是否达标，并在不达标时给出同色系但更深的修正建议色与修正后的比值。支持取色器与手填十六进制。做无障碍改造、检查暗色主题的可读性、评审设计稿时都用得上，计算全部在浏览器本地完成。
示例
输入
前景 #6366f1，背景 #0a0a0f
输出
4.42:1 —— 普通文字 AA（≥4.5）未通过，大号文字 AA（≥3）通过 建议改为 #6b6ef9（4.91:1，AA 达标）
如何使用
- 选择或输入前景色与背景色的十六进制值
- 查看对比度数值与 AA / AAA 判定
- 若未达标，点击建议色一键替换
小贴士
- 普通文字需 ≥4.5:1，大号文字需 ≥3:1，AAA 需 ≥7:1
- 点「交换」可快速互换前景与背景
常见问题
对比度检查会上传我的数据吗？
不会。对比度计算在浏览器本地完成，颜色值不会上传任何服务器，页面关闭后也不留下记录，和站内 本地工具 一致。
4.5:1 是怎么算出来的？
按 WCAG 的相对亮度公式，先分别算出前景与背景的亮度 L，再做 (L1+0.05)/(L2+0.05) 即得对比度。普通正文要求 ≥4.5:1 就是这个含义。
AA 和 AAA 差在哪？
AA 是基本达标门槛（普通文字 ≥4.5:1），AAA 是更高标准（普通文字 ≥7:1）。多数站点以 AA 为最低要求，AAA 用于无障碍要求更严格的场景。
为什么大字号标准更宽松？
字号大、笔画粗时更易辨认，WCAG 把大号文字（约 ≥24px 常规，或 ≥18.5px 加粗，原定义 18pt / 14pt 粗体）的对比度门槛降到 3:1。
想换个更合适的配色？
若比值不达标，工具会直接给出建议色；也可用 颜色转换 手动微调 HEX / RGB / HSL 后再回来复测。