開発ツール
カラーコントラストチェッカーの使い方・WCAG AA/AAAの基準
Webサイトのテキストが読みにくいと感じたことはありませんか？文字色と背景色のコントラスト比が低いと、多くのユーザーにとって読みづらくなります。この記事では、WCAG基準に基づくコントラスト比の確認方法を解説します。
コントラスト比とは
コントラスト比は、2つの色の明るさの差を数値で表したものです。最小値は1:1（同色）、最大値は21:1（黒と白）です。W3CのWCAG（Web Content Accessibility Guidelines）では、テキストのコントラスト比に最低基準を設けています。
WCAG AA / AAA基準
| テキスト種別 | AA（最低基準） | AAA（推奨基準） |
|---|---|---|
| 通常テキスト（18px未満） | 4.5:1以上 | 7:1以上 |
| 大きなテキスト（18px以上 or 14px太字） | 3:1以上 | 4.5:1以上 |
| UIコンポーネント・アイコン | 3:1以上 | — |
よくあるコントラスト不足の例
薄いグレー（#999）× 白背景 — コントラスト比 2.85:1 × AA不合格
ダークグレー（#666）× 白背景 — コントラスト比 5.74:1 ○ AA合格
白文字 × 青背景（#3b82f6） — コントラスト比 4.68:1 ○ AA合格
アクセシビリティが重要な理由
- 色覚多様性：日本人男性の約5%が色覚異常を持つ
- 高齢者：加齢により色の識別能力が低下する
- 環境要因：屋外の直射日光下ではコントラストが低いと読めない
- 法的要件：公共機関のサイトはJIS X 8341-3に準拠が求められる
よくある質問
ロゴや装飾テキストもコントラスト基準を満たす必要がありますか？
WCAGでは、ロゴや装飾的なテキストはコントラスト要件の対象外です。ただし、読んでもらう必要のある情報はすべて基準を満たすべきです。
AAとAAAのどちらを目指すべきですか？
最低限AA基準を満たすことが推奨されます。可能であればAAA基準を目指しましょう。特に本文テキストはAAAに近い7:1以上が理想です。