デザインの配色は「きれいな色を選ぶ」だけではなく、情報の優先順位を作る仕事です。背景、本文、見出し、ボタン、警告など、要素ごとに色の役割を決めると、配色が機能として働きます。
まず色の役割を決める
| 役割 | 目的 | 例 |
|---|---|---|
| ベース | 背景・余白を作る | 白、生成り、淡いグレー |
| メイン | ブランドや主要要素を示す | 青、緑、紫など |
| アクセント | 視線を集める | 補色、鮮やかな色 |
| テキスト | 情報を読む | 黒、チャコール、濃紺 |
| 状態色 | 成功・注意・エラー等 | 色＋アイコン＋ラベル |
文字色はコントラストを数値で確認
通常テキストでは、WCAG 2.2のAA基準で背景とのコントラスト比4.5:1以上が基本です。大きな文字は基準が異なりますが、実際のフォントサイズ・太さを含めて確認します。
状態を色だけで伝えない
赤だけでエラー、緑だけで成功を示すと、色を区別しにくい利用者には情報が伝わらない場合があります。文字、アイコン、枠、形などを併用します。
色数を増やす前に階層を作る
同じメインカラーでも、背景用の淡色、通常状態、ホバー、濃色のように明度差を作ると、色数を増やさずUIの階層を作れます。新しい色相は本当に意味が必要なときだけ追加します。
関連して読みたい記事
配色は小さな色見本だけで決めない
同じ組み合わせでも、背景として広く使う色と小さなアクセントでは印象が変わります。実際の用途に近い面積で並べ、文字・写真・素材と一緒に確認してください。配色ラボで候補を比較し、Webや資料ならコントラスト、ファッションやネイルなら素材と光の当たり方まで見ると、机上の色相関係だけに頼らない実用的な配色になります。
コメントを残す