ディープ・バイオレットに合う色は？落ち着いた紫を上品に際立たせる色合わせ【#591B98】

ディープ・バイオレット（■#591B98）は、青みを含む紫に深さを加えた色です。Webサイトでは、ニュースレターやメール購読の登録ページで、タイトル、配信内容の見出し、主要な「登録する」ボタンなどに使うと、明るい紫よりも落ち着きを残しながら上品に際立たせやすくなります。ただし、紫系を背景・見出し・ボタンへ広く使いすぎると、説明文や入力欄との強弱が曖昧になり、登録完了・入力エラーなどの状態も色だけに頼りやすくなります。ここでは、ウォームペーパー、チャコールプラム、ミストブルーグレーを合わせ、落ち着いた紫を主役にしながら登録フォームを整理しやすい配色を考えます。

ウォームペーパーを土台にし、ブルーグレーで紫に静かな色相差を作る

■#591B98には、背景用のウォームペーパー■#F7F4F0、本文や補助文字用のチャコールプラム■#3C373D、アクセント用のミストブルーグレー■#B7C6D8を合わせる例が考えられます。

■#F7F4F0はわずかに黄みを含む明色で、ディープ・バイオレットとの大きな明度差を作りながら、真っ白よりやわらかな登録面を作れます。■#3C373Dは紫みをわずかに含む低彩度の濃色なので、配信頻度、説明文、プライバシーに関する補足などを主役色より控えめに整理できます。■#B7C6D8は青寄りの低彩度色で、紫との寒色側のつながりを残しながら明るさを加え、同系色の濃淡だけとは違う静かな変化を作れます。

ニュースレター登録ページでは、バイオレットを見出しと主要操作に集める

実装では、配信内容や登録フォームの広い背景を■#F7F4F0にし、ニュースレター名、配信テーマ見出し、主要な「登録する」ボタン背景などへ■#591B98を使います。本文や入力例、補足条件は■#3C373Dへ分けると、ディープ・バイオレットを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#591B98の面に■#B7C6D8の小さな副ボタンやラベルを置き、その文字を■#3C373Dにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#591B98と■#F7F4F0は約9.41:1、■#3C373Dと■#F7F4F0は約10.61:1、■#3C373Dと■#B7C6D8は約6.69:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#591B98と■#B7C6D8は約5.94:1なので、濃い紫の面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

上品に際立たせるなら、登録結果や入力エラーを色だけで伝えない

■#B7C6D8と■#F7F4F0のコントラスト比は約1.59:1です。そのため、明るい背景上の通常文字には使わず、入力欄やボタンの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#591B98や■#3C373Dの枠線・文字を組み合わせます。

また、「登録完了」「入力エラー」「確認が必要」などの状態は、紫やブルーグレーなどの色だけで区別せず、状態を示す文字、アイコン、入力欄の説明を併用します。ディープ・バイオレットを主役として際立たせたい場合も、ページ全体を濃い紫へ寄せるより、■#F7F4F0の余白を十分に残す方が見出しや登録操作との強弱を作りやすくなります。HueRollでは■#591B98をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。