# 元素必须满足最小颜色对比度比率阈值

<https://www.fixreports.com/zh/issues/color-contrast>

WCAG 1.4.3 对比度（最低） · AA 级

部分文字与背景的区分度不够，低视力用户难以阅读。

## 此规则检查什么
确保前景色与背景色之间的对比度满足 WCAG 2 AA 最小对比度比率阈值.

## 为什么重要
WCAG 1.4.3 要求普通文字的对比度至少达到 4.5:1，大号文字至少达到 3:1。颜色浅淡的价格、徽标和横幅，对低视力用户以及在强光下的所有人来说都难以阅读。

## 如何修复
### 在任何网站上
1. 找到对比度低的文字，记下其文字颜色和背景颜色：对比度检测工具或浏览器的开发者工具都能显示这两种颜色。
2. 在主题的 CSS 中修改文字或背景颜色，直到对比度至少达到 4.5:1（24px 及以上的文字，或 18.66px 粗体文字为 3:1）。
3. 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。

### 在 Shopify 上
1. 找到对比度低的文字，记下其文字颜色和背景颜色：对比度检测工具或浏览器的开发者工具都能显示这两种颜色。
2. 在“在线商店 > 模板 > 自定义 > 模板设置 > 颜色”中，为受影响的配色方案加深文字颜色或调浅背景颜色，直到对比度至少达到 4.5:1。
3. 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。

### 在 WooCommerce 和 WordPress 上
1. 找到对比度低的文字，记下其文字颜色和背景颜色：对比度检测工具或浏览器的开发者工具都能显示这两种颜色。
2. 在主题的 CSS 中修改文字或背景颜色，直到对比度至少达到 4.5:1（24px 及以上的文字，或 18.66px 粗体文字为 3:1）。
3. 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。

## 如何检查修复效果
- 重新运行扫描，确认 color-contrast 不再出现。
- 使用对比度检查工具，对具体颜色进行抽查。

## 资料来源
- axe-core 规则文档（Deque）: https://dequeuniversity.com/rules/axe/4.13/color-contrast
- 理解 WCAG 1.4.3（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum