色のコントラスト

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

チェック内容

テキストとその背景の色のコントラストが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's Color Contrast Analyzer を使用して、テキストサイズに基づいて必要な最小限を満たす色を探します。必要なコントラスト比が達成されるまで、テキストの色または背景色を調整します。

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

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

よくある質問

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

はい。

• このルールは、グラデーション、画像、半透明背景など、多くの色がある背景上のテキストに対しては不正確な結果を出す場合があります。もし発見内容が間違っていると思われる場合は、 Deque Color Contrast Analyzer を使用して、テキストと背景色の比率を確認してください。
• Color ContrastルールはAppleのVisionフレームワーク（光学文字認識、OCR）を使用して、要素の境界内のテキストを読み取ります。OCRは時折、小さなアイコンのようなグリフ（例：矢印のシェブロン（<）、箇条書き、装飾記号）をテキストと誤認識することがあります。その場合、読めるテキストがない要素上でColor Contrastルールが実行され、アイコンだけのボタンに対して結果を出すことがあります。OCRの出力はスキャンごとに決定的ではないため、同じ要素が一度のスキャンではColor Contrastの結果に現れ、次のスキャンでは「適用不可」と報告されることがあります。これはOCRの既知の特徴であり、ルールのバグではありません。この問題を解決するために、影響を受けた要素に対してColor Contrastの結果を抑制するために ignore APIを使用できます。詳細については、 ルールを無視する。

リソース

Deque University コースページ

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

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

その他のリソース

• WCAG テクニック G18: テキスト（およびテキストの画像）とその背景に少なくとも 4.5:1 のコントラスト比が存在することを確認する
• W3C 成功基準 1.4.3: コントラスト（最小）を理解する