Color Contrast WCAG 基準｜AA / AAA 合格レベルのコントラスト比計算と判定手順
アクセシビリティ WCAG Contrast デザイン CSS
結論：30秒で WCAG コントラスト基準を把握する
- AA 判定 (必須標準): 通常テキスト 4.5 : 1 以上 / 大テキスト 3 : 1 以上
- AAA 判定 (最高規格): 通常テキスト 7 : 1 以上 / 大テキスト 4.5 : 1 以上
- オンライン計算機: 下のチェッカーで HEX コードから即時判定
1. オンライン WCAG カラーコントラスト比チェッカー
文字色と背景色を指定し、リアルタイムにコントラスト比と WCAG 2.1 AA/AAA の合否を判定できます。
👁️ この場でアクセシビリティをチェックする
Aa 123 見本
コントラスト比 —
WCAG AA（通常テキスト 4.5:1） —
WCAG AA（大きなテキスト 3:1） —
WCAG AAA（通常テキスト 7:1） —
2. コントラスト比の基準値比較
| 区分 | 対象 | 必要コントラスト比 |
|---|---|---|
| WCAG AA (標準) | 通常テキスト | 4.5 : 1 以上 |
| WCAG AA (標準) | 大型テキスト (24px/19px太字以上) | 3.0 : 1 以上 |
| WCAG AAA (厳格) | 通常テキスト | 7.0 : 1 以上 |
| WCAG AAA (厳格) | 大型テキスト | 4.5 : 1 以上 |
3. 注意点（ハマりどころ）
- グラデーション背景や透過テキストでの評価
- 背景がグラデーションや半透明画像の場合、文字と重なる全領域の中で「最もコントラスト比が低くなる点」で基準を満たす必要があります。