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以上が求められます。日本では障害者差別解消法の改正（2024年）により公共機関のアクセシビリティ対応が義務化されており、WCAGのAA準拠が実質的な基準となっています。民間企業にも同様の対応が推奨されており、EC・SaaS・行政サービスのUI設計ではコントラスト比の確認が必須です。WCAG 3.0（開発中）ではAPCA（Advanced Perceptual Contrast Algorithm）という新しい計算式が採用される予定で、より精密な視認性評価が可能になります。
コントラスト比の計算方法
コントラスト比はWCAGの相対輝度（relative luminance）公式で計算します。各色のR・G・B値をガンマ補正した後、Y=0.2126R + 0.7152G + 0.0722Bで輝度を求め、明るい色と暗い色の輝度を(L1+0.05)/(L2+0.05)で割り算した値がコントラスト比です。白（#FFFFFF）と黒（#000000）の比は21:1で最大値です。Color Contrast Checkerでは任意の2色を選ぶだけで自動計算してAA/AAAの合否を表示します。半透明（rgba）を使用する場合は背景色との合成後の実際の色で計算する必要があります。テキスト色を少し調整するだけでコントラスト比が大きく変わることがあるため、カラーピッカーで微調整しながらリアルタイムに合否を確認できるツールが設計作業に欠かせません。
よくある失敗パターン
明るいグレーの文字（#999999）を白背景に使うと2.85:1でAAを下回ります。薄いプレースホルダーテキスト（#CCCCCC）は1.6:1しかなく、視認性が著しく低い代表例です。軽い色のリンクテキスト・カラーだけで区別したボタン・グレーのdisabled状態テキストなども見落としやすいポイントです。また、画像の上にテキストをオーバーレイする場合、画像の明るさが一定でないためコントラスト不足になりやすいです。この場合はテキスト背景に半透明の暗い帯を置くか、テキストシャドウを加えて視認性を確保します。Color Contrast Checkerでデザイン内のすべてのテキスト色と背景色の組み合わせを網羅的にチェックする習慣が重要です。
アクセシビリティ対応のビジネスメリット
アクセシビリティ対応は障害者差別解消法（日本）や欧米の法規制への準拠義務だけでなく、全ユーザーの読みやすさ向上・SEOへの良影響・強い日差しや低品質な画面での視認性改善にもつながります。特にスマートフォンを屋外で使うシーンでは高コントラストが視認性に直結します。またGoogleはコアウェブバイタルと合わせてアクセシビリティをランキング要因として考慮しており、適切なHTMLセマンティクスとコントラスト比はSEOにもプラスです。WebAIM（米国の組織）の調査では上位100万サイトの96%以上にWCAG違反が存在すると報告されており、対応済みのサイトは差別化にもなります。Color Contrast Checkerでデザインの早い段階から確認することがコスト最小化につながります。