# 要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません

<https://www.fixreports.com/ja/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