ダスキー・バイオレットに合う色は？落ち着いた紫をシックにまとめる色合わせ【#402060】

ダスキー・バイオレット（■#402060）は、紫の深さを残しながら明るさと鮮やかさを抑えた濃色です。Webサイトでは、料金プランの見出し、FAQの開閉見出し、事例カードの強調部分などに使うと、派手すぎない存在感を出しやすくなります。一方で、紫系の濃色を広い面積に重ねると、画面全体が重く見えたり、どこが重要なのか分かりにくくなったりします。ここでは、ライトラベンダーグレー、スレートグレー、スモーキーセージを合わせ、落ち着いた紫をシックに見せながら読みやすさも保つ配色を考えます。

明るいラベンダーグレーを土台にし、セージで静かな色相差を作る

■#402060には、背景用のライトラベンダーグレー■#F2EFF5、本文や補助文字用のスレートグレー■#55515A、アクセント用のスモーキーセージ■#A8B8A0を合わせる例が考えられます。

■#F2EFF5はごく薄い紫みを含む明るい背景なので、基準色とのつながりを残しながら大きな明度差を作れます。■#55515Aは彩度を抑えた濃いグレーで、本文、価格の補足、注記などを紫一色にせず整理できます。■#A8B8A0は緑寄りの低彩度色なので、紫から色相を離しつつ鮮やかさを上げすぎず、静かな変化を加えられます。

料金プランやFAQでは、紫を見出しと主要操作に集める

実装では、プランカードやFAQの広い背景を■#F2EFF5にし、プラン名、質問見出し、主要ボタン背景など、目線を止めたい場所へ■#402060を使います。本文や補足説明は■#55515Aへ分けると、紫を強調色として残しやすくなります。UI（ユーザーが操作するボタンや入力欄などの画面部品）のアクセントには、濃い■#402060の面に■#A8B8A0の小さな選択ラベルや状態表示を置き、文字を■#402060にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#402060と■#F2EFF5は約11.57:1、■#55515Aと■#F2EFF5は約6.80:1、■#402060と■#A8B8A0は約6.29:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、濃い■#402060の面に■#A8B8A0の操作部品を置く場合は、隣接色との差も約6.29:1となり、意味のあるUI部品を識別する視覚情報に必要な3:1以上を確保できます。

スモーキーセージは明るい背景上の文字や境界だけに頼らない

■#A8B8A0は、暗い紫に穏やかな色相差を加えるアクセントです。広い背景に増やすより、濃い■#402060の中に置く小さな状態表示や短いラベルへ絞ると、バイオレットの主役感を保ちやすくなります。

一方、■#A8B8A0と■#F2EFF5のコントラスト比は約1.84:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#402060や■#55515Aの枠線・文字など、十分な明度差を持つ色を組み合わせます。