此规则检查什么
确保前景色与背景色之间的对比度满足 WCAG 2 AA 最小对比度比率阈值.
为什么重要
WCAG 1.4.3 要求普通文字的对比度至少达到 4.5:1，大号文字至少达到 3:1。颜色浅淡的价格、徽标和横幅，对低视力用户以及在强光下的所有人来说都难以阅读。
如何修复
在任何网站上
- 找到对比度低的文字，记下其文字颜色和背景颜色：对比度检测工具或浏览器的开发者工具都能显示这两种颜色。
- 在主题的 CSS 中修改文字或背景颜色，直到对比度至少达到 4.5:1（24px 及以上的文字，或 18.66px 粗体文字为 3:1）。
- 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。
在 Shopify 上
- 找到对比度低的文字，记下其文字颜色和背景颜色：对比度检测工具或浏览器的开发者工具都能显示这两种颜色。
- 在“在线商店 > 模板 > 自定义 > 模板设置 > 颜色”中，为受影响的配色方案加深文字颜色或调浅背景颜色，直到对比度至少达到 4.5:1。
- 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。
如何检查修复效果
- 重新运行扫描，确认 color-contrast 不再出现。
- 使用对比度检查工具，对具体颜色进行抽查。
FixReports 如何发现此问题
我们的扫描会在真实的 Chrome 浏览器中，对所测的每个页面运行 axe-core 规则 color-contrast，并报告每个未通过的元素及其所在页面、标记代码，以及适用时的截图。
自动化测试可以确认这个具体问题确实存在，但无法判断页面的其余部分是否无障碍：有些障碍只有在人工检查页面时才会显现。