色の組み合わせを考えるとき、「おしゃれに見える正解の2色」を暗記する必要はありません。まず主役の色を決め、色相の距離、明るさ、鮮やかさ、使う面積、文字とのコントラストを調整すると、配色は組み立てやすくなります。
色の組み合わせは4つの視点で考える
- 色相：赤・青・黄など色みの違い
- 明度：明るいか暗いか
- 彩度：鮮やかか、くすんでいるか
- 面積：どの色を主役にし、どの色をアクセントにするか
代表的な配色パターン
同系色・モノクロマティックは一つの色相を明暗で変えるため、まとまりを作りやすい方法です。類似色は色相環で近い色を組み合わせ、自然な連続感を作ります。補色は反対側の色を組み合わせ、強いコントラストを作ります。トライアドは色相環をおおむね等間隔に選び、複数色でもバランスを取りやすい考え方です。
反対色を使いたい場合は補色の記事も確認してください。
迷ったら「主役1色＋支える色＋アクセント」に分ける
すべての色を同じ強さで使うと、視線の行き先が分かりにくくなります。主役を一つ決め、背景や余白に使う落ち着いた色を用意し、必要なら小さな面積だけアクセントを置くと整理しやすくなります。割合はデザインによって変わるため、固定の比率を絶対ルールにする必要はありません。
文字と背景はコントラストを確認する
見た目の相性がよくても、文字が読めなければ実用的な配色にはなりません。WCAGでは通常テキストに4.5:1以上のコントラスト比が基準として示されています。また、エラーや状態を色だけで区別せず、ラベルやアイコンも併用します。
実際に色を並べて試す
色しるべの配色ラボでは、色を選びながら組み合わせを確認できます。理論だけで決めず、実際の面積と背景で見比べることが最短です。
コメントを残す