コントラスト比は、文字やボタンなどの前景色と背景色がどれだけ見分けやすいかを表す指標です。見た目の印象だけでなく、視力の低下、色の見え方の違い、屋外や反射のある画面での閲覧など、さまざまな状況で情報を読み取れるかに関わります。
この記事では、コントラスト比の基本、WCAGで使われる目安、デザインや公開前チェックで確認したいポイントを整理します。ウェブアクセシビリティの全体像を理解したうえで読むと、配色をどのように改善すべきかが判断しやすくなります。
コントラスト比とは何か
コントラスト比とは、背景色と、テキストやアイコンなどの前景色との明るさの差を数値で表したものです。数値が高いほど、前景と背景の差が大きくなり、文字や形を見分けやすくなります。
コントラスト比は、一般に1:1から21:1の範囲で示されます。1:1は前景と背景の差がほとんどない状態です。たとえば白い背景に白い文字を置くと、見た目にはほぼ読めません。一方、21:1は非常に高いコントラストを表し、黒い背景に白い文字を置いた場合のように、差がはっきりします。
ここで大切なのは、「色が違うこと」と「読みやすいこと」は同じではないという点です。赤と緑、青と紫のように色相が違っていても、明るさの差が小さいと読みにくくなる場合があります。配色を決めるときは、見た目の好みだけでなく、実際のコントラスト比を確認することが必要です。
WCAGで使われるコントラスト比の目安
Web Content Accessibility Guidelines（WCAG）では、テキストの読みやすさを確保するための目安として、コントラスト比が示されています。記事内で扱う主な基準を整理すると、次のようになります。
| 対象 | 目安となるコントラスト比 | 考え方 |
|---|---|---|
| 通常のテキスト | 4.5:1以上 | 本文、説明文、メニュー、リンクなど、日常的に読む文字で意識したい基準です。 |
| 大きなテキスト | 3:1以上 | 18ポイント以上、または太字で14ポイント以上の大きな文字では、通常の本文より低い比率が目安になります。 |
| 装飾目的のテキストや必須ではない要素 | 対象外の場合がある | 読み取れなくても意味が失われない装飾は対象外とされる場合があります。ただし、見やすさを損なわない配色にすることが望ましいです。 |
この基準は、デザイナーだけでなく、サイト運用者や記事編集者にとっても実務上の判断材料になります。たとえば、ブランドカラーを背景にしたボタン、薄いグレーの補足テキスト、画像の上に重ねた白文字などは、見た目では問題がなさそうでも、数値で確認すると不足していることがあります。WCAGを継続的に運用へ組み込む考え方は、公開後のWebアクセシビリティ運用でも重要です。
コントラスト比が重要な理由
コントラスト比は、単に「デザインを見やすくする」ためだけのものではありません。情報を必要としている人が、状況に左右されず内容を読み取れるようにするための基本です。
- 視覚障害への配慮：色覚異常、視力低下、白内障などがある場合、背景と文字の差が小さいと情報を読み取りにくくなります。
- 高齢者への配慮：年齢とともに細い文字や淡い色の差を見分けにくくなることがあります。十分なコントラストは、年齢を問わず読みやすさを支えます。
- 閲覧環境への配慮：明るい場所、反射のある画面、小さなスマートフォン画面では、低コントラストの文字が特に読みにくくなります。
- 一時的な見えにくさへの配慮：疲れ目、画面の明るさ設定、移動中の閲覧など、一時的に見えづらい状況でも情報にアクセスしやすくなります。
コントラストは、色の見え方に関する配慮とも関係します。配色全体を見直す場合は、色覚多様性に配慮した配色とコントラストの観点も合わせて確認すると、より実用的です。
コントラスト比を確認する手順
コントラスト比は、制作の最後に一度だけ確認するよりも、デザイン作成、実装、公開前確認、運用更新の各段階で見直すほうが効果的です。次の流れで確認すると、抜け漏れを減らしやすくなります。
- 対象を洗い出す：本文、見出し、リンク、ボタン、メニュー、画像上の文字、注意文など、読ませたい要素を一覧にします。
- 前景色と背景色を確認する：文字色だけでなく、実際に重なっている背景色を確認します。画像やグラデーションの上に文字を置く場合は、特に注意が必要です。
- チェッカーで数値を見る：「WebAIM’s Contrast Checker」や「Accessible Colors」などのツールを使い、4.5:1または3:1の目安に届いているかを確認します。
- 自動チェックでページ全体を見る：Google ChromeのLighthouseやaxeなどを使うと、ページ内の問題をまとめて確認できます。axeの使い方を詳しく確認したい場合は、axeアクセシビリティチェックツールの解説も参考になります。
- 実機とユーザーテストで確かめる：自動チェックだけでは、実際の見え方や操作中の迷いやすさまでは判断しきれません。必要に応じて、実機確認やユーザーテストを行います。
チェックツールの選び方や使い分けを広く整理したい場合は、Webアクセシビリティチェックツールのガイドも役立ちます。
デザインで見落としやすいポイント
コントラスト不足は、本文よりも細かなUI要素で起こりがちです。次のような箇所は、公開前に重点的に確認しましょう。
- 薄いグレーの補足テキスト：注釈や説明文を控えめに見せようとして、背景との差が小さくなることがあります。
- ブランドカラーのボタン：背景色として使うブランドカラーと、ボタン上の文字色の組み合わせを数値で確認します。
- 画像の上に重ねた文字：画像の明るい部分と暗い部分で読みやすさが変わるため、背景のばらつきも考慮します。
- リンクや重要な見出し：色だけで強調している場合、コントラストが弱いとリンクや見出しに気づきにくくなります。
- スマートフォン表示：画面が小さくなると文字も小さく見えるため、デスクトップで読める配色でも再確認が必要です。
コントラスト比を考慮したデザイン例
サイトの種類によって、重点的に確認すべき場所は少しずつ異なります。
| サイトの種類 | 確認したい箇所 | 改善の考え方 |
|---|---|---|
| ニュースサイト | 本文、見出し、リンク、カテゴリ表示 | 長文を読み続けても疲れにくいように、本文の文字色と背景色の差を十分に確保します。 |
| Eコマースサイト | 商品名、価格、購入ボタン、在庫や注意書き | 購入判断に関わる情報が埋もれないように、ボタンや価格表示の視認性を確認します。 |
| オンライン教育プラットフォーム | 教材本文、問題文、解答ボタン、進捗表示 | 学習中に重要な情報を見落とさないように、テキストとUI要素の両方を確認します。 |
まとめ
コントラスト比は、アクセシブルなWebデザインの土台になる指標です。背景色と文字色の差を数値で確認することで、視覚に障害があるユーザー、高齢者、明るい場所や小さな画面で閲覧しているユーザーにとっても、情報を読み取りやすくできます。
まずは本文、見出し、リンク、ボタンなど、読ませたい要素から確認しましょう。オンラインのコントラスト比チェッカー、自動チェックツール、実機確認、必要に応じたユーザーテストを組み合わせることで、見た目の印象だけでは気づきにくい問題を減らせます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上にご興味がある方は、詳細をご覧ください。