ピュア・マゼンタに合う色は？純度の高い赤紫を華やかに際立たせる組み合わせ【#FF00BF】

ピュア・マゼンタ（■#FF00BF）は、赤と紫の中間にある非常に鮮やかな赤紫です。オンラインデザインツールのテンプレートギャラリーでは、おすすめテンプレートのバッジ、選択中のカテゴリ、主要な「このテンプレートを使う」ボタンなどに使うと、純度の高い赤紫を華やかに際立たせながら操作の優先順位を作りやすくなります。ただし、白文字とのコントラストは通常サイズの文字に十分ではないため、マゼンタの面には濃い文字色を合わせるのが扱いやすい方法です。ここでは、クールライラックホワイト、インクプラム、ディープインディゴを組み合わせます。

明るいライラックホワイトを土台にし、濃いプラムでマゼンタを締める

■#FF00BFには、背景用のクールライラックホワイト■#FAF7FC、本文・テンプレート名・主要ボタン文字用のインクプラム■#1B1722、補助操作用のディープインディゴ■#314B70を合わせる例が考えられます。

■#FAF7FCはごく淡い紫みを含む明色で、テンプレートのサムネイル周囲を軽く保ちながらマゼンタの鮮やかさを受け止められます。■#1B1722は紫みを少し含む低彩度の濃色なので、テンプレート名、用途説明、サイズ情報などを主役色より落ち着いて整理できます。■#314B70は青寄りの濃色で、マゼンタから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「詳細を見る」などの補助操作を主要操作と分けやすくなります。

テンプレート一覧では、ピュア・マゼンタを選択中のカテゴリと主要CTAに集める

実装では、ページ全体やテンプレートカードの背景を■#FAF7FCにし、「おすすめ」バッジ、選択中のカテゴリ、主要なCTA（Call to Action、テンプレート適用など次の行動を促す操作）の背景へ■#FF00BFを使います。その上の文字を■#1B1722にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約5.04:1です。通常サイズの文字に必要な4.5:1以上を満たします。

■#FF00BFと■#FAF7FCのコントラスト比は約3.29:1なので、ボタンや選択中カテゴリの色面を明るい背景から識別する用途では3:1以上を確保できます。本文やテンプレート名は■#1B1722にし、背景との比率は約16.59:1です。補助の「詳細を見る」ボタンは■#314B70を背景にし、その上の文字を■#FFFFFFにすると約8.86:1、ページ背景との色面の差も約8.34:1あります。

■#FF00BFと■#FFFFFFは約3.50:1なので、マゼンタ背景へ白の通常文字を置くのは避けます。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）を色の境界で識別させる場合は隣接色との3:1以上が基準になります。

華やかさを保つなら、マゼンタとインディゴの色差だけで選択状態を伝えない

■#FF00BFと■#314B70のコントラスト比は約2.53:1です。そのため、「選択中」と「未選択」や「おすすめ」と「通常」をこの2色の隣接だけで示すのは避け、カテゴリ名の文字、チェックマーク、太めの枠線、ラベルなども併用します。テンプレートのサムネイル自体に赤紫やピンクが多い場合も、カード全面へマゼンタを広げるより、■#FAF7FCの余白を残す方が、作品画像と操作を分けやすくなります。

HueRollでは■#FF00BFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。