上昇・下降を赤と緑だけで表さないためのWEBデザイン

数値が上がったら緑、下がったら赤。WEBのダッシュボードではよく見られる表現ですが、それだけでは色を区別しづらい人に伝わりません。また、問い合わせ件数の増加と応答時間の減少では、変化の方向と業務上の評価を同じように扱えません。ここではサポート管理画面の週次比較を例に、青・黄・グレーを使い、矢印や言葉と合わせて上昇・下降を示す方法を紹介します。

上昇と下降は「良い・悪い」ではなく変化の方向として示す

トレンドとは、時間とともに数値がどう変わっているかという傾向です。「増加」「減少」「変化なし」という方向と、「望ましい」「注意が必要」という評価は別の情報です。問い合わせ件数が増えた理由は利用者の増加かもしれませんし、問題が増えたためかもしれません。応答時間が短くなっても、対応の品質が落ちていないか確認が必要です。

色で方向を示す場合は「↑ 増加」「↓ 減少」「→ 変化なし」の文字を添え、前週と今週の実数値も見せます。WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」では、色だけを情報の唯一の手がかりにしないことが求められます。矢印の形と文字があれば、赤と緑の違いに頼らずに変化を追えます。

数値や文字の読みやすさも別に確認します。文字と背景のコントラスト比は相対的な明るさの差を示す数値で、WCAG 2.2のレベルAAでは通常サイズの文字に原則4.5:1以上、条件を満たす大きな文字に3:1以上が必要です。意味を持つ線・アイコン・操作の輪郭などにも、隣接色と原則3:1以上が求められます。

増加・減少・変化なしを3種類のラベルで示す配色例

例では管理画面のカードを白■#FFFFFF、見出しや本文を濃いグレー■#1F2937にします。この文字と背景の比率は約14.68:1です。ページ背景を淡い青灰色■#F8FAFCにした場合も、同じ文字■#1F2937との比率は約14.03:1です。補足の数字を青灰色■#475569にするなら、白■#FFFFFFに対して約7.58:1を確保できます。

• 増加：「↑ 増加 20%」を淡い青■#DBEAFEのラベルに濃い青■#1E40AFで表示します。文字との比率は約7.15:1です。
• 減少：「↓ 減少 20%」を淡い黄■#FEF3C7に濃い茶■#92400Eで表示します。文字との比率は約6.37:1です。
• 変化なし：「→ 変化なし」を淡いグレー■#F1F5F9に濃い青灰色■#475569で表示します。文字との比率は約6.92:1です。

どの組み合わせも通常文字に必要な4.5:1以上です。一方、淡い青■#DBEAFEと白■#FFFFFFの差は約1.22:1、淡い黄■#FEF3C7と白■#FFFFFFは約1.11:1、淡いグレー■#F1F5F9と白■#FFFFFFは約1.10:1しかありません。背景の色面だけでは区別しにくいため、矢印・文言・数値を必ず表示します。HEXは色を16進数で指定するカラーコードです。

以下は架空の週次データです。問い合わせ件数の120件から144件は「24件増、前週比20%増」、平均応答時間の30分から24分は「6分減、前週比20%減」です。解決率が80%から80%なら「0ポイント、変化なし」とします。

折れ線・操作状態・比較できない数値も点検する

折れ線グラフで変化を示す場合も、上昇は青い実線■#1D4ED8と上向きの三角印、下降は茶色の破線■#92400Eと下向きの三角印など、色以外の特徴を付けます。白い背景■#FFFFFFに対する線の比率は青が約6.70:1、茶が約7.09:1です。ただし青い線■#1D4ED8と茶色の線■#92400E同士の比率は約1.06:1なので、線が交わる場所では線種と形を残します。系列名と実数値をグラフの近くにも表示しましょう。

前週が0件で今週12件の場合、12件増えたことは示せても、前週を分母にする増加率は計算できません。「100%増」などと決めつけず、「↑ 12件増加（増加率は算出不可）」と記します。比較対象のデータが取得できない場合は0件と混同せず「比較データなし」と表示します。上昇・下降の評価を伝える必要がある場合は、原因や目標値の説明も別に加えます。

操作可能なグラフやフィルターでは、選択中の系列やキーボードの操作位置を色だけで示さないようにします。フォーカス（操作の対象になっている位置）に濃い青緑■#0F766Eの輪郭を使うなら、白■#FFFFFFと約5.47:1、淡いページ背景■#F8FAFCと約5.23:1です。カードの区切りに青灰色■#64748Bの線を使う場合は、白■#FFFFFFに対して約4.76:1です。スマートフォンでも矢印、方向の文字、比較期間と数値を省略しないでください。

HueRollではHEXコードを入力して色を選び、選択色と白・黒とのコントラストを確認できます。ただし任意の2色の比較や、WCAGのAA・AAA自動判定はできません。今回の文字・背景・線の組み合わせは別途計算した値です。赤と緑を使わないこと自体が目的ではなく、色なしでも変化の方向と意味が伝わることが大切です。