ペール・ローズに合う色は？やさしいローズを温かみのある印象にする配色【#EDC9D7】

ペール・ローズ（■#EDC9D7）は、赤みのあるローズを淡くやわらげた色です。ハンドメイド雑貨の商品詳細ページでは、商品の特徴をまとめる小さなポイント欄や主要な「カートに入れる」ボタンなどに範囲を絞って使うと、ローズのやさしさを残しながら温かみのある印象にまとめやすくなります。ここでは、ディープローズブラウン、ウォームクリーム、ミューテッドオリーブを組み合わせます。

濃いローズブラウンで文字を締め、クリームとオリーブで自然にまとめる

■#EDC9D7には、見出しや本文用のディープローズブラウン■#523640、商品説明や配送情報カードの背景用のウォームクリーム■#FCF8F5、素材やお手入れ方法などの補助操作用のミューテッドオリーブ■#66705Aを合わせる例が考えられます。

■#523640は赤紫を含む暗い茶色で、ペール・ローズと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FCF8F5はわずかに暖色を含む白に近い色なので、商品説明、サイズ、配送日など情報量の多い面を軽く保てます。■#66705Aは落ち着いたオリーブ系で、ローズから色相を離し、「素材を見る」「お手入れ方法を確認する」などの補助操作を購入操作と分ける候補になります。

商品詳細ページでは、ポイント欄と購入ボタンにペール・ローズを使う

ページと通常の商品情報カードを■#FCF8F5にし、商品名、価格、説明文、配送情報を■#523640で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.14:1です。

「手作業のため一点ずつ風合いが異なります」などのポイント欄を■#EDC9D7にし、その上の見出しと本文を■#523640にすると、コントラスト比は約7.11:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

主要な「カートに入れる」ボタンにも■#EDC9D7を使い、文字とアイコンを■#523640にします。ただし、ペール・ローズとページ背景の■#FCF8F5の差は約1.43:1です。淡い色面だけでボタンの境界を示すのではなく、■#523640の枠線を付けます。この枠線とページ背景のコントラスト比は約10.14:1です。

「素材を見る」「お手入れ方法を確認する」などの補助ボタンは■#66705Aを背景にし、その上を■#FFFFFFの文字にすると約5.21:1です。ミューテッドオリーブとウォームクリームの差も約4.93:1あります。

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

温かみを保つなら、白文字や淡い色面だけで役割を伝えない

■#EDC9D7と■#FFFFFFのコントラスト比は約1.51:1です。そのため、ペール・ローズ背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、ポイント欄や主要ボタンの文字を■#523640にします。

また、「カートに追加済み」「在庫あり」「残りわずか」などの状態を色だけで伝えず、状態名の文字やアイコン、必要に応じて在庫数も併用します。ペール・ローズをページ全体へ広げるより、商品の特徴を伝える面や主要な購入操作など用途を絞って使い、■#FCF8F5の余白を広く取ると、やさしいローズを主役にしながら温かみのある見え方に調整しやすくなります。HueRollでは■#EDC9D7をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。