配色は「好きな色を組み合わせる」前に、色へ役割を与える作業です。ブランドを表す色、読むための色、操作を示す色、状態を伝える色を分けると、一貫性を保てます。

色を役割で分ける

役割用途
背景ページ、カード、強調領域
文字本文、見出し、補助
キーカラーブランドの印象
主操作最も重要なボタン・リンク
補助操作戻る、詳細、二次操作
状態成功、警告、エラー、情報
境界枠線、区切り、無効状態

同じ緑を「登録ボタン」と「成功表示」の両方に使うと、役割が混ざる場合があります。

まず無彩色で構造を確認する

白、黒、グレーだけで情報の優先順位を作り、その後キーカラーを足します。色を外すと何が重要か分からなくなる場合は、サイズ、太さ、配置も見直します。

文字コントラストを確認する

WCAG 2.2のレベルAAでは、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。ロゴなど例外もあるため、対象基準を確認します。

デジタル庁デザインシステムでは、文字サイズにかかわらず4.5:1以上を確保する運用を採用しています。より単純で安全側のチームルールとして参考になります。

色だけで意味を伝えない

グラフ、フォーム、在庫、選択状態では、ラベル、アイコン、パターン、線種を併用します。「赤は不合格、緑は合格」だけでは、色を識別しにくい人へ伝わりません。

ボタンの状態を揃える

通常、ホバー、押下、フォーカス、無効、読み込み中の色を設計します。無効状態を薄くしすぎて文字が読めない、フォーカス輪郭を消すといった問題を避けます。

写真・動画の上の文字

画像は表示幅や切り抜きで明暗位置が変わります。次の方法を検討します。

  • 文字用の単色面を置く
  • 文字背面へ十分な濃さのオーバーレイを置く
  • 重要な文字を画像外へ出す
  • 画像ごとに表示状態を確認する

影だけでコントラスト不足を補えるとは限りません。

カラーパレットを記録する

色コードだけでなく、用途と組合せを記録します。「Orange 500」ではなく「Primary action background」のように意味を持つ名前を併用すると変更しやすくなります。

確認手順

  1. グレースケールで優先順位を見る
  2. コントラスト比を測る
  3. 色覚シミュレーションを参考にする
  4. 明るい画面と暗い環境で読む
  5. フォーカス・無効・エラーを操作する
  6. 実機の写真・動画上で確認する

シミュレーションだけで利用者全員の見え方を再現できるわけではないため、ラベルや構造を併用します。

まとめ

Web配色は、背景、文字、主操作、補助操作、状態の役割から決めます。ブランドカラーより可読性を優先し、コントラストを測り、色以外の手がかりを必ず用意しましょう。