紫を基調にしたWEBサイトの配色｜華やかさと読みやすさを両立する方法
紫を基調にしたWEBサイトでは、華やかさを出そうとして背景も文字も紫系にすると、案内やボタンが埋もれてしまうことがあります。紫は色の幅が広く、特定の1色だけを指す言葉ではありません。この記事では、深い紫#634186を例に、見せ場には濃い色、詳しい情報には明るい色を割り当てる方法を紹介します。HEXはWEBの色を16進数で指定するカラーコードです。
紫を使う面積を決め、文字と背景の明暗差を付ける
華やかさを作るには、紫の種類を増やすより、どこを主役にするか決めることが重要です。例えば、ページを開いて最初に目に入る案内エリアを紫にし、日時・料金・注意事項は明るい背景へ切り替えます。写真が多い場所まで紫で囲むと、作品と背景が競い合う場合があります。
ここで使う濃い紫#634186の上にオフホワイト#FBF8FFの文字を置くと、コントラスト比は約7.59:1です。コントラスト比は、隣り合う色の相対的な明るさの差を示す数値です。色相（紫や青などの色み）だけでなく、明度（明るさ）も変えることで、華やかさを残しながら見出しを読めるようにします。
本文には彩度（鮮やかさ）を抑えた背景を使い、チケットの予約など重要な操作を目立たせます。すべての場所を濃色にするのではなく、読んでほしい順番に合わせて濃い面と明るい面を切り替えるのが基本です。
美術展のチケット予約ページで考える配色例
展示作品の写真、開催日時、会場案内、チケット予約を載せる特設ページを想定します。色を次の役割に分けると、作品の雰囲気と申し込み導線を両立しやすくなります。
- 最初の案内エリア：背景は深い紫#634186、展覧会名と短い説明の文字はオフホワイト#FBF8FF。文字と背景は約7.59:1です。紫はここに大きく使い、以降の文章は明るい面に移します。
- 開催概要と本文：少し青みのある白#F8F7FBを背景に、濃いチャコール#2B2633で日時・会場・料金を書きます。文字と背景は約13.79:1です。
- 作品紹介のカード：白#FFFFFFにチャコール#2B2633の文字を合わせると約14.71:1です。ただしカードの白#FFFFFFとページ背景#F8F7FBは約1.07:1しか違わないため、余白と枠線でも区切ります。
- カードや入力欄の境界線：グレイッシュパープル#776E86を使います。白#FFFFFFとは約4.82:1、ページ背景#F8F7FBとは約4.52:1で、輪郭が必要な入力欄も区別できます。
- 来場前の案内欄：淡いラベンダー#EDE7F5にチャコール#2B2633の文字を合わせます。文字と背景は約12.15:1です。
- 紫の案内エリアに置く予約ボタン：温かいシャンパン色#F0CB82の背景に濃いプラム#30203Fの文字を使います。文字とボタンは約9.66:1、ボタンと周囲の紫#634186は約5.16:1です。
- 明るいエリアの予約ボタン：濃い紫#634186を背景に、白#FFFFFFの文字を使います。文字とボタンは約7.98:1、ボタンと周囲の明るい背景#F8F7FBは約7.48:1です。
シャンパン色は紫の上で予約の位置を示すための小さなアクセントにし、明るいページでは予約ボタンを紫に切り替えます。同じボタンの役割でも、周囲の色に合わせて配色を変える方法です。
華やかさを保ちつつ、読める・操作できる状態に整える
淡いラベンダー#EDE7F5とページ背景#F8F7FBの差は約1.13:1です。色の違いだけでは案内欄が分かれにくいため、見出しや余白、必要に応じて枠線を加えます。シャンパン色#F0CB82を明るい背景#F8F7FBにそのままボタンとして置くと、面同士の差は約1.45:1に下がる点にも注意してください。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常の文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作や状態の識別に必要な非テキスト情報も、隣接色と3:1以上が基準です。重要な状態は色だけでなく、文字や枠線でも伝えましょう。
作品写真の上に文字を載せる場合は、写真の暗い部分と明るい部分の両方で確かめるか、文字の背後に単色の面を設けます。スマートフォンでも説明文字や予約ボタンの位置を確認してください。HueRollでは選んだ色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。紹介した色同士の比率は別途計算しています。