データビジュアライゼーションにおける色：チャート、グラフ、および地図

データビジュアライゼーションにおける色は装飾ではありません。それはエンコーディングです — 位置、長さ、サイズと同じように情報を運ぶチャネル。色が良く使用される場合、視聴者はパターンを瞬時に理解します。不注意に使用される場合、チャートは誤解を招き、混乱させるか、視聴者全体のセグメントを除外します。

このガイドは、3つの正準色スケール類型、色盲がデータビジュアライゼーション決定をどのように再形成するか、および他の優れた作業を損なう最も一般的な誤りをカバーしています。

色が強力である理由 — そして危険 — エンコーディング

知覚研究で研究された事前注意ビジュアル属性の中で、色は生の速度で際立っています。視聴者は、意識的な検索なしに、数千の散布図内の明らかに色付きのポイントをミリ秒以内に検出します。この力は実在していますが、制約が伴います。

色は情報を効果的にエンコードする場合のみです。

1. 視聴者がエンコードされた値を区別できます
2. エンコーディングは直感的です（任意ではありません）
3. 色の選択は異なる表示条件（印刷、プロジェクタ、色盲視）を生き残ります

これらのいずれかに違反し、色は役立つシグナルの代わりにノイズになります。以下のスケールタイプは、これらの各制約への構造化された応答です。

順序色スケール：軽いから暗い

順序スケールは、1つの方向に移動するデータを表します — 通常、低値から高値へ、または疎から密へ。定義される特性は、明度が変わり、時々飽和度が変わる単一の色です。

順序スケールの動作方法

順序スケールは、最も軽いティントを最低データ値にアンカーし、最も暗いシェードを最高値にアンカーします。すべての中間値は、その連続体に沿って比例的に配置された色を受け取ります。

地理的人口密度のための実用的な単一色順序スケール：

このエンコーディングは直感的です。より多くのブルーはより多くを意味します。すべての色覚を持つ視聴者は、スケールを読むことができます。なぜなら、それは色相の区別ではなく、光度で動作するためです。

実用的なガイダンス

• 順序のコンテキストでレインボー（スペクトル）グラデーション避けてください。スペクトルグラデーション — 赤からオレンジから黄色から緑からブルー — 色相境界で偽のエッジを作成します。ミッドポイントの周りで、黄色から緑への突然のシフトは、データに存在しないカテゴリブレークを示唆しています。知覚的に均一な順序パレット（OKLCHまたはCIELABから導出されたものなど）は、この成果物を避けます。
• 知覚的に均一な進行を使用してください。 ユニフォーム意味は、データの等しいステップが色で等しく見える階段を生じさせます。非一様な進行は、特定の値範囲を過度に強調します。
• 飽和されたエンドポイント、脱飽和の原点。 わずかに飽和された近白の原点と完全に飽和した暗いエンドポイントは、最も広い知覚的範囲を与えます。

パレットジェネレータ から基本色相で始まる単一色順序スケールを構築し、それを シェードジェネレータ と組み合わせることで、滑らかなステップを確保できます。

散逸色スケール：2つの色相エンドポイント

散逸スケールは、有意な中点を持つデータを表します。その中点の上および下の値が概念的に異なる場合 — 単に量的に異なるだけではなく — 散逸スケールにより、両方の半分が同時に見えるようにします。

散逸スケールを使用する場合

古典的なユースケースには以下が含まれます：

• 選挙結果：共和党の優位性を赤、民主党の優位性を青、50/50の分割を中立的な紫または白に
• 金融パフォーマンス：損失は赤、収益は緑、損益分岐点を中立にしています
• 温度異常：平均以下は青、平均以上は赤、歴史的規範を白に
• 感情スコア：否定的な感情から肯定的な感情へ、中央に中立

散逸スケールの設計

散逸スケールには3つのアンカーが必要です。2つの色相エンドポイントと中立的な中心。

調査満足度スケールの例（非常に不満足→中立→非常に満足）：

中立的な中心はほぼ無彩色であるべきです — 軽いグレイまたはオフホワイト — 中点のいずれかの側の値が明確なカテゴリとして読むように。

落とし穴

• 各側の不均等な知覚的範囲。 赤と緑は同等の飽和度で同等の視覚的強度を持ちません。ツールを使用して、2つの極エンドポイントが中立から知覚的に等距離であることを確認し、単に数的には等距離ではありません。
• 色盲視聴者の崩壊する色相対を選択する。 赤緑散逸スケールが最も一般的な容疑者です。これは以下の色盲セクションで詳細にカバーされています。

カテゴリ（定性的）色スケール：異なる色相

カテゴリスケールは、名義データをエンコードします — 固有の順序を持たないカテゴリ。国Aは国Bより多くも少なくもありません。それは単に異なります。これは、互いから知覚的に距離を最大化するだけでなく、暗黙の順序や階層を持たない色を必要とします。

良いカテゴリパレットの原則

最大知覚距離。 色は、色相を避けてクラスター化されずに、色相輪の周りに展開されるべきです。3つのブルー、2つのグリーン、1つの紫を使用するパレットは機能しません。視聴者は同様の色相を混同するためです。

ほぼ同等の明るさ。 いくつかのカテゴリが明るく、他の人が暗い場合、暗いものはより重要でなくても視覚的に支配します。すべてのカテゴリ色全体で同等の光度を目指してください。

7–10カテゴリ以下、理想的にはそれ以下。 人間の短期記憶は約7つのチャンク保有します。7つ以上の異なる色からカテゴリの関連付けを追跡するよう視聴者に尋ねるのは、チャートを損なう認知的負担を課します。15か国がある場合は、色が正しいエンコーディングかどうかを再考してください。

バランスの取れた6色カテゴリパレット：

ブルー、レッド、グリーン、アンバー、パープル、オレンジは、色相輪の周りに広がっており、同様の明度値を持っています。

カテゴリパレットのテスト

完成する前に、パレットが以下の場合に機能することを確認します。

• 黒と白で印刷されました（光度の類似が区別を排除しないかどうかを確認）
• 凡例のレジェンドで小さいサイズで表示
• 色盲を持つ誰かによって表示される（下記参照）

色盲シミュレータ は3番目のテストを処理します。

データビジュアライゼーションにおける色盲

遺伝的な色覚欠損の約8%の男性と0.5%の女性。典型的な50人のオフィス視聴者では、3–4人の視聴者は色を異なる経験を持つ可能性があります。公開のビジュアライゼーションでは、数は無視できないものではありません。

データビジュアライゼーションに最も関連する種類

デュテランモピア/デュテランオマリア：グリーンへの感度が低下しました。最も一般的な形式（男性の約5%）。赤と緑は色相が似ているように見えます。区別は黄褐色灰色の範囲に崩壊します。

プロタノピア/プロタノマリア：赤への感度が低下しました。より少ない一般的（男性の約1%）。赤は暗く、飽和度が低く見える。赤と緑の混同が発生します。

トリタノピア：レア（約0.001%）。青黄色の混同。非常に少数に影響しますが、ブルーがプライマリカテゴリカラーの場合に関連になります。

赤と緑の災害

最も一般的なデータビジュアライゼーション色盲失敗は、赤緑散逸スケールです — 金融データ、地図、ステータスインジケータで絶えず使用されています。デュテランモピアおよびプロタノピアの視聴者の場合、2つの色相エンドポイントは、ほぼ同一の褐色またはオリーブ色に崩壊します。チャートは大約6%の男性の視聴者にほぼ情報を伝えません。

代替案：

赤と緑を以下に置き換えます：

• ブルーオレンジ (#1D4ED8 から #EA580C)：すべての一般的な色視力型全体で広く区別可能
• パープルグリーン (#7C3AED から #059669)：デュテランモピアとプロタノピア全体でも堅牢
• 赤ブルー強い光度差：ほとんどの形式で、光度コントラストが強力である場合、動作します

トラフィックライト（赤黄色グリーン）のステータスインジケータ は同じ問題を持っています。形状とラベルを主要なエンコーディングとして置き換え、色を補助的な冗長キューとして使用します。

色盲堅牢性のための設計戦略

1. 光度コントラストを使用してください、色相コントラストだけではありません。 光度で大きく異なる色は、光度知覚が大きく保存されているため、ほとんどの色盲形式では区別可能なままです。

2. 冗長なエンコーディングを追加してください。 色だけに依存しないでください。使用：

3. 線グラフの異なる線スタイル（実線、破線、点線）
4. 散布図の異なるポイント形状
5. データシリーズのダイレクトラベル

6. 棒グラフのハッチングまたはパターン

7. シミュレータでテストしてください。 色盲シミュレータ を使用して、公開する前にデュテランモピア、プロタノピア、およびトリタノピアフィルター経由でパレットを表示します。

8. 確立されたアクセス可能なパレットを使用してください。 Wong（2011）は、色盲堅牢性のために特に設計された8色パレットを公開しました。黒、オレンジ、スカイブルー、青緑、黄色、ブルー、バーミリオン、赤紫色です。

ベストプラクティスと一般的な誤り

ベストプラクティス

スケールタイプをデータタイプに一致させてください。 順序データは順序です。散逸データは意味のある中心のためです。カテゴリ名義データのためのカテゴリ。これらを混ぜる（カテゴリデータに順序スケールを使用）は、誤解を招く暗黙の順序を作成します。

最も重要なデータに最も暗い色を入れてください。 より暗い値はより多くの注意を引き付けます。最高値が最も実行可能である場合、それらを順序スケールの暗いエンドにアンカーすると、ビジュアル注意がデータ優先度と揃えられます。

背景を考慮してください。 色は白い、灰色、または暗い背景で異なります。白い背景で設計されたスケールは、灰色のダッシュボードで平坦またはくすんで見える場合があります。実際の背景でテストしてください。

関連チャート全体で一貫したスケールを使用してください。 ダッシュボード内の3つのチャートがすべて売上数字を表示する場合、同じメトリックに同じ色スケールを使用します。不一貫性は視聴者に毎回の凡例を再読します。

ダッシュボードに凡例をデータに近づけてください。 凡例が遠いほど、視聴者が色をデコードするために行う必要がある認知的作業が増えます。ダイレクトラベルは凡例ルックアップを完全に排除します。

一般的な誤り

連続データのレインボースケール。 上記で述べたように、スペクトルグラデーションは偽の知覚的エッジを導入し、データを歪めます。知覚的に均一な単一色スケールはほぼ常に優れています。

色を唯一のエンコーディングとして使用する。 チャートをグレースケールに変換したときに失敗した場合、色に過度に依存しています。形状、位置、またはダイレクトラベルを追加してください。

カテゴリ色が多すぎます。 凡例に7–8個以上の異なる色は、パレットが必要ではなく、データを再構成する必要があるというシグナルです。

地図の塗りつぶしの低コントラスト色。 地理的な地図は、多くの色を同時に小さな多角形サイズで表示します。孤立して見える色は、地図のスケールで見分けがはるかに難しい場合があります。実際の表示サイズでテストしてください。

プロジェクタ効果を無視する。 プロジェクタは色を大幅に洗い流します。スクリーンで美しく読むパレットは、会議室のプレゼンテーションではすべての中程度の範囲の区別を失う可能性があります。コントラストバッファを追加してください。

印刷で色だけでエンコードする。 印刷は画面と異なる色を再現する可能性があり、印刷資料のアクセシビリティは等しく重要です。グレースケール印刷を念頭に置いて設計してください。

重要なポイント

• 順序スケールを使用してください（明るい暗い、単一色合い）は、何かの「より多く」意味する1つの極値を含む順序連続データの場合。
• 散逸スケール（2つの色相エンドポイント、中立的な中心）は、有意な中点を持つデータの場合 — 金融、政治、ベースラインからの偏差。
• カテゴリスケール（知覚的に異なる色相）は、固有の順序を持たない名義データの場合；最大7–10カテゴリまで制限します。
• 順序データのレインボーグラデーションを避けてください — 偽りのエッジを導入し、認識を誤解させます。
• 赤と緑のエンコーディングは男性の約6–8%に失敗します。ブルーオレンジまたはパープルグリーン散逸ペアで置き換えます。
• 公開する前に 色盲シミュレータ ですべてのパレットをテストしてください。
• 冗長なエンコーディング（形状、ラベル、線スタイル）を追加して、色が失敗したときにビジュアライゼーションが読みやすいままでいるようにしてください。
• パレットジェネレータ を使用して、特定のデータタイプの色パレットを構築および評価してください。