ソフト・レッドに合う色は？やわらかな赤を心地よく見せる配色例【#EDABAB】

ソフト・レッド（■#EDABAB）は、鮮やかな赤をやわらかく落ち着かせた色です。オンライン招待状のデザイン編集画面では、選択中のデザインや主要な「変更を保存」ボタンなどに範囲を絞って使うと、赤の存在感を残しながら心地よくまとめやすくなります。ここでは、ディープベリー、ブラッシュホワイト、スレートブルーを組み合わせます。

ディープベリーで赤を締め、淡い背景と青みで役割を分ける

■#EDABABには、見出しや本文用のディープベリー■#4B2F36、編集画面やプレビュー背景用のブラッシュホワイト■#FCF7F7、プレビュー確認などの補助操作用のスレートブルー■#4F6172を合わせる例が考えられます。

■#4B2F36は赤紫を含む暗い色で、ソフト・レッドと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FCF7F7はごく淡い赤みを含む白に近い色なので、宛名、日時、会場、メッセージなど情報量の多い面を軽く保てます。■#4F6172は落ち着いた青みのグレーで、赤から色相を離し、「プレビューを見る」「送信テストをする」などの補助操作を主要な保存操作と分ける候補になります。

招待状の編集画面では、選択中のデザインと主要ボタンにソフト・レッドを使う

ページとプレビュー背景を■#FCF7F7にし、宛名、日時、会場、説明文を■#4B2F36で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.25:1です。

選択中のデザインカードや主要な「変更を保存」ボタンの背景に■#EDABABを使い、その上の文字とアイコンを■#4B2F36にすると、コントラスト比は約6.26:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#EDABABと■#FCF7F7の差は約1.80:1です。淡い色面だけでは選択中のデザインを見分けにくいため、■#4B2F36の枠線、チェックアイコン、「選択中」の文字を併用します。「プレビューを見る」などの補助ボタンは■#4F6172を背景にし、その上を■#FFFFFFの文字にすると約6.39:1です。スレートブルーとブラッシュホワイトの差も約6.02:1あります。

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

心地よく見せるなら、白文字や色だけの選択表示に頼らない

■#EDABABと■#FFFFFFのコントラスト比は約1.91:1です。そのため、ソフト・レッド背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#4B2F36にします。

また、「選択中」「未保存」「送信済み」などの状態を色だけで伝えず、状態名の文字、チェックアイコン、必要に応じて更新時刻も併用します。ソフト・レッドをページ全体へ広げるより、選択中のデザインや主要ボタンなど面積を絞った場所へ使い、■#FCF7F7の余白を広く取ると、やわらかな赤を主役にしながら落ち着いて整理しやすくなります。HueRollでは■#EDABABをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。