紫とグレーは合う？濃さを変えて選ぶ配色パターン

紫とグレーは、色の濃さを調整しながら組み合わせられる配色です。ただし、濃い紫と暗いグレーをそのまま重ねると、どちらも沈んで見えて文字が埋もれる場合があります。逆に淡い紫と明るいグレーは、色みは違っても境界が分かりにくくなりがちです。ポイントは「主役にする面」と「読ませる文字」を分けること。今回はデザイン展示会の告知ページを例に、3つの濃さのパターンを比べます。

紫とグレーは合う？まず明るさの組み合わせを決める

紫は赤みと青みを含む色の総称で、グレーは白と黒の中間にある無彩色です。どちらも濃さの幅が広いため、色名だけで同じ仕上がりになるとは限りません。Webで使うCSS（ページの見た目を指定する仕組み）の名前付き色には「purple」■#800080、「gray」■#808080がありますが、今回の配色に使う見本はそれらに限定しません。HEX（ヘックス）はWeb上の色を6桁の英数字で指定する形式です。

今回は濃い紫■#56326Bと淡い紫■#CDBBD9、明るいグレー■#F1F1F3と中間のグレー■#A8A6AF、文字用の暗いグレー■#343640を使います。これらは実際のWeb制作を考えるために選んだ見本で、色名に唯一のHEX値があるという意味ではありません。

濃い紫■#56326Bと明るいグレー■#F1F1F3のコントラスト比は約9.02:1ですが、淡い紫■#CDBBD9と明るいグレーは約1.59:1です。コントラスト比とは、隣り合う色の相対的な明るさの差を表す数値です。紫の色みが残っていても、薄い色同士では重要な区切りを見せにくくなります。

展示会の告知ページで比べる3つの配色パターン

パターン1：明るいグレーを背景に、濃い紫で強調する。「デザインと暮らしの展示会」の作品一覧ページでは、背景を明るいグレー■#F1F1F3にし、見出しを濃い紫■#56326Bにします。文字と背景は約9.02:1です。長い説明は暗いグレー■#343640で表示すると約10.65:1になります。「来場を予約する」ボタンには濃い紫■#56326Bの塗りと白■#FFFFFFの文字を使い、文字との比は約10.17:1、ボタンと周囲の明るいグレーとの比は約9.02:1です。

作品のジャンルを示す淡い紫■#CDBBD9のラベルには暗いグレー■#343640の文字を使い、約6.70:1を確保します。ただしラベルと背景の明るいグレー■#F1F1F3は約1.59:1しか離れていません。必要な境界には暗いグレー■#343640の枠を加えると、枠と外側の背景は約10.65:1、内側の淡い紫とは約6.70:1です。

パターン2：濃い紫を背景にして、文字を明るくする。展示会の冒頭バナーは、広い背景を濃い紫■#56326Bにして、見出しと短い説明を白■#FFFFFFで載せます。比は約10.17:1です。開催日・会場は明るいグレー■#F1F1F3のカードにまとめ、文字を暗いグレー■#343640にすると約10.65:1。カードと外側の紫の差は約9.02:1です。「開催概要を見る」ボタンを淡い紫■#CDBBD9で塗り、暗いグレー■#343640の文字を載せると約6.70:1で、ボタンと紫の背景も約5.67:1で区別できます。

パターン3：中間グレーを主役に、淡い紫を情報のアクセントにする。展示会の案内欄を中間グレー■#A8A6AFにし、説明文字を暗いグレー■#343640にすると約5.00:1です。小さな「入場無料」の案内を淡い紫■#CDBBD9の面にまとめ、文字を暗いグレー■#343640にすると約6.70:1になります。ただし淡い紫と中間グレーの差は約1.34:1なので、案内の区切りには濃い紫■#56326Bで2px程度の枠を付けます。枠と外側の中間グレーは約4.23:1、内側の淡い紫は約5.67:1です。予約ボタンにも濃い紫■#56326Bと白■#FFFFFFの文字を使えば、文字は約10.17:1、ボタンと中間グレーの比は約4.23:1になります。

濃さを変えるときは文字と境界も確認する

淡い紫■#CDBBD9の上に白■#FFFFFFの文字を置くと、コントラスト比は約1.79:1です。中間グレー■#A8A6AFに白文字を載せても約2.40:1なので、通常サイズの文字にも大きな見出しにも向きません。また、濃い紫■#56326Bと暗いグレー■#343640の比は約1.18:1です。濃い色を隣り合わせるときも、色みの違いだけに頼らず明るさを点検しましょう。

WCAG 2.2というWebのアクセシビリティ指針のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作部品に必要な枠など、文字以外の重要な表示も隣接色との3:1以上が求められる場合があります。ラベルの選択状態や予約状況は色だけで示さず、文字や形でも伝えてください。細い枠は数値が足りていても見えにくいことがあるため、実際の表示でも確認します。

HueRollではHEXで色を調整し、選んだ色と白・黒のコントラスト比を確認できます。ただし、任意の2色同士の比較やAA・AAAの自動判定には対応していません。完成画面の文字・背景・ラベル・ボタンの組み合わせは別途確認してください。