ミスト・マゼンタに合う色は？淡い赤紫を華やかに見せる配色例【#F2E3EE】

ミスト・マゼンタ（HEX（#から始まるWeb用カラーコード）で ■#F2E3EE）は、赤紫をかなり淡くやわらげた色です。クリエイター向けポートフォリオの作品一覧では、注目作品のラベルや選択中のカテゴリ、主要な「作品を見る」ボタンなどに範囲を絞って使うと、淡い赤紫を主役にしながら華やかに見せやすくなります。ここでは、ディーププラム、ラベンダーホワイト、ミューテッドオリーブを組み合わせます。

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

■#F2E3EEには、見出しや本文用として、ここではディーププラムと呼ぶ■#4C3850、ページ背景用のラベンダーホワイト■#FCFAFC、プロフィール表示などの補助操作用として、ここではミューテッドオリーブと呼ぶ■#566B4Eを合わせる例が考えられます。

■#4C3850は紫を含む暗い色で、ミスト・マゼンタと色相（赤・青・緑など色みの違い）を近づけながら明るさの差を作れます。■#FCFAFCはわずかに紫みを含む白に近い色なので、作品画像や説明文が並ぶ広い面を明るく保ちやすい背景候補です。■#566B4Eは落ち着いた緑系で、「プロフィールを見る」「制作実績を絞り込む」などの補助操作を、赤紫系の主要操作と色相で分けたいときに使えます。

作品一覧では、注目作品と選択中カテゴリにミスト・マゼンタを使う

ページ背景と通常の作品カードを■#FCFAFCにし、作品名、制作概要、担当範囲を■#4C3850で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.17:1です。

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

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

「プロフィールを見る」などの補助ボタンは■#566B4Eを背景にし、その上を■#FFFFFFの文字にすると約5.82:1です。■#566B4Eと■#FCFAFCの差も約5.60:1あり、主要操作と補助操作を分けやすくなります。

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

華やかに見せるなら、淡い赤紫だけで強調状態を伝えない

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

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