ペール・マゼンタに合う色は？淡い赤紫を上品に見せる組み合わせ【#EDC9E4】

ペール・マゼンタ（■#EDC9E4）は、赤紫を淡くやわらげた色です。クリエイターのポートフォリオ作品詳細ページでは、作品の要点をまとめる紹介パネルや主要な「この作品について問い合わせる」ボタンなどに範囲を絞って使うと、淡い赤紫を主役にしながら上品にまとめやすくなります。ここでは、ディーププラム、パールホワイト、ミューテッドティールを組み合わせます。

ディーププラムで赤紫を締め、白に近い背景と青緑で役割を分ける

■#EDC9E4には、見出しや本文用のディーププラム■#4C3348、作品説明や実績情報の背景用のパールホワイト■#FBF8FB、制作過程や関連情報への補助操作用のミューテッドティール■#4F6B68を合わせる例が考えられます。

■#4C3348は赤紫を含む暗い色で、ペール・マゼンタと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FBF8FBはごく淡い紫みを含む白に近い色なので、制作背景、担当範囲、使用ツールなど情報量の多い面を軽く保てます。■#4F6B68は落ち着いた青緑系で、赤紫から色相を離し、「制作過程を見る」「関連実績を見る」などの補助操作を主要な問い合わせ操作と分ける候補になります。

作品詳細ページでは、紹介パネルと問い合わせボタンにペール・マゼンタを使う

ページと通常の実績情報カードを■#FBF8FBにし、作品名、制作期間、担当範囲、説明文を■#4C3348で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.63:1です。

作品のコンセプトや成果をまとめる紹介パネルを■#EDC9E4にし、その上の見出しと本文を■#4C3348にすると、コントラスト比は約7.51:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

主要な「この作品について問い合わせる」ボタンにも■#EDC9E4を使い、文字とアイコンを■#4C3348にします。ただし、ペール・マゼンタとページ背景の■#FBF8FBの差は約1.42:1です。淡い色面だけでボタンの境界を示すのではなく、■#4C3348の枠線を付けます。この枠線とページ背景のコントラスト比は約10.63:1です。

「制作過程を見る」などの補助ボタンは■#4F6B68を背景にし、その上を■#FFFFFFの文字にすると約5.78:1です。ミューテッドティールとパールホワイトの差も約5.48:1あります。

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

上品に見せるなら、白文字や淡い色面だけで操作を示さない

■#EDC9E4と■#FFFFFFのコントラスト比は約1.49:1です。そのため、ペール・マゼンタ背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、紹介パネルや主要ボタンの文字を■#4C3348にします。

また、「公開中」「制作中」「非公開」などの作品状態を色だけで伝えず、状態名の文字やアイコンも併用します。ペール・マゼンタをページ全体へ広げるより、作品の要点をまとめる面や主要な問い合わせ操作など用途を絞って使い、■#FBF8FBの余白を広く取ると、淡い赤紫を主役にしながら整った見え方に調整しやすくなります。HueRollでは■#EDC9E4をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。