ライト・ローズに合う色は？明るいローズを可憐に引き立てる配色【#F288AF】

ライト・ローズ（■#F288AF）は、赤みを含んだ明るくやわらかなローズです。読書記録アプリの本棚画面では、選択中の本、主要な「読了にする」ボタン、お気に入りの読書メモなどに絞って使うと、明るいローズを可憐に見せながら、書名や著者名、読書状況を整理しやすくなります。ここでは、ディーププラム、ペーパーホワイト、ミューテッドセージを組み合わせます。

ディーププラムで輪郭を作り、白とセージでローズを軽く支える

■#F288AFには、現在読んでいる本のサマリーパネルや主要操作の背景用のディーププラム■#34243A、本棚一覧や読書メモの背景用のペーパーホワイト■#FFF8FB、メモ表示や本棚切り替えなどの補助操作用のミューテッドセージ■#52706Aを合わせる例が考えられます。

■#34243Aは紫みを含む低彩度の濃色で、淡いローズの輪郭を締めながら書名や説明を落ち着いて支えられます。■#FFF8FBはごく淡いローズみのある白なので、本棚やメモ欄の広い面を軽く保てます。■#52706Aは青緑寄りの落ち着いた色で、ローズから色相（赤・青・緑など色みの違い）を離しながら、「読書メモを見る」「本棚を切り替える」などの補助操作を主要な読了操作と分けやすくします。

読書記録では、ライト・ローズを選択中の本と読了操作に集める

実装では、本棚一覧と読書メモの背景を■#FFF8FBにし、書名、著者名、読書開始日、メモ本文を■#34243Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.75:1です。

現在読んでいる本のサマリーパネルを■#34243Aにし、主要な「読了にする」ボタン背景やお気に入りメモの短いアクセントへ■#F288AFを使います。ボタン上の文字とアイコンを■#34243Aにすると約6.11:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ローズのボタン面とディーププラムのパネルも約6.11:1あるため、主要操作を暗い背景から区別できます。

明るい■#FFF8FBの本棚で、選択中の本へ■#F288AFを使う場合、2色の差は約2.25:1しかありません。そのため色面だけで選択状態を示さず、■#34243Aの枠線とチェック表示を併用します。「読書メモを見る」「本棚を切り替える」などの補助ボタンは■#52706Aを背景にし、その上の文字を■#FFFFFFにすると約5.41:1です。ミューテッドセージとペーパーホワイトの差も約5.17:1あります。

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

可憐に見せるなら、白文字や読書状態の色分けだけに頼らない

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

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