コントラスト比とは

コントラスト比は、テキストと背景の明るさの差を数値化したものです。1:1（差なし）から21:1（黒地に白）の範囲で表され、値が大きいほど読みやすい配色です。

WCAGの基準

Web Content Accessibility Guidelines（WCAG）2.1では、視覚的なコントラストに関して以下の基準を定めています。

  • レベルAA（最低基準）：通常テキストは4.5:1以上、大きなテキスト（18pt以上または14pt以上の太字）は3:1以上
  • レベルAAA（強化基準）：通常テキストは7:1以上、大きなテキストは4.5:1以上

日本のウェブアクセシビリティ指針（JIS X 8341-3）もWCAGをベースにしており、公共機関のサイトではAA準拠が求められます。

よくある低コントラストの失敗例

  • グレーの背景に薄いグレーのテキスト
  • 写真の上に白いテキストを重ねる
  • プレースホルダーテキストが薄すぎる
  • ボタンのラベルと背景色が似ている

アクセシビリティ改善のメリット

コントラスト比の改善は、視覚障害を持つユーザーだけでなく、屋外の明るい環境でスマートフォンを使う全ユーザーの読みやすさに直結します。また、Google はCore Web Vitalsに読みやすさを含むUXシグナルを評価基準に採用しており、SEOの観点からも重要です。