WCAGコントラスト比とアクセシビリティ対応の基礎
Webアクセシビリティのガイドライン(WCAG 2.1)では文字と背景色のコントラスト比に基準値が設けられています。コントラストが不十分だと低視力者・色弱者がテキストを読めなくなるため、適切な配色設計が重要です。
WCAG 2.1のコントラスト比基準
WCAG 2.1のコントラスト比基準はLevel AA(一般要件)とLevel AAA(高い要件)に分かれます。通常テキスト(18px未満)はAA: 4.5:1以上・AAA: 7:1以上、大テキスト(18px以上、または14px以上のBold)はAA: 3:1以上・AAA: 4.5:1以上が求められます。
コントラスト比の計算方法
コントラスト比はWCAGの相対輝度(relative luminance)公式で計算します。明るい色と暗い色の相対輝度を(L1+0.05)/(L2+0.05)で割り算した値です。白(#FFFFFF)と黒(#000000)の比は21:1で最大値です。Color Contrast Checkerでは任意の2色を選ぶだけで自動計算してAA/AAAの合否を表示します。
よくある失敗パターン
明るいグレーの文字(#999999)を白背景に使うと2.85:1でAAを下回ります。薄いプレースホルダーテキスト、軽い色のリンクテキスト、カラーだけで区別したボタンなどは視覚障害者には判別できないことがあります。デザインレビュー時にColor Contrast Checkerで全テキスト要素を確認する習慣をつけましょう。
アクセシビリティ対応のビジネスメリット
アクセシビリティ対応は障害者差別解消法(日本)や欧米の法規制への準拠義務だけでなく、全ユーザーの読みやすさ向上・SEOへの良影響(コンテンツの可読性)・強い日差しや低品質な画面での視認性改善にもつながります。