色のコントラスト
すべてのユーザーがテキストを読めるようにしましょう
このルールに人工知能をどのように活用しているかを学びましょう！
確認する内容
テキストとその背景の色のコントラストが、WCAG 2 AAの最小比率の基準を満たしていることを確認します。
WCAG 2.0 1.4.3 AAによれば、テキストの視覚的な表示は、通常のテキストで少なくとも4.5:1、また大きなテキストでは3:1のコントラスト比を持たなければなりません。大きなテキストは少なくとも18pt、または14ptの太字と定義されます。
不合格例 ❌
普通のテキストで4.5:1の最小限の比率や、大きなテキストで3:1の比率を下回ります
背景と区別がつきにくいテキストです
視力が低いユーザーはこのテキストを読むことができないかもしれません
合格例 ✅
通常のテキストで4.5:1の最小比率を満たすか超えています
背景と明確に区別できるテキストです
視力が低いユーザーもこのテキストを難なく読むことができます
概要
- このルールはユーザーにとって重大な影響があります
- 通常のテキストは背景に対して少なくとも4.5:1のコントラスト比が必要です
- 大きなテキスト（少なくとも18ptまたは14ptの太字）は、少なくとも3:1のコントラスト比が必要です
- このルールは静的なテキスト要素およびインタラクティブな要素内のテキストの色のコントラストを確認します
- このルールはAIを使用してコントラストの問題を検出しますが、複雑な背景については手動確認が必要な場合があります
ユーザーへの影響
色のコントラストレベルは、テキストが背景からどれだけ容易に区別できるかに影響します。テキストと背景色が明るさで似通っていると、テキストは読みづらくなるか、読めなくなります。
これは低照度条件、屋外で日光の下、または古いスクリーンを使用している人に影響しますが、特に視力が低いユーザーには問題です。あるユーザーには読みやすいラベルが、別のユーザーにはほとんど見えないぼやけたものとして見えることがあります。
色のコントラスト問題の確認
- 次のいずれかを行います：
- エミュレーターでアプリを開く、もしくは
- 実際のデバイスでアプリのスクリーンショットを撮る。そのスクリーンショットを自分宛に送り、コンピューターで開く。
- カラーピッカーを使用して：
- テキスト要素の最も正確な色を取得する。
- テキストの背後にある異なる背景色の最も正確な色を取得する。
- 各色をDequeカラー・パレット・コントラストチェッカーに入力してください。
- 以下のいずれかを見つけることができます：
- アクセシブル: カラーコントラスト比がそのテキストサイズに必要な最小値基準を満たしていますである。
- アクセシブルでない: カラーコントラスト比がそのテキストサイズに必要な最小値基準を満たしていませんでない。
問題の修正
カラーコントラストの問題は、テキストの色と背景色が明るさにおいて似すぎている場合に発生します。問題を解決するには、Dequeのカラーコントラスト・アナライザーを使用して、テキストサイズに基づいて必要な最小値を満たす色を見つけてください。必要なコントラスト比が達成されるまで、テキストの色または背景色を調整してください。
このルールは無視できますか？
カラーコントラストは、ユーザーに重大な影響があります。適切なカラーコントラストはWCAG AAの要件であり、優先的に修正する必要があります。稀にテキストが純粋に装飾的で情報を伝えない場合には、このルールを無視することが許容される場合があります。その詳細についてはルールを無視するをご覧ください。
よくある質問
このルールには既知の制限がありますか？
はい。このルールは、グラデーションや画像、多くの色を持つ半透明の背景にあるテキストの場合に不正確な結果を生じることがあります。見つかった内容が誤っていると思われる場合は、Dequeカラーコントラストチェッカーを使用してテキストと背景色の比率を確認してください。
リソース
Deque University コースページ
注: Deque Universityのリソースへのフルアクセスにはサブスクリプションが必要です。