ピュア・ローズに合う色は？鮮明なローズを印象的に引き立てる配色【#FF0060】

ピュア・ローズ（■#FF0060）は、赤みの強い鮮明なローズです。カルチャー系オンラインマガジンの特集ページでは、特集タイトルのアクセント、選択中のカテゴリ、主要な「記事を読む」ボタンなどに使うと、鮮やかなローズを印象的に見せながら誌面のような強弱を作りやすくなります。明るい背景へ広く使うより、暗い面に絞って配置すると色の存在感を保ちやすくなります。ここでは、インクブラック、パールホワイト、ミストアクアを合わせます。

インクブラックを土台にし、白とアクアでローズの鮮やかさを支える

■#FF0060には、背景用のインクブラック■#0F1117、本文や記事情報用のパールホワイト■#F7F5F8、補助操作用のミストアクア■#A8D8D2を合わせる例が考えられます。

■#0F1117は青みをわずかに含むほぼ黒の背景色で、ローズとの明度差を作りながら写真や見出しを引き締められます。■#F7F5F8は白に近い明色なので、記事概要、著者名、公開日など長く読む情報を暗い背景上で整理できます。■#A8D8D2は青緑寄りの明色で、ローズから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「バックナンバーを見る」などの補助操作へ静かな変化を加えられます。

特集ページでは、ピュア・ローズを見出しアクセントと主要CTAに集める

実装では、ページ全体の背景を■#0F1117にし、特集タイトルの一部、選択中のカテゴリ、主要なCTA（Call to Action、記事閲覧など次の行動を促す操作）の背景へ■#FF0060を使います。その上の文字を■#0F1117にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約4.87:1です。通常サイズの文字に必要な4.5:1以上を満たします。また、■#FF0060と背景の■#0F1117も約4.87:1なので、主要ボタンや選択中カテゴリの色面も暗い背景から区別できます。

本文、著者名、公開日は■#F7F5F8にし、背景との比率は約17.41:1です。補助の「バックナンバーを見る」ボタンは■#A8D8D2を背景にし、その上の文字を■#0F1117にすると約12.06:1です。一方、■#FF0060と■#FFFFFFは約3.87:1なので、ローズ背景へ白の通常文字を置くのは避けます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンなどの画面部品）を色の境界で識別させる場合は隣接色との3:1以上が基準になります。

印象を強めるなら、ローズとアクアの色差だけで選択状態を伝えない

■#FF0060と■#A8D8D2のコントラスト比は約2.48:1です。そのため、「選択中」と「未選択」をこの2色の隣接だけで示すのは避け、カテゴリ名の文字、下線、チェックマーク、枠線なども併用します。写真や表紙画像にローズ系の色が多い場合も、背景へさらにローズを広げるより、■#0F1117の余白を十分に残す方が画像と操作を分けやすくなります。

HueRollでは■#FF0060をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。