ヒートマップの色はどう決める？数値の大小を伝える配色

ヒートマップは、表に並べた数値の大小を色の濃淡などで見渡せる図です。数字が多い画面では便利ですが、色を何色も使いすぎたり、濃い部分の文字が読めなかったりすると、かえって判断しにくくなります。ここでは架空の問い合わせ管理画面を例に、曜日と時間帯ごとの件数を4段階の青で示す配色と、その確認方法を紹介します。

大小を示す色は一方向の濃淡でそろえる

件数のように小さい値から大きい値まで順序がある場合は、低い値を淡く、高い値を濃くする「順次配色」が一案です。青から赤へ色相を何度も変えるより、同系統の濃淡を使うほうが「値の大きさ」という一つの意味に色を結び付けやすくなります。ただし、濃い場所が必ず危険とは限りません。件数が多いことを異常やエラーと決め付けないようにします。

この例では問い合わせ件数を「0〜2件」「3〜5件」「6〜8件」「9件以上」の4区分にします。区分とは、数値を一定の範囲でまとめることです。境目は架空の業務での表示例であり、実際にはデータの分布や業務の基準から決め直します。別の週と比べるなら、毎週自動で濃淡の基準を変えるのではなく、同じ区分を維持します。

色だけで数値を伝えず、各セル（表の一つ一つのマス）に「6件」などの数値を直接表示し、曜日・時間帯の見出しも残します。WCAG 2.2（WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」でも、色を唯一の情報源にしないことが求められています。

曜日と時間帯の問い合わせ件数を4色で表す

例の配色は白■#FFFFFFの表を基準にし、文字の色をデータセルの背景に合わせて切り替えます。HEX（色を16進数で示すカラーコード）ごとの組み合わせは次のとおりです。コントラスト比は文字と背景の相対的な明るさの差で、WCAG 2.2のレベルAAでは通常サイズの文字に原則4.5:1以上が必要です。

• 0〜2件：淡い青■#EFF6FFに濃紺■#1E3A8Aの文字。コントラスト比は約9.52:1です。
• 3〜5件：少し濃い青■#BFDBFEに同じ濃紺■#1E3A8Aの文字。約7.29:1です。
• 6〜8件：中間の青■#60A5FAに黒に近い紺■#0F172Aの文字。約7.02:1です。
• 9件以上：濃い青■#1D4ED8に白■#FFFFFFの文字。約6.70:1です。

この4組はいずれも通常文字の4.5:1を上回ります。次の表はすべて架空の件数で、各時間帯を同じ3時間幅にそろえています。水曜昼の11件と金曜夕方の10件は濃い青の区分ですが、正確な件数は色ではなく数字で読み取れます。

区分の境界と数値が分かる凡例を表の近くに置き、濃淡の意味を説明します。例えば最も淡い青■#EFF6FFと次の青■#BFDBFEのコントラスト比は約1.31:1しかありません。色の違いだけで区分を判定させず、セル内の件数と区分表記を必ず残します。

0件と欠測を区別し、操作時の表示も確認する

金曜午前の「0件」は集計の結果として0だった状態です。一方、木曜夕方はデータが取得できなかったという想定なので「欠測」と文字で示し、淡いグレー■#F1F5F9に青灰色■#475569を組み合わせます。両者の文字の比率は約6.92:1です。0件を欠測と混ぜると、問い合わせが少なかったのか、そもそも集計できていないのかを判断できません。

セル同士の色差や、淡い青■#EFF6FFと周囲の白■#FFFFFFの差は約1.09:1と小さいため、グラフの形を色面だけで理解させる構成は避けます。必要な図形・操作の目印には隣接色と原則3:1以上のコントラストが求められます。ここでは各セルの数値、行・列の見出し、欠測表示が情報を補っていますが、実際の画面全体が自動的に基準へ適合するわけではありません。

数値の詳細を開ける画面なら、マウスを重ねたときだけでなく、キーボードやタップでも値を確認できるようにします。フォーカス（操作中の位置を示す輪郭）は、淡い青から中間の青までなら濃紺■#0F172Aが使え、最も厳しい中間の青■#60A5FAとの比率でも約7.02:1です。濃い青■#1D4ED8のセルでは白■#FFFFFFの輪郭に切り替えると約6.70:1です。周囲の余白との境界も含めて実画面で確認します。

HueRollではHEXコードで色を選び、選択色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできません。今回の4段階の背景と文字の組み合わせは別途計算した値です。ヒートマップでは色の美しさよりも、区分を固定すること、正確な値を読めること、欠測を区別できることを優先しましょう。