色覚に配慮したパレットのガイド — デザイナー・開発者のための実践ルール

Okabe-Ito・Paul Tol のパレットを1型・2型・3型のシミュレーションとともに比較し、明度コントラスト・二重の符号化・WCAG の基準など、色に頼らないデザインのルールをまとめました。

男性の約12人に1人（ヨーロッパ系の場合）が赤緑色覚異常なら、グラフや地図、ダッシュボードを見る人の中には、いつも色弱の人がいることになります。うれしいことに、いくつかのルールを守るだけで、ほとんどの問題は解消します。

ルール1 — 色だけで情報を伝えない

Webアクセシビリティ基準 WCAG の達成基準 1.4.1「色の使用」は、色が情報を伝える唯一の視覚的手段になってはならないと定めています。入力エラーの欄には赤い枠と一緒にアイコンや文言を、グラフの線には色と一緒に形・点線・直接ラベルを使います。

ルール2 — 明度の差を確保する

色覚異常があっても、明るさの差はよく見えます。見分ける必要のある色は、明度（明るさ）がはっきり違うものを選びましょう。白黒で印刷しても区別できるかを見るのが、いちばん簡単なチェック方法です。

ルール3 — 赤-緑の組み合わせを避け、青-オレンジを使う

「良い＝緑、悪い＝赤」は最もよくある失敗です。1型・2型のどちらでも、この2色は似たような黄土色に見えます。2つのカテゴリーの対比が必要なら、青 ↔ オレンジが最も安全です。

検証済みのパレット

Okabe・Ito が提案した「カラーユニバーサルデザイン」のパレットは、赤緑色覚異常でも見分けられるように選ばれた8色です。下の表は、同じ色を2色覚のシミュレーション（Machado 2009、強度100%）で変換したものです。

Paul Tol の「bright」パレットも、色覚異常と白黒印刷の両方を考慮して作られた構成です。

反対に、よく使われる彩度の高い赤・緑・オレンジの組み合わせは、1型・2型で互いに重なってしまいます。

連続値には均一な明度変化を

• 温度や密度のような連続値には、明度が一方向に均一に変わるシーケンシャル型のカラーマップ（viridis・cividis など）を使います。cividis は色覚異常を考慮して設計されています。
• 虹色（jet）のカラーマップは明度が不規則に上下するため、色覚異常がなくても誤解を招き、赤緑の区間では情報が失われます。
• 両側に分かれる値（増加・減少）には、赤緑型よりも青-白-オレンジ（または赤）のダイバージング型カラーマップのほうが安全です。

文字とコントラスト

• 本文の文字と背景の明度コントラストは、WCAG 1.4.3 の基準で 4.5:1 以上が推奨されます。黒い背景に赤い文字を置くと、1型の人にはコントラストが大きく下がります。
• リンクは色を変えるだけでなく、下線を残しましょう。

チェックの手順

• 1. 白黒（グレースケール）で見ても区別できるか
• 2. シミュレーターで1型・2型100%にしても区別できるか
• 3. 色以外にも形・ラベル・模様の手がかりがあるか
• 4. 凡例に頼らず、グラフの上に直接ラベルを付けられるか

この4つをクリアすれば、色覚異常のある人だけでなく、暗い画面や白黒印刷、明るい屋外で見る人にとっても読みやすい資料になります。

シミュレーターで見る →