颜色对比度检测器
输入前景色与背景色，立即得到 WCAG 2.1 对比度数值、AA / AAA 判定与实时预览；未达标时给出保持色相的最小改动建议色。
当前对比度
4.43:1
大字号示例文字 24px
正文示例：这段文字用于检查小字号在当前配色下是否依然清晰可读。
仅大字号文字与界面组件达标，正文需要继续加大反差。
支持 #hex、rgb()、hsl() 与颜色名。结果可复制、下载，或生成能还原这组配色的分享链接。
颜色输入
28px 标题文字
18px 副标题文字
14px 正文：真实预览比数字更直观，注意小字号是否发虚。
WCAG 判定
仅大字号文字与界面组件达标，正文需要继续加大反差。
4.43:1
对比度
AA 正文
要求 ≥ 4.5:1
AA 大字号
要求 ≥ 3:1
AAA 正文
要求 ≥ 7:1
AAA 大字号
要求 ≥ 4.5:1
图形与界面组件
要求 ≥ 3:1
建议色
调前景色达到 AA（4.5:1）
#69707d
调前景色达到 AAA（7:1）
#4e535d
改背景色达到 AA（4.5:1）
#f9f7f2
调色板批量检测
每行一个颜色，一次检查整套品牌色在当前背景下的可读性，最多 30 个。
| 颜色 | 对比度 | 判定 | 操作 |
|---|---|---|---|
#0f766e | 5.02:1 | AA 正文 | |
#b91c1c | 5.93:1 | AA 正文 | |
#a16207 | 4.52:1 | AA 正文 | |
#1d4ed8 | 6.15:1 | AA 正文 | |
#94a3b8 | 2.35:1 | 未达标 |
#6b7280 在 #f7f5ef 上的对比度为 4.43:1，仅大字号文字与界面组件达标，正文需要继续加大反差。
升级 Pro 解锁「PDF 无障碍报告」
PRO升级 Pro 后，可把当前配色与整套调色板的检测结果导出为 A4 PDF，直接用于设计评审与验收留档。
- 导出 A4 PDF 报告，含配色样本、对比度数值与 5 项 WCAG 判定结果
- 调色板批量检测结果整表进入报告，最多 30 个颜色一次留档
- 报告标注建议色与检测日期，可直接作为无障碍验收附件
这个工具能做什么
按 WCAG 2.1 的相对亮度公式计算两个颜色的对比度，并对照成功准则 1.4.3、1.4.6 与 1.4.11 给出 AA / AAA 判定。未达标时，工具保持色相与饱和度不变，只沿明度方向找出改动最小的达标颜色。
适用场景
设计稿评审：确认正文、次要文字、占位符在背景上是否可读。
前端还原：核对暗色模式下的文字与边框是否仍然达标。
品牌配色落地：批量检查主色、辅助色在白底与深色底上的表现。
无障碍验收：为政务、教育、医疗等合规要求高的项目留存证据。
如何使用
1. 填写或吸取前景色与背景色。
2. 查看对比度数值与 5 项判定结果。
3. 未达标时点击建议色一键应用。
4. 复制结论、下载 TXT，或生成分享链接。
常见问题 FAQ
对比度多少才算合格？
WCAG 2.1 成功准则 1.4.3 要求正文至少 4.5:1，大字号（18pt 或 14pt 加粗以上）至少 3:1；准则 1.4.6 的 AAA 级把两者提高到 7:1 和 4.5:1。按钮边框、图标等非文本元素按准则 1.4.11 至少 3:1。
大字号是怎么界定的？
WCAG 把 18pt（约 24px）以上的常规字重，或 14pt（约 18.66px）以上的加粗字，算作大字号。低于这个尺寸的正文都要按 4.5:1 要求。
半透明颜色可以直接检测吗？
不能直接检测。对比度基于最终呈现的颜色计算，带 alpha 的颜色需要先与实际背景混合后再取值。工具会忽略 alpha 通道，请填写混合后的实际颜色。
建议色是怎么算出来的？
工具保持原色的色相与饱和度不变，只沿明度方向逐步搜索，同时向更亮和更暗两侧查找，返回改动幅度更小、且刚好达标的那个颜色，尽量不破坏原有配色关系。
颜色数据会上传吗？
不会。颜色解析、对比度计算、批量检测和报告导出都在浏览器本地完成，不向服务器发送任何颜色数据。