ビビッド・ローズに合う色は？鮮やかなローズを華やかに引き立てる配色【#FF1F73】

ビビッド・ローズ（■#FF1F73）は、赤みを強く含む非常に鮮やかなローズです。ライブ配信イベントの告知・参加登録ページでは、イベント名のアクセント、選択中のセッション、主要な「参加登録する」ボタンなどへ使うと、鮮やかなローズを華やかな主役色として見せやすくなります。ただし、ローズを見出し・ボタン・状態表示へ無制限に広げると、どこが最優先なのか分かりにくくなります。ここでは、ミッドナイトプラム、パールブラッシュ、ディープティールを組み合わせ、華やかさを保ちながら役割を整理します。

ミッドナイトプラムでローズを締め、明るいブラッシュとティールで役割を分ける

■#FF1F73には、本文・ボタン文字・枠線用のミッドナイトプラム■#201722、ページやセッションカード背景用のパールブラッシュ■#FFF4F8、アーカイブや詳細表示などの補助操作用のディープティール■#235B5Bを合わせる例が考えられます。

■#201722は赤紫をわずかに含む低彩度の濃色で、ローズとの色相のつながりを残しながら文字や輪郭を引き締められます。■#FFF4F8はごく淡いローズ系の明色なので、出演者情報や開催時刻などを読む面を軽く保てます。■#235B5Bは青緑寄りの濃色で、ローズから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「アーカイブを見る」「詳細を確認」などの補助操作を主要な参加登録と分けやすくなります。

ライブ配信イベントでは、ビビッド・ローズをイベント名と主要登録操作に集める

実装では、ページ全体とセッションカードの背景を■#FFF4F8にし、イベント名の一部、選択中のセッション、主要な「参加登録する」ボタン背景へ■#FF1F73を使います。その上の文字・アイコンを■#201722にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約4.72:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

開催日時、出演者名、配信条件、補足説明は■#201722にし、■#FFF4F8との比率は約16.19:1です。「アーカイブを見る」などの補助ボタンは■#235B5Bを背景にし、その上の文字を■#FFFFFFにすると約7.72:1です。ディープティールとページ背景の差も約7.19:1あります。

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

華やかさを保つなら、白文字とローズだけの選択表示に頼らない

■#FF1F73と■#FFFFFFのコントラスト比は約3.69:1なので、通常サイズの白文字には4.5:1へ届きません。そのため、ローズのボタン文字には■#201722を使います。一方、■#FF1F73と■#FFF4F8の差は約3.43:1あるため、ローズの色面は明るいページ背景から区別できます。

また、「選択中」「受付中」「配信中」など異なる状態をすべてローズだけで表さず、状態名の文字、下線、チェックマーク、時刻表示なども併用します。■#FF1F73と■#235B5Bのコントラスト比は約2.09:1なので、この2色を隣接させるだけで状態差を示す用途には向きません。HueRollでは■#FF1F73をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。