ペール・バイオレットに合う色は？淡い紫をエレガントにまとめる色合わせ【#DBC9ED】

ペール・バイオレット（■#DBC9ED）は、青みを含む紫を淡くやわらげた色です。ウェディングフォトのプラン比較ページでは、選択中のプランや相談予約へ進む主要ボタンなどに範囲を絞って使うと、淡い紫を主役にしながらエレガントにまとめやすくなります。ここでは、ディープバイオレット、パールホワイト、ミューテッドセージを組み合わせます。

濃いバイオレットで文字を締め、白に近い背景とセージで落ち着きを加える

■#DBC9EDには、見出しや本文用のディープバイオレット■#413650、料金や撮影内容を載せるカード背景用のパールホワイト■#FAF8FC、衣装やロケーション情報への補助操作用のミューテッドセージ■#60705Bを合わせる例が考えられます。

■#413650は暗い紫で、ペール・バイオレットと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FAF8FCはごく淡い紫みを含む白に近い色なので、料金、撮影時間、納品枚数、注意事項など情報量の多い面を軽く保てます。■#60705Bは落ち着いたセージ系で、紫から色相を離し、「衣装を見る」「ロケーションを確認する」などの補助操作を主要な相談予約と分ける候補になります。

プラン比較では、選択中のプランと相談予約ボタンにペール・バイオレットを使う

ページと未選択のプランカードを■#FAF8FCにし、プラン名、料金、撮影時間、説明文を■#413650で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.65:1です。

選択中のプランや主要な「このプランで相談する」ボタンの背景に■#DBC9EDを使い、その上の文字とアイコンを■#413650にすると、コントラスト比は約7.27:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#DBC9EDと■#FAF8FCの差は約1.46:1です。淡い色面だけでは選択中のプランや主要ボタンの境界を見分けにくいため、■#413650の枠線、チェックアイコン、「選択中」の文字を併用します。

「衣装を見る」などの補助ボタンは■#60705Bを背景にし、その上を■#FFFFFFの文字にすると約5.29:1です。ミューテッドセージとパールホワイトの差も約5.02:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、UI（ユーザーが操作するボタンや選択状態などの画面部品）を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

エレガントに見せるなら、白文字や淡い紫だけで選択状態を伝えない

■#DBC9EDと■#FFFFFFのコントラスト比は約1.55:1です。そのため、ペール・バイオレット背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#413650にします。

また、「選択中」「相談予約済み」「受付終了」などの状態を色だけで伝えず、状態名の文字、チェックアイコン、予約日時なども併用します。ペール・バイオレットをページ全体へ広げるより、選択中のプランや主要な相談操作など用途を絞って使い、■#FAF8FCの余白を広く取ると、淡い紫を主役にしながら整った見え方に調整しやすくなります。HueRollでは■#DBC9EDをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。