ミスト・バイオレットに合う色は？やさしい紫を品よくまとめる配色【#EBE3F2】

ミスト・バイオレット（HEX（#から始まるWeb用カラーコード）で ■#EBE3F2）は、バイオレット系の色をかなり淡くやわらげた色です。デジタルマガジンの特集記事一覧では、注目記事のラベルや選択中のカテゴリ、主要な「記事を読む」ボタンなどに範囲を絞って使うと、やさしい紫を主役にしながら品よくまとめやすくなります。ここでは、ディープバイオレットチャコール、パールホワイト、ミューテッドブロンズを組み合わせます。

ディープバイオレットチャコールで文字を締め、ブロンズで補助操作を分ける

■#EBE3F2には、見出しや本文用として、ここではディープバイオレットチャコールと呼ぶ■#433A4D、ページ背景用のパールホワイト■#FCFBFD、バックナンバー表示などの補助操作用として、ここではミューテッドブロンズと呼ぶ■#6B6048を合わせる例が考えられます。

■#433A4Dは紫みを含む暗い色で、ミスト・バイオレットと色相（赤・青・緑など色みの違い）を近づけながら明るさの差を大きく取れます。■#FCFBFDはわずかに紫みを含む白に近い色なので、記事カードや本文抜粋が並ぶ広い面を明るく保ちやすい背景候補です。■#6B6048は落ち着いたブラウン寄りの色で、「バックナンバーを見る」「カテゴリ一覧へ戻る」などの補助操作を、紫系の主要操作と色相で分けたいときに使えます。

特集記事一覧では、注目記事と選択中カテゴリにミスト・バイオレットを使う

ページ背景と通常の記事カードを■#FCFBFDにし、記事タイトル、概要、公開日を■#433A4Dで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.43:1です。

注目記事のラベル、選択中のカテゴリ、主要な「記事を読む」ボタンの背景に■#EBE3F2を使い、その上の文字とアイコンを■#433A4Dにすると、コントラスト比は約8.61:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

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

「バックナンバーを見る」などの補助ボタンは■#6B6048を背景にし、その上を■#FFFFFFの文字にすると約6.19:1です。■#6B6048と■#FCFBFDの差も約6.00:1あり、主要操作と補助操作を分けやすくなります。

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

品よくまとめるなら、淡い紫だけで強調状態を伝えない

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

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