色のコントラスト
すべてのユーザーがテキストを読みやすくする
このルールで人工知能をどのように活用しているか学びましょう！
チェック内容
テキストとその背景の色のコントラストが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 Color Palette Contrast Checkerに。
- 次のうちのいずれかの結果が出ます：
- アクセシブル: 色のコントラスト比は 満たしています テキストサイズに対する必要最小限を。
- アクセシブルでない: 色のコントラスト比は 満たしていません テキストサイズに対する必要最小限を。
問題の修正
テキストの色と背景色が明るさにおいて非常に似ている場合に色のコントラスト問題が発生します。問題を修正するには、 Deque's Color Contrast Analyzer を使用して、テキストサイズに基づいて必要な最小限を満たす色を探します。必要なコントラスト比が達成されるまで、テキストの色または背景色を調整します。
このルールを無視してもいいですか？
色のコントラストはユーザーに 重大な影響 を及ぼします。適切な色のコントラストはWCAG AAの要件であるため、これは優先的に修正すべきです。まれにこのルールを無視することが許される場合があります。例えば、テキストが純粋に装飾的で情報を伝えない場合です。詳細については ルールを無視する。
よくある質問
このルールに既知の制限はありますか？
はい。このルールは、グラデーションや画像、半透明の背景など、多くの色がある背景上にテキストがある場合に不正確な結果を出すことがあります。調査結果が不正確であると思われる場合は、Deque Color Contrast Checkerを使用して、テキストと背景の色の比率を確認してください。
リソース
Deque University コースページ
注: Deque University のリソースへの完全なアクセスには、サブスクリプションが必要です。