ミスト・パープルに合う色は？淡い紫を上品に引き立てる組み合わせ【#F0E3F2】

ミスト・パープル（HEX（#から始まるWeb用カラーコード）で ■#F0E3F2）は、紫をかなり淡くやわらげた色です。採用サイトの求人一覧では、注目職種のラベルや選択中の職種カテゴリ、主要な「この求人に応募する」ボタンなどに範囲を絞って使うと、淡い紫を主役にしながら上品に引き立てやすくなります。ここでは、ディーププラム、パールホワイト、ミューテッドブロンズを組み合わせます。

ディーププラムで文字を締め、ブロンズで補助操作を分ける

■#F0E3F2には、見出しや本文用として、ここではディーププラムと呼ぶ■#46384A、ページ背景用のパールホワイト■#FCFAFD、募集要項の確認などの補助操作用として、ここではミューテッドブロンズと呼ぶ■#756248を合わせる例が考えられます。

■#46384Aは紫を含む暗い色で、ミスト・パープルと色相（赤・青・緑など色みの違い）を近づけながら明るさの差を大きく取れます。■#FCFAFDはわずかに紫みを含む白に近い色なので、求人情報や説明文が並ぶ広い面を明るく保ちやすい背景候補です。■#756248は落ち着いたブラウン寄りの色で、「募集要項を見る」「会社情報を確認する」などの補助操作を、紫系の主要操作と色相で分けたいときに使えます。

求人一覧では、注目職種と選択中カテゴリにミスト・パープルを使う

ページ背景と通常の求人カードを■#FCFAFDにし、職種名、勤務地、仕事内容を■#46384Aで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.51:1です。

注目職種のラベル、選択中の職種カテゴリ、主要な「この求人に応募する」ボタンの背景に■#F0E3F2を使い、その上の文字とアイコンを■#46384Aにすると、コントラスト比は約8.82:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#F0E3F2と■#FCFAFDの差は約1.19:1です。淡い色面だけでは注目職種や選択中カテゴリを見分けにくいため、■#46384Aの枠線、「注目」「選択中」という文字、チェックアイコンなどを併用します。この枠線とページ背景のコントラスト比は約10.51:1です。

「募集要項を見る」などの補助ボタンは■#756248を背景にし、その上を■#FFFFFFの文字にすると約5.84:1です。■#756248と■#FCFAFDの差も約5.62:1あり、主要操作と補助操作を分けやすくなります。

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

上品に見せるなら、淡い紫だけで強調状態を伝えない

■#F0E3F2と■#FFFFFFのコントラスト比は約1.24:1です。そのため、ミスト・パープル背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#46384Aにします。

また、「注目」「選択中」「応募済み」などの状態を色だけで伝えず、状態名の文字、枠線、アイコンなども併用します。ミスト・パープルをページ全体へ広げるより、注目職種や主要操作など用途を絞って使い、■#FCFAFDの余白を広く取ると、淡い紫を主役にしながら上品に引き立てやすくなります。HueRollでは■#F0E3F2を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。