ソフト・マゼンタに合う色は？まろやかな赤紫を上品にまとめる組み合わせ【#EDABDD】

ソフト・マゼンタ（■#EDABDD）は、赤紫をやわらかく明るくした色です。イベントの席次表・テーブル配置エディタでは、選択中のテーブル、主要な「配置を保存」ボタン、ゲスト数の短いアクセントなどに絞って使うと、赤紫の華やかさを残しながら、落ち着いた面積配分で上品にまとめやすくなります。ここでは、ディープオーベルジン、ウォームアイボリー、ミューテッドティールを組み合わせます。

ディープオーベルジンで赤紫を締め、アイボリーとティールで役割を分ける

■#EDABDDには、席次表の概要や選択内容をまとめるディープオーベルジン■#39283A、テーブルやゲストカードの背景用のウォームアイボリー■#FAF8F4、ゲスト一覧や表示設定などの補助操作用のミューテッドティール■#49636Aを合わせる例が考えられます。

■#39283Aは赤紫を含む暗い低彩度色で、ソフト・マゼンタのやわらかさを残しながら文字や輪郭を引き締められます。■#FAF8F4は少し黄みを含む明色なので、テーブル名、ゲスト名、人数、メモなど情報量の多い面を軽く保てます。■#49636Aは落ち着いた青緑で、赤紫から色相（赤・青・緑など色みの違い）を離しながら、「ゲスト一覧を見る」「表示設定を変更」などの補助操作を主要な保存操作と分けやすくします。

席次表エディタでは、ソフト・マゼンタを選択中のテーブルと主要操作に集める

テーブルとゲストカードの背景を■#FAF8F4にし、テーブル名、ゲスト名、人数、補足メモを■#39283Aで表示します。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約12.87:1です。

席次表の概要をまとめるサマリーパネルを■#39283Aにし、主要な「配置を保存」ボタン背景、選択中のテーブル、配置済み人数の短いアクセントへ■#EDABDDを使います。ボタン上の文字とアイコンを■#39283Aにするとコントラスト比は約7.46:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ソフト・マゼンタのボタン面とディープオーベルジンのパネルも約7.46:1あるため、暗い面の中で主要操作を区別できます。

一方、■#FAF8F4のキャンバス上で、選択中のテーブルを■#EDABDDだけで塗ると、2色のコントラスト比は約1.73:1です。色面だけでは選択状態を十分に識別しにくいため、■#39283Aの枠線、「選択中」の文字、チェックアイコンを併用します。「ゲスト一覧を見る」「表示設定を変更」などの補助ボタンは■#49636Aを背景にし、その上を■#FFFFFFの文字にすると約6.41:1です。ミューテッドティールとウォームアイボリーの差も約6.04:1あります。

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

上品にまとめるなら、白文字や色だけの選択表示に頼らない

■#EDABDDと■#FFFFFFのコントラスト比は約1.83:1なので、ソフト・マゼンタ背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#39283Aにします。

また、「未配置」「選択中」「配置済み」「確認が必要」などを色だけで区別せず、状態名の文字、人数、チェックや注意アイコンを併用します。ソフト・マゼンタを広い背景へ使うより、選択状態やボタンなど面積を絞った場所へ使い、■#FAF8F4の余白を広く取ると、落ち着いた見え方に調整しやすくなります。HueRollでは■#EDABDDをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。