プラスとマイナスを色で表す方法｜数値ダッシュボードの配色

数値ダッシュボードで「＋12,000円」と「−8,000円」を赤と緑だけで示すと、色を見分けにくい人には差が伝わらず、プラスが必ず良い結果だと誤解されることもあります。特に予算と実績を比べる画面では、プラスが支出の超過を意味する場合があります。ここでは月次費用の管理画面を例に、符号の意味、配色、実数値と説明をセットにする方法を紹介します。

プラス・マイナスの意味は、基準と計算式を先に示す

ダッシュボードとは、複数の数値を一覧で確認できる管理画面です。差額とは二つの金額の差で、この例では「実績 − 予算」と定義します。実績が予算より多ければプラス、少なければマイナス、同じなら0円になります。「予算 − 実績」を採用するサービスでは符号が逆になるため、利用者が計算式を確認できる場所に示しましょう。

支出のプラスは「予算超過」、マイナスは「予算を下回る」という意味です。ただし予算内だから必ず良いとは限りません。必要な研修や発注が未実施で、今月の支出が少ない場合もあるためです。色に「成功」「失敗」という評価まで任せず、符号と「予算超過」「予算を下回る」などの文章を併記します。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」では、色だけを情報の唯一の手段にしないことが求められます。またレベルAAでは、通常サイズの文字と背景のコントラスト比は原則4.5:1以上、条件を満たす大きな文字では3:1以上が必要です。コントラスト比とは二つの色の相対的な明るさの差を表す数値です。

予算と実績の差額を、符号付きのラベルで表す配色例

画面全体を淡い青灰色■#F8FAFC、数値カードを白■#FFFFFFにし、見出しと金額を濃いグレー■#1F2937で表示します。白いカードと本文の比率は約14.68:1、ページ背景と本文は約14.03:1です。補足文字の青灰色■#475569も白■#FFFFFFに対して約7.58:1を確保できます。

• プラス（予算超過）：淡い黄■#FEF3C7に濃い茶■#92400Eを組み合わせ、「＋12,000円・予算超過」と示します。文字と背景の比率は約6.37:1です。
• マイナス（予算を下回る）：淡い青■#DBEAFEに濃い青■#1E40AFを組み合わせ、「−8,000円・予算を下回る」と示します。比率は約7.15:1です。
• 差額ゼロ：淡いグレー■#F1F5F9と青灰色■#475569を組み合わせ、「0円・予算どおり」と示します。比率は約6.92:1です。

この3組の文字色は、いずれも通常文字の4.5:1以上を満たします。ただし黄■#FEF3C7と白■#FFFFFFの差は約1.11:1、青■#DBEAFEと白■#FFFFFFは約1.22:1、淡いグレー■#F1F5F9と白■#FFFFFFは約1.10:1と小さく、背景だけでは状態を見分けにくくなります。短いラベルの中にも符号・金額・説明を残します。HEXとは、色を6桁などの16進数で指定するカラーコードです。

実際に4項目の予算と実績を並べると、次のようになります。色は差額の状態を探す目印であり、計算結果は文字でも読み取れます。

予算0円・データ未取得・操作状態も区別する

広告費の差額は112,000円 − 100,000円 ＝ ＋12,000円、配信基盤費は142,000円 − 150,000円 ＝ −8,000円です。新規テスト費は予算を明示的に0円としているので、5,000円の支出との差額は＋5,000円になります。ただし予算0円を分母にした超過率は計算できません。ここで「100%超過」と表示するのは誤りです。

さらに「予算0円」と「予算データが未取得」は別の状態です。データがない項目を0円で置き換えてプラス・マイナスを計算せず、「予算未取得・差額算出不可」と表示します。単位が円なのか、税抜きなのか、対象月はいつなのかも明示し、比較する条件をそろえましょう。

差額を確認する操作ボタンを青■#1D4ED8に白文字■#FFFFFFで置く場合、文字のコントラスト比は約6.70:1、ボタンとページ背景■#F8FAFCは約6.41:1です。キーボードで操作する位置を示すフォーカス枠には濃い青緑■#0F766Eを使う例があり、白■#FFFFFFに対して約5.47:1、ページ背景■#F8FAFCに対して約5.23:1です。必要な操作部品の輪郭には、隣接色と原則3:1以上が求められます。

白いカードと周囲の淡い背景の差が小さい場合は、青灰色■#64748Bの輪郭を追加できます。白■#FFFFFFに対する比率は約4.76:1、外側の背景■#F8FAFCに対して約4.55:1です。スマートフォンでも、項目名・予算・実績・符号付き差額を対応付けて読めるようにします。

HueRollではHEXコードで色を選び、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較や、WCAGのAA・AAA自動判定には対応していません。今回のラベルや操作色の組み合わせは別途計算した値です。プラスとマイナスを色で目立たせる前に、「何を引いた結果なのか」を読者に伝えることが最も重要です。