ブライト・マゼンタに合う色は？鮮やかな赤紫を印象的にまとめる組み合わせ【#FF3DCF】

ブライト・マゼンタ（■#FF3DCF）は、赤と紫の間にある、明るく鮮やかな赤紫です。SNS投稿の予約管理画面（公開日時を設定し、投稿予定を並べて管理する画面）では、選択中の投稿カード、主要な「予約する」ボタン、現在選んでいる公開日時のアクセントなどに絞って使うと、鮮やかな赤紫を印象的にまとめながら投稿内容や日時を整理しやすくなります。ここでは、ライラックホワイト、インクプラム、ディープティールを組み合わせます。

ライラックホワイトを土台にし、インクプラムとティールで赤紫を整理する

■#FF3DCFには、投稿一覧や編集パネルの背景用のライラックホワイト■#FAF8FC、投稿文・公開日時・枠線用のインクプラム■#271A30、下書き保存やプレビューなどの補助操作用のディープティール■#2F5A63を合わせる例が考えられます。

■#FAF8FCはごく淡い紫みを含む明色で、投稿カードや編集欄の広い面を軽く保てます。■#271A30は赤紫をわずかに含む低彩度の濃色なので、投稿文、アカウント名、公開日時、補足説明などをマゼンタより落ち着いて整理できます。■#2F5A63は青緑寄りの低彩度色で、マゼンタから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「下書き保存」「プレビュー」などの補助操作を主要な予約操作と分けやすくなります。

SNS投稿の予約管理では、ブライト・マゼンタを選択中の投稿と予約操作に使う

実装では、投稿一覧と未選択カードの背景を■#FAF8FCにし、投稿文、アカウント名、公開日時、説明文を■#271A30にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.58:1です。

選択中の投稿カード、主要な「予約する」ボタン背景、現在選んでいる公開日時の短いアクセントへ■#FF3DCFを使い、その上の文字を■#271A30にすると約5.34:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#FF3DCFと■#FAF8FCの差は約2.92:1なので、明るい背景上ではマゼンタの塗りだけでボタンや選択カードの境界を示さず、■#271A30の枠線やアイコンを併用します。この枠線と■#FAF8FCの背景は約15.58:1です。

「下書き保存」「プレビュー」などの補助ボタンは■#2F5A63を背景にし、その上の文字を■#FFFFFFにすると約7.60:1です。ディープティールとページ背景の差も約7.20:1あります。

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

印象的にまとめるなら、白文字やマゼンタとティールだけで状態を伝えない

■#FF3DCFと■#FFFFFFのコントラスト比は約3.08:1なので、マゼンタ背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンの文字には■#271A30を使います。

また、■#FF3DCFと■#2F5A63の差は約2.47:1なので、「予約済み」「下書き」「公開済み」「エラー」をこの2色だけで分けるのは避けます。状態名の文字、チェックマーク、時計アイコン、エラーメッセージなども併用します。HueRollでは■#FF3DCFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。