学会ポスターの文字の読みやすさ｜明度の差とコントラスト比（第2回）
赤と緑は、色相環では向かい合う、まったく違う色です。それでも、赤の地に緑の文字を置くと、とても読みにくくなります。文字の読みやすさを決めるのは、色みの違いではなく、文字と地の明るさの差です。第2回では、明るさの差を数値で確かめるコントラスト比と、ポスターでの使い方を解説します。
— コントラスト比と、白黒にして確かめる方法
原則 1読みやすさを決めるのは、色相ではなく明度の差
文字と地の色の組み合わせで、読みやすさは大きく変わります。効いているのは明度の差です。色相の差や彩度の差は、読みやすさにはあまり効きません。
色相が大きく違っても明るさが近い組み合わせでは、文字の輪郭がちらついて見えます。この見え方はリープマン効果と呼ばれています。赤と緑、青と赤のように、あざやかな色どうしを隣り合わせたときに起こりやすくなります。
原則 2明るさの差は、コントラスト比で確かめる
コントラスト比は、2つの色の明るさの比を表す数値です。ウェブのアクセシビリティの国際的な基準である WCAG 2.2 で定義されています。1:1 から 21:1 までの値をとり、白と黒の組み合わせが 21:1 です。ポスターでは次の目安を使います。
| 対象 | 目安 | 例 |
|---|---|---|
| 文字と地（本文・見出し・帯の上の文字・マーカーの上の文字） | 4.5:1 以上 | 白い地に濃い文字、濃い帯に白い文字 |
| 図の要素と地（棒・線・点・アイコン） | 3:1 以上 | 白い地に置いた強調色の棒 |
WCAG 2.2 では、大きな文字（18ポイント以上、または14ポイントの太字以上）の基準を 3:1 としています。ポスターは離れた距離から読むため、本シリーズでは文字の大きさにかかわらず 4.5:1 を目安にします。
色の組み合わせごとの値は、次のようになります。
| 組み合わせ | 比 | 判定 |
|---|---|---|
| 白の文字 × 濃い青の帯（#235FC8） | 5.9:1 | 文字に使える |
| 白の文字 × 濃いオレンジの帯（#B85600） | 4.8:1 | 文字に使える |
| 白の文字 × 明るい水色の帯（#5DBADA） | 2.2:1 | 文字には足りない。帯の上の文字を黒にする |
| 白の地 × 明るいオレンジの棒（#ED7D31） | 2.8:1 | 図の要素としても足りない。もう一段濃くする |
原則 3帯の上の文字は、白か黒の読める方にする
見出しの帯の上の文字は、帯の色に対して白と黒のうち、比の大きい方を選びます。濃い帯なら白、淡い帯なら黒です。淡い色の帯に白い文字を置くと、色はきれいでも読めません。
原則 4マーカーは明るく。1色目とは明るさの差を付ける
マーカー（2色目）の上では、黒い本文を読みます。マーカーの色は明度の高い、淡い色にします。濃いマーカーの上の黒い文字は、比が下がって読みにくくなります。
マーカーの色は、1色目（見出しの帯）とも、明るさの差をはっきり付けます。目安は、見出しの色とマーカーの色の明度の差（L*の差）で25以上です。ポサコの作例の配色も、この値で点検しています。明るさの差があれば、白黒で印刷しても、見出しの帯とマーカーを見分けられます。
原則 5白黒にして確かめる
明るさの差が足りているかは、紙面を白黒（グレースケール）にして見ると分かります。白黒にすると色相と彩度の違いが消え、明るさの差だけが残ります。白黒で読める文字は、カラーでも読めます。
白黒にする方法は、PDF の印刷設定で「グレースケール」を選ぶ、画面のスクリーンショットを画像ソフトで白黒に変える、などがあります。学会によっては要旨集やポスターが白黒で印刷されることもあるため、この確認は配色の点検としても役立ちます。
写真や模式図は、場所によって明るさが変わります。白い文字の一部が明るい所にかかると、その部分が読めなくなります。よくある例は次のとおりです。
- 蛍光顕微鏡の写真の上に、白い文字で「核」「細胞膜」と書き、白い矢印を添える。明るく光る部分にかかったラベルが消える
- 病棟や実験室の写真を見出しの背景に敷き、白い文字で題を重ねる。窓や白衣など、明るい部分の上の文字が読めない
- 模式図の淡い水色の領域の上に、白い文字で説明を書く。淡い水色と白の比は約2.2:1しかない（原則2の表）
今日からできるチェックポイント
- 本文・見出し・帯の上の文字は、地とのコントラスト比が 4.5:1 以上か
- 図の棒・線・点は、地との比が 3:1 以上か
- 帯の上の文字は、白と黒のうち読める方を選んでいるか
- マーカーは明るく淡い色か。見出しの色と明るさの差があるか
- 色相は違っても明るさが近い組み合わせ（赤と緑など）を、文字と地に使っていないか
- 紙面を白黒にして、文字と見出しの帯が読み分けられるか
帯とマーカーの組み合わせを選び、白黒で確かめる
- 配色のプリセット — 1色目と2色目の関係が設計済みのプリセットから選べます。
- PDF 出力 — 出力した PDF を白黒で印刷すると、明るさの差を確かめられます。
- ポスター配色シミュレーター — 紙面の配色を選んで、見え方を確かめられます（無料）。
次回は「目を引く色」です。どの色が先に目に入るかには、決まった傾向があります。その傾向を使って、図の強調色を選ぶ方法を解説します。
※本記事の図は、ポサコの作例用に自作したものです。コントラスト比は、記事中の色の値から W3C『Web Content Accessibility Guidelines (WCAG) 2.2』（2024）の式で計算した値です。画面や印刷の条件によって、見え方は変わることがあります。