ライト・パープルに合う色は？明るい紫を華やかに引き立てる配色例【#E488F2】

ライト・パープル（■#E488F2）は、赤みを含んだ明るくやわらかな紫です。旅行準備の持ち物チェックリストでは、選択中のカテゴリ、主要な「チェックを保存」ボタン、準備完了数の短いアクセントなどに絞って使うと、明るい紫を華やかに見せながら、持ち物名や数量、準備状況を整理しやすくなります。ここでは、ディープティール、ソフトアイボリー、ディープアンバーを組み合わせます。

ディープティールで紫を引き締め、アイボリーとアンバーで役割を分ける

■#E488F2には、選択内容をまとめるサマリーパネル用のディープティール■#213A3F、持ち物一覧やメモ欄の背景用のソフトアイボリー■#FBF8F3、旅行情報や補助設定を開くボタン用のディープアンバー■#6D4D1Fを合わせる例が考えられます。

■#213A3Fは青緑寄りの暗い低彩度色で、明るい紫との明度差を大きくできます。■#FBF8F3は黄みをわずかに含む明色なので、服、充電器、書類などの一覧を読む面を軽く保てます。■#6D4D1Fは落ち着いた黄みの濃色で、紫から色相（赤・青・緑など色みの違い）を離しながら、「旅程を確認」「リスト設定を開く」などの補助操作を主要な保存操作と分けやすくします。

持ち物チェックでは、ライト・パープルを選択中カテゴリと主要操作に集める

実装では、持ち物一覧とメモ欄の背景を■#FBF8F3にし、持ち物名、数量、補足メモを■#213A3Fにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約11.38:1です。

選択したカテゴリのサマリーパネルを■#213A3Fにし、主要な「チェックを保存」ボタン背景、現在のカテゴリ名、準備完了数の短いアクセントへ■#E488F2を使います。ボタン上の文字とアイコンを■#213A3Fにすると約5.23:1で、通常サイズの文字に必要な4.5:1以上を確保できます。紫のボタン面とディープティールのパネルも約5.23:1あるため、主要操作を暗い背景から区別できます。

明るい■#FBF8F3の一覧で、選択中カテゴリやチェック済み項目へ■#E488F2を使う場合、2色の差は約2.18:1しかありません。そのため色面だけで状態を示さず、■#213A3Fの枠線、チェックアイコン、項目名の文字を併用します。「旅程を確認」「リスト設定を開く」などの補助ボタンは■#6D4D1Fを背景にし、その上の文字を■#FFFFFFにすると約7.69:1です。ディープアンバーとソフトアイボリーの差も約7.26:1あります。

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

華やかに見せるなら、白文字や準備状態の色分けだけに頼らない

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

また、「未準備」「準備中」「準備完了」などを色だけで区別せず、状態名の文字、チェックアイコン、完了数を併用します。HueRollでは■#E488F2をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。