WCAGカラーコントラスト アクセシビリティ監査ガイド
WCAG 2.1準拠のためのカラーコントラスト監査の包括的ガイド。テキストコントラスト（1.4.3）、非テキストコントラスト（1.4.11）、強化コントラスト（1.4.6）をカバー。
Category Audits
詳細な説明
カラーコントラスト アクセシビリティ監査
カラーコントラストは最もよく不合格となるWCAG基準の一つであり、同時に最も測定しやすいものの一つです。3つのWCAG成功基準がコントラストに直接対応しています：1.4.3（AAテキスト）、1.4.11（AA非テキスト）、1.4.6（AAAテキスト）。
WCAGコントラスト要件
| 基準 | レベル | 要件 |
|---|---|---|
| 1.4.3 コントラスト（最低限） | AA | 通常テキスト4.5:1、大きなテキスト3:1 |
| 1.4.11 非テキストコントラスト | AA | UIコンポーネントとグラフィックス3:1 |
| 1.4.6 コントラスト（強化） | AAA | 通常テキスト7:1、大きなテキスト4.5:1 |
大きなテキストは18pt（24px）通常ウェイトまたは14pt（18.66px）太字と定義されます。
テスト対象
- 背景に対する本文テキスト
- 背景に対する見出し
- 周囲のテキストに対するリンクテキスト（色のみで区別される場合）
- フォーム入力のプレースホルダーテキスト
- ボタン背景に対するボタンテキスト
- アイコンラベルと単独のアイコン
- 周囲の背景に対するフォームフィールドの枠線
- 隣接する色に対するフォーカスインジケーター
- エラーと成功メッセージのテキスト
- 無効状態のテキスト（コントラスト要件の免除対象）
テストプロセス
各テキスト要素について：
- 前景色（テキスト）を特定する
- 背景色を特定する（グラデーションや画像を含む場合がある）
- コントラスト比を計算する
- テキストサイズに必要な比率と比較する
- チェックリストで合格または不合格としてマークする
よくある落とし穴
- 白背景にグレーテキスト — ライトグレー（#999）は白に対して4.5:1を満たさない
- プレースホルダーテキスト — 要件を満たすには薄すぎることが多い
- 色付き背景に色付きテキスト — 両方の色が「異なって」見えても数値的には不合格
- 画像上のテキスト — テキストが重なるすべてのポイントでコントラストを満たす必要がある
- ダークモード — ライトテーマとダークテーマの両方が独立してコントラストを満たす必要がある
ユースケース
カラーコントラスト監査は、あらゆるアクセシビリティレビューの重要な部分です。自動ツールが最初にフラグを立てることが多く、手動でも簡単に検証できます。デザイナーはデザインフェーズでコントラストを確認し、開発者は実装時に検証すべきです。正確な測定にはアクセシビリティカラーチェッカーツールと併用してください。
試してみる — Accessibility Audit Checklist
Perceivable
0%(0/20 tested)
0 pass0 fail
Operable
0%(0/17 tested)
0 pass0 fail
Understandable
0%(0/10 tested)
0 pass0 fail
Robust
0%(0/3 tested)
0 pass0 fail
Level A:0/30 pass
Level AA:0/19 pass
Level AAA:0/1 pass
50 criteria shown · Click the status badge to cycle through Pass / Fail / N/A / Untested