業務システムにおいて、色は「きれいに見せるもの」ではなく 状態を伝える情報 です。同じ赤が、ある画面ではエラー、別の画面では重要マークとして使われていると、利用者は色から意味を読み取れなくなります。
色は役割名で定義する
✕ 見た目ベース
--blue-600--red-500
→ 色を変えると名前が嘘になる
◯ 役割ベース
--color-primary--color-danger
→ 色を変えても意味は保たれる
実務では2層構造にすると管理しやすくなります。
/* 1層目：原色パレット（Primitive） */
--navy-700: #23415a;
--red-500: #d64545;
/* 2層目：役割（Semantic）— UIから参照するのはこちらだけ */
--color-primary: var(--navy-700);
--color-danger: var(--red-500);
--color-surface: #ffffff;
--color-bg: #f6f7f9;
--color-border: #e4e8ed;
--color-text: #333f4d;
--color-text-weak:#6b7887;
POINT
画面やコンポーネントから --navy-700 を直接参照しないルールにしてください。Semantic層だけを参照すると決めておけば、ブランド変更やダークテーマ対応が1ファイルの差し替えで済みます。
最低限そろえるべき役割
| 役割 | 用途 | 備考 |
|---|---|---|
| primary | 主ボタン、リンク、選択状態 | 1色に絞る |
| secondary | 副次的な操作 | グレー系で十分なことが多い |
| success | 完了、正常 | 緑系 |
| warning | 注意、要確認 | 黄・橙系 |
| danger | エラー、削除 | 赤系 |
| info | 補足、案内 | 青系。primaryと近すぎると混同する |
| surface | カード・パネルの背景 | 白 |
| bg | 画面全体の背景 | ごく薄いグレー |
| border | 区切り線・枠線 | 2〜3段階あると便利 |
| text / text-weak / text-disabled | 文字色 | 3段階 |
ステータス色を固定する
業務システムには必ずステータスがあります。同じステータスは全画面で同じ色にしてください。
| ステータス例 | 色 | 意味 |
|---|---|---|
| 下書き・未入力 | グレー | まだ動いていない |
| 申請中・処理中 | 青 | 進行中 |
| 承認済・完了 | 緑 | 正常終了 |
| 差戻し・要確認 | 黄／橙 | 利用者の対応が必要 |
| 却下・エラー・期限超過 | 赤 | 異常・停止 |
運用上の注意
ステータスの種類が10個を超えると、色だけでは区別できなくなります。その場合は色は5系統に集約し、文言で区別してください。色を増やす方向に逃げると破綻します。
コントラスト比を必ず検証する
| 対象 | 必要なコントラスト比（WCAG 2.2 AA） |
|---|---|
| 本文テキスト（18px未満） | 4.5:1 以上 |
| 大きい文字（18.66px以上の太字、24px以上） | 3:1 以上 |
| UI部品の境界・アイコン | 3:1 以上 |
| フォーカスインジケーター | 3:1 以上 |
特に注意すべきは、業務システムで多用される 薄いグレーの補足テキスト です。#999999 を白背景に置くとコントラスト比は約2.8:1で、基準を満たしません。補足テキストは #6b7887 前後（約4.7:1）までに留めてください。
よくある不適合
- プレースホルダーの色が薄すぎる
- 無効化ボタンの文字が読めない
- 黄色の警告バッジに白文字（黄と白は最もコントラストが取りにくい組み合わせ）
- 薄い緑背景に緑文字のステータスバッジ
色だけで情報を伝えない
日本人男性の約5%に色覚特性があります。業務システムは利用者を選べないため、色＋形／文言 の併用を標準とします。
- ステータスバッジは色＋文言（「承認済」）で表示する
- エラー欄は赤枠だけでなく、アイコンとエラーメッセージを添える
- グラフは色分けだけでなく、パターンや直接ラベルを併用する
- 必須項目を赤色だけで示さない
- 一覧の行の強調に背景色だけを使わず、アイコンや左端のバーを併用する
業務システム向けの配色バランス
面積の目安（60-30-10 の考え方）
- 60%：背景・サーフェス（白〜ごく薄いグレー）
- 30%：テキスト・罫線・ヘッダーなどの構造色
- 10%：primaryとステータス色。ここを絞るほど重要な情報が目立つ
業務システムでは、彩度の高い色を使う面積をできるだけ小さくするのが定石です。画面全体が鮮やかだと、本当に注意すべき赤が埋もれます。
ダークテーマを入れるかどうか
要望として挙がりやすいテーマですが、業務システムでは慎重に判断してください。
- Semantic層が整理されていれば実装コストは大きくない
- ただし帳票プレビュー・印刷・グラフ・添付画像の見え方の検証が必要になる
- ステータス色は暗背景で彩度を上げないとコントラストが不足する
- 優先度としては、まずライトテーマのコントラスト適合を先に完了させる
チェックポイント
- 色が役割名（primary / danger など）で定義されている
- UIコードに生の色コードが残っていない
- 同じステータスが全画面で同じ色になっている
- 本文のコントラスト比が4.5:1以上ある
- 色だけで状態を伝えている箇所がない
- 彩度の高い色の使用面積が10%程度に収まっている