Webアクセシビリティのコントラスト比基準｜WCAG 2.1解説
アクセシビリティ デザイン WCAG UI
結論
最低限「AA基準（4.5:1）」を目指す。 テキストと背景の色の差を数値で管理することで、弱視の方や高齢の方、日光の下で画面を見るユーザーの利便性が向上します。
コントラスト比の基準値
WCAG（Web Content Accessibility Guidelines）では、テキストの大きさに応じて以下の基準を設けています。
| 適合レベル | 通常テキスト / 大きなテキスト |
|---|---|
| AA (最低基準) | 4.5:1以上 / 3:1以上 |
| AAA (より厳格) | 7:1以上 / 4.5:1以上 |
※大きなテキストとは：18pt（約24px）以上、または14pt（約18.6px）以上の太字。
👁️ この場でアクセシビリティをチェックする
Aa 123 見本
コントラスト比 —
WCAG AA（通常テキスト 4.5:1） —
WCAG AA（大きなテキスト 3:1） —
WCAG AAA（通常テキスト 7:1） —
なぜアクセシビリティが必要なのか
Webは「誰でも情報にアクセスできること」が本質です。
- 一時的な状況 — 外の明るい場所でスマホを見ている。
- 身体的な特徴 — 色覚特性がある、視力が低下している。
- 環境的な要因 — モニタの品質が低く、色が正しく再現されない。
これらの状況にあるユーザーを排除しないために、コントラスト比のチェックは必須のプロセスです。
チェックのタイミング
デザインツール（Figma, Adobe XDなど）のプラグインで確認するほか、コーディング中にも Chrome DevTools の「アクセシビリティ」タブでリアルタイムに判定が可能です。常に数値で語れるデザインを目指しましょう。