颜色对比度检测

什么是颜色对比度检测？

如何使用颜色对比度检测

1. 1

   选择前景色：点击左侧『前景色』选择器，可在拾色盘拖动光标选色，也支持直接在输入框粘贴十六进制、RGB等格式的颜色值完成设置

2. 2

   选择背景色：点击右侧『背景色』选择器，可拖动拾色盘选色，也可直接输入你需要的背景色数值，确认后即可完成设置

3. 3

   查看结果：工具会自动按照WCAG标准计算前景和背景的对比度数值，同步输出AA、AAA两个等级的合规判定结果

4. 4

   预览效果：可直接在工具预览区域查看，对应前景文字在所选背景上的实际显示效果，直观判断可读性

什么场景会用到？

计算示例

注意事项

• WCAG合规分为三级，AA要求普通文本不低于4.5:1，大文本不低于3:1；AAA要求普通文本不低于7:1，大文本不低于4.5:1，工具会自动区分文本类型判断合规性
• 输入支持HEX、RGB、HSL等常见颜色格式，但不支持带透明度的RGBA颜色，不透明度为1时请转为HEX格式输入
• 大文本指18pt以上普通文本，或14pt以上粗体文本，符合这两个条件都按大文本的阈值判断合规性
• 对比度计算基于前景背景的相对亮度，不考虑文本加粗、字号对实际可读性的影响，实际设计需结合场景调整

常见问题

参考资料

• W3C WCAG 2.1 成功准则 1.4.3 对比度（AA）
• W3C WCAG 2.1 成功准则 1.4.6 对比度（增强 AAA）

本工具遵循W3C WCAG 2.1对比度计算标准，所有计算逻辑与合规判断均复现规范要求，由工具集编辑组维护，可直接用于网页无障碍设计合规检查。