コントラスト比とWCAGとは？Webアクセシビリティ対応のコントラストチェック方法

「おしゃれな配色だけど文字が読みにくい」——デザイナーとエンジニアが陥りがちな落とし穴です。本記事では、Webアクセシビリティの国際標準WCAG 2.1のコントラスト比基準と、無料ツールを使った確認方法を解説します。

コントラスト比とは？

コントラスト比（Contrast Ratio）とは、文字色と背景色の明るさの差を数値化したものです。 白背景に黒文字は最大値の21:1、白背景に白文字は最小値の1:1となります。

値が高いほど文字が見やすく、弱視・高齢者・色覚異常のある方がテキストを認識しやすくなります。 また、明るい屋外でスマートフォンを見る場合にも高コントラストが重要になります。

WCAG 2.1のコントラスト基準

W3Cが定めるWCAG（Web Content Accessibility Guidelines）では、コントラスト比に関して次の基準を設けています。

「大きなテキスト」とは、通常ウェイトで18px以上、または太字（bold）で14px以上のテキストを指します。 見出しはこちらの基準（3:1以上）が適用されることが多いです。

なぜ今アクセシビリティ対応が重要なのか

• 法的義務化の流れ：日本では2024年に改正された障害者差別解消法の合理的配慮義務化により、Webアクセシビリティへの対応が民間事業者にも求められています。JIS X 8341-3（高齢者・障害者等配慮設計指針）もWCAGに対応しています。
• ユーザー層の広がり：日本の高齢化率は約29%。視力が低下した高齢ユーザーにも読みやすいサイトは、全ユーザーに使いやすいサイトでもあります。
• SEO効果：Googleはアクセシビリティの高いサイトを評価する傾向があり、Core Web Vitalsにも間接的に影響します。

コントラスト比の計算方法

WCAG 2.1で定められた計算式は以下の通りです。

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

L1 = 明るい方の相対輝度（Relative Luminance）
L2 = 暗い方の相対輝度

相対輝度の計算：
RGB値を 0〜1 に正規化してガンマ補正を適用
L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

計算が複雑なため、コントラストチェッカーツールを使えば入力するだけで即座に判定できます。

よくある失敗パターンと改善例

• グレーテキスト on 白背景：#999999 on #FFFFFF → コントラスト比2.85:1（AA不合格）。 #767676以上の暗いグレーにするとAA合格（4.54:1）になります。
• ブランドカラーのボタンテキスト：青背景(#4a90d9)に白テキスト → 3.09:1（AA不合格）。 より濃い青(#1d4ed8)に変えると4.76:1でAA合格になります。
• 薄いグラデーション背景上のテキスト：グラデーションは場所によってコントラストが変わるため、最も淡い部分でもAA合格かどうか確認が必要です。

コントラストチェッカーの使い方

ToolBoxJPのコントラストチェッカーで以下の手順で確認できます：

• ① 文字色（Foreground）と背景色（Background）を入力
• ② コントラスト比とWCAG AA/AAA判定が即表示
• ③ プレビューで実際の見え方を確認
• ④ テキストサイズ（通常/大きな）を切り替えて基準確認