ブリリアント・レッドに合う色は？鮮やかな赤を華やかに引き立てる配色例【#F76464】

ブリリアント・レッド（■#F76464）は、明るさを保った鮮やかな赤です。デジタル招待状の出欠回答ページでは、イベント名の短いアクセント、主要な「回答を送信」ボタン、選択中の出欠項目などへ絞って使うと、鮮やかな赤を華やかに見せながら、日時や会場、回答内容を整理しやすくなります。ここでは、ディーププラム、ブラッシュホワイト、ミューテッドティールを組み合わせます。

ディーププラムで赤を引き締め、淡い背景とティールで華やかさを整える

■#F76464には、招待状のタイトル帯や回答確認パネル用のディーププラム■#2B2030、日時・会場・出欠選択肢の背景用のブラッシュホワイト■#FFF6F4、地図表示や予定表への追加などの補助操作用のミューテッドティール■#436B68を合わせる例が考えられます。

■#2B2030は紫みを含む低彩度の濃色で、鮮やかな赤を引き締めながらタイトルや本文を落ち着いて支えられます。■#FFF6F4はごく淡い赤みを含む明色なので、招待状らしい明るさを残しながら情報量の多い面を軽く保てます。■#436B68は青緑寄りの落ち着いた色で、赤から色相（赤・青・緑など色みの違い）を離しながら、「地図を見る」「予定表に追加」などの補助操作を主要な回答操作と分けやすくします。

出欠回答では、ブリリアント・レッドをイベント名と送信操作に集める

実装では、日時、会場、案内文、出欠選択肢の背景を■#FFF6F4にし、本文や選択肢の文字を■#2B2030にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.60:1です。

回答内容を確認するパネルを■#2B2030にし、主要な「回答を送信」ボタン背景とイベント名の短いアクセントへ■#F76464を使います。ボタン上の文字とアイコンを■#2B2030にすると約5.15:1で、通常サイズの文字に必要な4.5:1以上を確保できます。赤いボタン面とディーププラムのパネルも約5.15:1あるため、主要操作を暗い面から区別できます。

明るい■#FFF6F4の選択肢で、選択中の「参加」「欠席」「未定」へ■#F76464を使う場合、2色の差は約2.84:1です。意味のある選択状態を色面だけで示すには3:1へ届かないため、■#2B2030の枠線、ラジオボタン、チェック表示を併用します。「地図を見る」「予定表に追加」などの補助ボタンは■#436B68を背景にし、その上の文字を■#FFFFFFにすると約5.93:1です。ミューテッドティールとブラッシュホワイトの差も約5.57:1あります。

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

華やかさを保つなら、白文字や出欠状態の色分けだけに頼らない

■#F76464と■#FFFFFFのコントラスト比は約3.02:1なので、赤背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#2B2030にします。

また、「参加」「欠席」「未定」を色だけで区別せず、選択肢の文字、ラジオボタン、チェック表示を併用します。HueRollでは■#F76464をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。