見やすい配色とは？文字色・背景色・コントラストの基本
見やすい配色は、文字と背景のコントラスト、色だけに頼らない情報伝達、UIの状態識別が重要です。WCAGの4.5:1・3:1の基準と実践的な配色チェック方法を解説します。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。
コントラストは、文字と背景など2つの要素の見え方の差です。デザインでは印象だけでなく、文字の読みやすさやアクセシビリティにも関わります。
見やすい配色は、単に「きれい」「相性がいい」だけでは決まりません。文字と背景のコントラスト、文字サイズ、色だけに意味を頼っていないか、UIの状態が区別できるかなど、実際に情報を読めるかどうかが重要です。
Webや資料で文字を読みやすくするなら、WCAGの目安として通常文字は4.5:1以上、大きな文字は3:1以上のコントラストを確保します。さらに「赤＝エラー、緑＝成功」のように、色だけで意味を伝えないことも重要です。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1同じ色でも、面積比で印象は変わる
配色は色の選び方だけでなく、どの色をどれだけ使うかでも見え方が変わります。
見やすい配色とは？
背景色・文字色・ボタン・リンク・図表などが、それぞれの役割を区別でき、情報を無理なく読める配色です。彩度や色相だけではなく、明度差とコントラスト比を確認します。
文字色と背景色はコントラスト比で確認する
W3CのWCAG 2.1/2.2では、通常のテキストに4.5:1以上、大きなテキストに3:1以上のコントラスト比を求めています。
| 対象 | WCAG AAの目安 |
|---|---|
| 通常文字 | 4.5:1以上 |
| 大きな文字 | 3:1以上 |
| ロゴ・装飾 | SC 1.4.3の文字コントラスト要件の対象外 |
W3Cは閾値を丸めずに扱うよう説明しています。測定値が4.5:1未満なら、通常文字では基準を満たしません。
白背景なら真っ黒にすればいい？
白背景に黒文字は非常に高いコントラストを得られます。ただし、見やすさはコントラストだけでなく、文字サイズ、行間、フォント、余白、文章量にも影響されます。極端な高コントラストが必ずすべての人に最適という意味ではありません。
淡い背景色では文字を濃くする
淡いピンク・水色・ベージュなどを背景に使う場合、白文字はコントラスト不足になりやすいです。黒や濃いグレー、濃紺などを候補にし、実際のコントラスト比を測ります。
赤と緑だけで区別しない
WCAGの「Use of Color」では、色を情報・操作・状態の唯一の手掛かりとして使わないことを求めています。
| 避けたい例 | 改善例 |
|---|---|
| 必須項目を赤色だけで表示 | 「必須」の文字やアイコンも付ける |
| 成功＝緑、失敗＝赤だけ | ✓・！・メッセージを併用 |
| グラフを色だけで区別 | ラベル・線種・パターンを併用 |
| リンクを本文と色差だけで表現 | 下線など別の視覚手掛かりも使う |
「補色なら見やすい」とは限らない
補色は色相差が大きく目立ちやすい一方、同じ明るさ・高彩度で隣接するとちらついて見えたり、文字として読みにくくなることがあります。見やすさは色相差ではなく、最終的にコントラストと実表示で確認します。
ボタン・境界線・Focusも確認する
UIでは本文文字だけでなく、入力欄の境界、選択状態、フォーカスリング、アイコンなども重要です。背景とほぼ同じ色のボタンや細い境界線は、操作できる場所が分かりにくくなります。
見やすい配色を作る5ステップ
- 背景色を決める
- 本文文字を4.5:1以上を目安に選ぶ
- アクセント色は役割を限定する
- 状態を色以外でも表す
- 実機・スマホ・明るい環境でも確認する
黒・白文字は自動で決められる？
背景色の相対輝度を使えば、黒と白のどちらが高いコントラストになるか計算できます。ただし「黒か白のどちらかしか使わない」設計より、ブランド色を保ちながら十分なコントラストを満たす文字色を選ぶ方が柔軟です。
配色全体は階層で考える
本文、補助文字、見出し、CTA、エラー、リンクなどを全部同じ強さにすると、重要度が分かりません。見やすさはコントラストを満たすだけでなく、情報の優先順位を視覚的に整理することでも生まれます。
見やすい配色のチェックリスト
- 通常文字は4.5:1以上を目安にしている
- 大きな文字は3:1以上を確認している
- 淡色背景に白文字を無条件で使っていない
- リンク・必須・エラーを色だけで表していない
- ボタン・入力欄・Focusが背景から区別できる
- スマホ実機でも読める
- 色覚特性の違いがあっても意味が伝わる
よくある質問
見やすい文字色は黒ですか？
白背景では黒や濃いグレーが高いコントラストを得やすいですが、背景色によって最適な文字色は変わります。比率を測って決めるのが確実です。
グレー文字はどこまで薄くしていいですか？
固定のHEXでは決められません。背景色との組み合わせでコントラスト比を計算し、文字サイズに応じた基準を確認します。
色覚シミュレーションだけでアクセシビリティ確認は十分ですか？
十分ではありません。色だけで意味を伝えていないか、コントラスト、Focus、ラベル、実際の操作性も合わせて確認します。
コメントを残す