ブライト・ローズに合う色は？鮮明なローズを明るく華やかに見せる配色【#FF3D86】

ブライト・ローズ（■#FF3D86）は、赤みの強い明るく鮮やかなローズです。フォトブックの編集画面では、選択中のページ枠、主要な「プレビュー」ボタン、表紙や見開きのアクセントなどに絞って使うと、鮮明なローズを明るく華やかに見せながら写真や編集情報を整理しやすくなります。ここでは、ブラッシュホワイト、インクプラム、ミューテッドティールを組み合わせます。

ブラッシュホワイトを土台にし、インクプラムとティールで華やかさを整える

■#FF3D86には、編集キャンバスやサイドパネルの背景用のブラッシュホワイト■#FFF7FA、ページ番号・説明・ボタン文字用のインクプラム■#24172A、レイアウト変更や設定などの補助操作用のミューテッドティール■#315E6Eを合わせる例が考えられます。

■#FFF7FAはごく淡い赤みを含む明色で、写真の周囲や編集パネルを軽く保てます。■#24172Aは赤紫をわずかに含む低彩度の濃色なので、ページ番号、写真枚数、説明文、入力ラベルなどをローズより落ち着いて整理できます。■#315E6Eは青緑寄りの低彩度色で、ローズから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「レイアウトを変更」「設定を開く」などの補助操作を主要なプレビュー操作と分けやすくなります。

フォトブック編集では、ブライト・ローズを選択中ページとプレビュー操作に使う

実装では、編集キャンバスとサイドパネル背景を■#FFF7FAにし、ページ番号、写真枚数、説明文、入力ラベルを■#24172Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約16.20:1です。

選択中のページ枠、主要な「プレビュー」ボタン背景、表紙設定の短いアクセントへ■#FF3D86を使い、その上の文字を■#24172Aにすると約5.09:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、■#FF3D86と■#FFF7FAの差は約3.18:1なので、ボタンや選択枠の色面を明るい背景から識別するための視覚情報として3:1以上の差があります。

「レイアウトを変更」「設定を開く」などの補助ボタンは■#315E6Eを背景にし、その上の文字を■#FFFFFFにすると約7.10:1です。ミューテッドティールとページ背景の差も約6.74:1あります。

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

華やかに見せるなら、白文字やローズとティールだけの状態表示に頼らない

■#FF3D86と■#FFFFFFのコントラスト比は約3.35:1なので、ローズ背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンの文字には■#24172Aを使います。

また、■#FF3D86と■#315E6Eの差は約2.12:1なので、「選択中」「未選択」や「保存済み」「未保存」をこの2色の違いだけで示すのは避けます。ページ名、チェックマーク、枠線、保存状態の文字なども併用します。写真そのものにローズ系の色が多い場合も、ローズを広い背景へ増やすより、■#FFF7FAの余白を残す方が写真と操作を分けやすくなります。HueRollでは■#FF3D86をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。