ビビッドカラーに合う色は？派手になりすぎない組み合わせ

ビビッドカラーは、画面の中で強く目に入りやすい一方、鮮やかな色同士を同じ強さで並べると、配色全体が落ち着かなく見えることがあります。この記事では、彩度が高く鮮やかに見える色を「ビビッドカラー」として扱い、無彩色・淡い色・深い色を組み合わせて、鮮やかさを残しながら派手になりすぎない配色を作る方法を紹介します。

ビビッドカラーには「静かな色」を合わせるとまとまりやすい

CSSで使われるHSLでは、彩度は0%で無彩色、100%で完全に彩度のある色として表されます。ただし、実際の見た目の強さは彩度だけで決まらず、明度、使う面積、周囲の色によっても変わります。

ビビッドカラーを主役にするなら、相手まで同じ強さにしないことがポイントです。白やグレーに近い無彩色、元の色を淡くした色、黒に近い深色などを広い面に使うと、鮮やかな色の存在感を残しながら全体を整理しやすくなります。補色のように離れた色を足す場合も、両方を大面積にせず、片方を小さなアクセントにすると競合を抑えやすくなります。

派手になりすぎない3つの配色例

1例目では、白 ■#FFFFFF を文字として青 ■#1F57FF の上に置いたときのコントラスト比は約5.43:1です。通常サイズの文字に対するWCAG 2.2の4.5:1という基準を満たします。

一方、白 ■#FFFFFF とマゼンタ ■#FF1FC7 は約3.35:1で、通常サイズの文字には不足します。マゼンタ上の文字を深いプラム ■#2F1B2B にすると約4.78:1になるため、「鮮やかな背景には白文字」と決めつけず、実際の組み合わせで確認することが大切です。

彩度・面積・コントラストを分けて調整する

配色が強すぎると感じたら、まず色数を増やすのではなく、支える色の彩度を下げる、背景を明るくする、ビビッドカラーの面積を小さくする、という順で調整すると原因を切り分けやすくなります。60–30–10の考え方を使う場合も、比率を厳密に測るのではなく、背景・補助色・アクセントの役割を分ける目安として使えます。

また、文字と背景は見た目の印象ではなくコントラスト比で確認します。WCAG 2.2では通常の文字は4.5:1以上、WCAGで定義される大きな文字は3:1以上が基準です。意味のあるUI部品や状態を識別するために必要な視覚情報には、隣接色との3:1以上が求められます。ボタンや状態表示では、色だけに意味を持たせず、文字、形、アイコン、枠線なども併用すると情報を伝えやすくなります。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色や60–30–10の候補を確認できます。ビビッドカラーを選んだら、まず淡い色や深い色を候補にし、最後に白・黒とのコントラストを確認すると、鮮やかさを活かしながら使う場所を整理しやすくなります。