色のコントラスト

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

確認する内容

テキストとその背景の色のコントラストが、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 Checkerを使用してテキストと背景色の比率を確認してください。

リソース

Deque University コースページ

• SC 1.4.3 コントラスト (最小)
• 色
• コントラスト

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

その他のリソース

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