Webの色選びで失敗しない — コントラスト比とアクセシビリティの基本
見やすい配色の鍵はコントラスト比。WCAG基準の読み方、背景色と文字色の適切な組み合わせ、色覚多様性への配慮など、Web制作で知っておきたい色とアクセシビリティの基礎を解説します。
はじめに
「デザインはきれいなのに、文字が読みにくい」「スマホの屋外利用で色が見えない」 — こんな経験はありませんか？ Webサイトの見やすさを左右する大きな要素が色のコントラストです。この記事では、Web制作や資料作成で知っておきたいコントラスト比の基本と、誰にとっても見やすい配色のポイントを解説します。
コントラスト比とは
コントラスト比とは、2つの色の明るさの差を数値で表したものです。W3C（World Wide Web Consortium）が策定したWCAG（Web Content Accessibility Guidelines）で定義されており、「1:1」（差なし）から「21:1」（白と黒）までの範囲で表されます。
数値が大きいほど2色の差が明確で、文字やアイコンが見やすくなります。計算には「相対輝度」という値を使い、人間の目が緑に敏感で青に鈍感という特性が反映されています。
WCAG基準の読み方
WCAGでは、コントラスト比に2つの達成基準を設けています。
| レベル | 通常テキスト | 大きなテキスト | 意味 |
|---|---|---|---|
| AA（最低限） | 4.5:1 以上 | 3:1 以上 | 多くの人が読める最低ライン |
| AAA（推奨） | 7:1 以上 | 4.5:1 以上 | より幅広い人が快適に読める |
ここでいう「大きなテキスト」とは、18pt以上（太字なら14pt以上）を指します。見出しなど大きな文字は多少コントラストが低くても読みやすいため、基準が緩和されています。
AA と AAA、どちらを目指すべきか
実務ではAA基準（4.5:1）をクリアすることが一般的な目標です。日本の公共サイトのガイドラインでもAA準拠が求められています。AAAは理想的ですが、デザインの自由度が大きく制限されるため、本文テキストなど重要な部分で目指すのが現実的です。
配色でよくある失敗パターン
薄い色同士の組み合わせ
ライトグレーの背景にホワイトのテキスト、パステルカラー同士の組み合わせなど、明るい色同士ではコントラスト比が極端に低くなります。特にプレースホルダーテキスト（入力欄のヒント文字）は意図的に薄くしがちですが、読めなければ意味がありません。
色だけで情報を伝える
エラー表示を「赤色にするだけ」、ステータスを「緑 = OK、赤 = NG」で表すだけでは、色の判別が難しい方には情報が伝わりません。色に加えて、テキストラベルやアイコンなど別の手がかりを必ず併用しましょう。
ブランドカラーをそのままテキストに使う
ブランドカラーが鮮やかなオレンジや黄色の場合、白背景上で本文テキストに使うとコントラスト不足になりがちです。ブランドカラーはアクセントや装飾に使い、本文には十分なコントラストを持つ色を選びましょう。
色覚多様性への配慮
日本人男性の約5%、女性の約0.2%は色覚特性（色覚多様性）を持つとされています。20人に1人の割合は決して少なくありません。
特に注意が必要な色の組み合わせがあります。
| 避けたい組み合わせ | 理由 | 代替案 |
|---|---|---|
| 赤と緑 | 最も多い色覚タイプで判別困難 | 赤とブルー、またはアイコン併用 |
| 緑と茶色 | 明るさが近いと判別困難 | 明度差をつけるか形状で区別 |
| 赤と黒 | 暗い赤は黒と区別しにくい | 明るめの赤を使うかラベルを追加 |
ユニバーサルデザインのコツ
色覚多様性に対応するためのポイントをまとめます。
- 色＋形で区別する — グラフの系列は色だけでなく線のスタイル（実線・破線）やマーカー形状でも区別する
- 明度差を確保する — 同じ色相でも明暗をはっきりつければ、色覚タイプに関わらず区別できる
- テキストラベルを添える — 色分けした要素には必ず文字での説明を添える
- シミュレーションで確認する — ブラウザの開発者ツールや専用ツールで色覚シミュレーションを行い、問題がないか確認する
実践的な配色チェックの手順
Webサイトやスライドの配色を決めるとき、以下の手順でアクセシビリティを確保できます。
- ベースカラーを決める — 背景色と本文テキスト色を決め、コントラスト比が4.5:1以上か確認する
- アクセントカラーを検証する — リンク色やボタン色が背景に対して十分なコントラストを持つか確認する
- グレースケールで確認する — 画面をグレースケール表示にして、色以外で情報が伝わるか確認する
- 小さい文字を重点チェック — 注釈やキャプションなど小さなテキストは特にコントラスト不足になりやすい
Web以外でも役立つ知識
コントラスト比の考え方は、Webサイトだけでなく幅広い場面で活用できます。
- プレゼン資料 — プロジェクターの性能が低い会議室では、コントラストが大幅に低下します
- 印刷物 — カラー印刷でもモノクロコピーされることを想定しておくと安心です
- サイネージ — 屋外のデジタルサイネージは直射日光で視認性が下がるため、高いコントラストが必要です
- アプリのダークモード — 暗い背景に白文字の場合も、コントラスト比の確認が必要です。純白（#fff）は眩しすぎることがあるため、やや暗めのグレーを使う工夫もあります
まとめ
色のコントラストは、見た目の美しさだけでなく情報が正しく伝わるかどうかを左右する重要な要素です。WCAG AA基準（4.5:1）を意識するだけで、多くの人にとって読みやすいデザインが実現できます。
配色を決める際は、コントラスト比を数値で確認し、色だけに頼らない情報設計を心がけましょう。小さな配慮の積み重ねが、誰にとっても使いやすいWebサイトにつながります。