第一步：选择对比度检查工具
在HeronTool网站，找到对比度检查（Contrast Checker）工具。它支持输入前景色和背景色（十六进制、RGB或HSL），并实时显示WCAG 2.1的对比度比率。建议同时使用浏览器插件，如HeronTool的Color Picker，快速取色。
第二步：输入颜色并查看结果
- 在“Foreground”字段输入文本颜色，在“Background”字段输入背景色。
- 工具自动计算对比度比值（如4.5:1），并显示是否符合AA或AAA标准。
- 若未达标，可点击“Swap”按钮交换前景/背景，或使用“Lighten/Darken”滑块微调。例如，对于正文，AA要求至少4.5:1，AAA要求7:1。
第三步：应用到实际设计
- 对于小号文本（<18pt），务必达到AA；大号文本（≥18pt或14pt加粗）要求3:1。
- 在HeronTool的对比度检查页面，可保存常用颜色组合，生成可访问性报告，供团队审核。
- 测试所有状态：如链接、按钮悬停、禁用状态，确保对比度一致。
常见问题 (FAQ)
问：对比度比值怎么计算？
答：工具基于亮度公式，自动计算，无需手动。
问：装饰性元素需要检查吗？
答：非文本装饰（如背景图案）无需，但图标和文本必须检查。
问：如何快速找到达标颜色？
答：使用HeronTool的“Suggestions”功能，它提供相邻的推荐色板。
文章标签
