色のコントラスト

このルールに対して人工知能をどのように活用しているか学びましょう！

チェック内容

テキストとその背景の色のコントラストがWCAG 2 AAの最小比率の基準を満たすことを確認します。

WCAG 2.0 1.4.3 AAに基づくと、テキストの視覚的な表示は、通常のテキストで少なくとも4.5:1のコントラスト比、大きなテキストで3:1のコントラスト比を持つ必要があります。大きなテキストとは、少なくとも18ptまたは14ptの太字と定義されます。

失敗例 ❌

成功例 ✅

一目でわかる

• このルールはユーザーに重大な影響を与えます
• 通常のテキストは背景に対して最低4.5:1のコントラスト比を持たなければなりません
• 大きなテキスト（少なくとも18ptまたは14ptの太字）は最低3:1のコントラスト比を持たなければなりません
• このルールは静的テキスト要素およびインタラクティブ要素内のテキストの色のコントラストをチェックします
• このルールはAIを使用してコントラストの問題を検出しますが、複雑な背景では手動検証が必要な場合があります

ユーザーへの影響

色のコントラストレベルは、テキストを背景から区別する容易さに影響を与えます。テキストと背景の色が明るさにおいてあまりにも似通っている場合、テキストは読みづらくなります。

これは、暗い場所や日光の下、古い画面を使用しているすべての人に影響しますが、特に視力が低いユーザーには問題です。あるユーザーにとって読みやすいラベルが、ほかのユーザーにはほぼ見えないぼやけたものとして映るかもしれません。

色のコントラスト問題の確認

1. 以下のいずれかを行います：
   • シミュレーターでアプリを開く、または
   • 物理デバイス上でアプリのスクリーンショットを撮ります。スクリーンショットを自分に送信し、コンピューターで開きます。
2. カラーピッカーを使用して次のことを行います：
   1. テキスト要素の最も正確な色を取得します。
   2. テキストの後ろにあるそれぞれの異なる背景色の最も正確な色を取得します。
3. 各色をDeque Color Palette Contrast Checkerに入力してください。
4. 次のうちのいずれかの結果が出ます：
   • アクセシブル: 色のコントラスト比がそのテキストサイズに対して必要な最小値満たしています
   • 非アクセシブル: 色のコントラスト比がそのテキストサイズに対して必要な最小値満たしていません

問題の修正

色のコントラストの問題は、テキストの色と背景色の明るさがあまりにも似ているときに発生します。この問題を解決するには、DequeのColor Contrast Analyzerを使用して、テキストサイズに基づいた必要な最小値を満たす色を見つけます。必要なコントラスト比が達成されるまで、テキストの色または背景色を調整してください。

このルールを無視してもいいですか？

色のコントラストは重大な影響ユーザーにとって重要です。適切な色のコントラストはWCAG AAの要件であるため、優先的に修正すべきです。まれに、このルールを無視することが許容される場合があります。例えば、テキストが純粋に装飾的で情報を伝えない場合です。ルールを無視するについてもっと学んでください。

よくある質問

このルールに既知の制限はありますか？\

はい。

• このルールは、グラデーション、画像、または半透明の背景のように多くの色を使用する背景にテキストが配置されている場合、不正確な結果を生む可能性があります。もし結果が誤っていると思う場合は、Deque Color Contrast Analyzerを使用して、テキストと背景の色の比率を確認してください。
• Color Contrastルールは、AppleのVisionフレームワーク（光学文字認識, OCR）を使用して要素の境界内のテキストを読み取ります。OCRは、小さなアイコン風の字形（例: 逆矢印ブルック、箇条書き、装飾シンボルなど）をテキストとして誤認識することがあります。これが発生すると、Color Contrastルールは可読テキストを含まない要素に対して実行され、アイコン専用のボタンに対して結果が生成されることがあります。OCRの出力はスキャンごとに決定的でないため、同じ要素が一度のスキャンでColor Contrastの結果に現れ、次のスキャンで「適用外」と報告されることがあります。これはOCRの既知の特性であり、ルールのバグではありません。この問題を回避するためにignoreAPIを使用して色のコントラスト結果を抑制することができます。ルールを無視するについてもっと学びましょう。

リソース

Deque University コースページ

• SC 1.4.3 コントラスト（最小）
• 色
• コントラスト

注: Deque University のリソースへの完全なアクセスには、サブスクリプションが必要です。

その他のリソース

• WCAG 技術 G18: テキスト（およびテキストの画像）とその背景との間に少なくとも4.5:1のコントラスト比を確保する
• W3C 成功基準1.4.3の理解：コントラスト（最小）