快速开始
-
选色
用取色器或输入 #RRGGBB。
-
读结果
查看比率与 WCAG AA/AAA 通过状态。
↓ 在下方输入区粘贴内容，结果会立即显示
检查前景色与背景色的对比度是否符合 WCAG 2.x 建议。
前景色
背景色
Aa
对比度
17.4
WCAG AA
通过
WCAG AAA
通过
AA 大文本
通过
注释说明
WCAG 阈值
AA 正文 ≥4.5:1，大文本 ≥3:1; AAA 正文 ≥7:1，大文本 ≥4.5:1。
输入十六进制前景色与背景色，计算对比度比率并判断 AA/AAA 合规性。
WCAG 等级
AA 正文文本建议对比度 ≥4.5:1; 大文本 (18pt+ 或 14pt 粗体) ≥3:1。
功能与使用场景
检测前景/背景色的 WCAG 对比度比值，判断 AA/AAA 等级，帮助满足无障碍阅读要求。
设计系统定稿、按钮文字可读性、暗色模式微调、政府/企业站点无障碍审计前自检。
典型工作流
当设计师需要验证界面配色是否符合无障碍标准时，先在工具中输入文字色（如 #333333）和背景色（如 #FFFFFF）。工具会立即显示对比度数值（4.68:1）和 WCAG 评级（AAA）。这个过程比手动计算或反复调整更高效，尤其适合快速迭代的敏捷开发场景。
开发者在实现深色模式时，可将暗色主题的配色方案批量测试。例如同时检查主文本（#E0E0E0）在深灰（#121212）和纯黑（#000000）上的表现。工具会保留历史记录，方便比较不同组合。注意AA级要求对比度≥4.5:1（正常文本），AAA级要求≥7:1。
示例
示例
Input
#1a1a1a on #ffffff
Output
ratio ~16.1, AA pass
FAQ
支持 RGB/HSL 吗？
当前仅支持十六进制; 可先用颜色转换工具。
渐变色背景如何计算对比度？
对于CSS渐变背景，应测试文字与渐变两端及中间关键色的对比度。如果渐变包含多个颜色，取最低对比度值作为参考。实际开发中建议在渐变区域使用实色背景或添加半透明遮罩来稳定可读性。