ブリリアント・ローズに合う色は？鮮やかなローズを明るく魅力的に見せる配色【#F7649B】

ブリリアント・ローズ（■#F7649B）は、赤みを含む明るく鮮やかなローズです。オンラインワードローブ（手持ちの服を登録し、組み合わせを考える画面）では、選択中のアイテム、主要な「コーディネートに追加」ボタン、着こなしプレビューの短いアクセントなどに絞って使うと、鮮やかなローズを明るく魅力的に見せながら服の情報や操作を整理しやすくなります。ここでは、ディーププラムブラック、パールホワイト、ミューテッドアクアを組み合わせます。

暗いプラムを土台にし、白とアクアでローズの明るさを支える

■#F7649Bには、画面全体やアイテム一覧の背景用のディーププラムブラック■#211D27、アイテム名・ブランド・サイズ・説明文用のパールホワイト■#F9F7FA、クローゼット表示や着用履歴などの補助操作用のミューテッドアクア■#78A9A3を合わせる例が考えられます。

■#211D27は紫みをわずかに含む暗い色で、明るいローズとの明度差を大きく作れます。■#F9F7FAは白に近い明色なので、アイテム名、ブランド、サイズ、メモなどの通常情報をローズと競合させず表示できます。■#78A9A3は青緑寄りで鮮やかさを抑えた色です。ローズから色相（赤・青・緑など色みの違い）を離しているため、「クローゼットを見る」「着用履歴を確認」などの補助操作を主要な追加操作と分けやすくなります。

ワードローブでは、ブリリアント・ローズを選択中の服と主要操作に使う

実装では、画面全体と未選択のアイテムカード背景を■#211D27にし、アイテム名、ブランド、サイズ、説明文を■#F9F7FAにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.53:1です。

選択中の服のカード、主要な「コーディネートに追加」ボタン背景、プレビュー内の短いアクセントへ■#F7649Bを使い、その上の文字とアイコンを■#211D27にすると約5.71:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、ローズの面と画面背景の差も同じ約5.71:1あるため、選択カードや主要ボタンを暗い背景から識別するための3:1以上の差も確保できます。

「クローゼットを見る」「着用履歴を確認」などの補助ボタンは■#78A9A3を背景にし、その上の文字を■#211D27にすると約6.30:1です。ミューテッドアクアと画面背景の差も約6.30:1あります。

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

明るく見せるなら、白文字やローズとアクアだけの状態表示に頼らない

■#F7649Bと■#FFFFFFのコントラスト比は約2.90:1なので、ローズ背景へ通常サイズの白文字を置く使い方は避けます。また、明るいカードを使う場合、■#F7649Bと■#F9F7FAの差は約2.72:1なので、細いローズの枠線だけで重要な選択状態を示すのも避け、濃い文字、チェックマーク、枠線の太さなどを併用します。

さらに、■#F7649Bと■#78A9A3の差は約1.10:1です。「選択中」「お気に入り」「コーディネートに追加済み」などをこの2色だけで分けず、状態名の文字、ハートやチェックのアイコン、選択枠なども使います。HueRollでは■#F7649BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。