リッチ・マゼンタに合う色は？深い赤紫を艶やかに際立たせる組み合わせ【#B8148F】

リッチ・マゼンタ（■#B8148F）は、赤紫の鮮やかさを残しながら明るさを抑えた濃いマゼンタです。Webサイトでは、コスメECの商品詳細や色選択ページで、選択中のカラー名、重要な見出し、購入へ進む主要ボタンなどに使うと、商品写真を主役にしながら濃い赤紫を印象的に見せやすくなります。ただし、商品自体にピンクや紫が多い場合は、画面全体へマゼンタを広げると写真との境界が曖昧になりやすいため、使う場所を絞ることが大切です。ここでは、パールホワイト、ディープオーベルジン、ミスティティールを合わせ、リッチ・マゼンタを艶やかに際立たせる配色を考えます。

パールホワイトを土台にし、ティールで赤紫と色相差を作る

■#B8148Fには、背景用のパールホワイト■#FFF7FC、本文や補助文字用のディープオーベルジン■#30252F、補助操作用のミスティティール■#AFC8C4を合わせる例が考えられます。

■#FFF7FCはごく淡い赤紫を含む明色で、マゼンタとのつながりを残しながら大きな明度差を作れます。■#30252Fは紫みをわずかに含む濃色なので、商品名、価格、容量、説明文などを落ち着いて整理できます。■#AFC8C4は青緑寄りの低彩度色で、赤紫から色相を離しつつ鮮やかさを抑えているため、リッチ・マゼンタと競合しにくい補助色として使えます。

色選択ページでは、リッチ・マゼンタを選択結果と主要操作に集める

実装では、商品詳細や色見本一覧の広い背景を■#FFF7FCにし、選択中のカラー名、重要な見出し、主要な「カートに追加」ボタン背景などへ■#B8148Fを使います。その上の文字は■#FFF7FCにすると、通常サイズの文字に必要なコントラストを確保できます。商品説明、価格、在庫案内は■#30252Fへ分けると、マゼンタを重要な場所へ限定できます。

UI（ユーザーが操作するボタンや色選択などの画面部品）の補助操作には、■#AFC8C4を「成分を見る」などのボタン背景や情報チップに使い、文字と枠線を■#30252Fにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#B8148Fと■#FFF7FCは約5.65:1、■#30252Fと■#FFF7FCは約13.95:1、■#30252Fと■#AFC8C4は約8.30:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#B8148Fと■#AFC8C4は約3.36:1なので、隣接する意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

艶やかに見せるなら、商品写真と選択状態をマゼンタだけに頼らせない

■#AFC8C4と■#FFF7FCのコントラスト比は約1.68:1です。そのため、明るい背景上でティールの面だけを使ってボタンやチップの存在を示すのは避け、■#30252Fの枠線や文字を組み合わせます。

また、色見本の「選択中」「未選択」や在庫状態は、マゼンタとティールの色分けだけで伝えず、チェックマーク、状態名の文字、太めの枠線なども併用します。商品写真に赤紫が多い場合は、ページ全体へさらに■#B8148Fを広げるより、■#FFF7FCの余白を十分に残す方が、写真と操作を分けやすくなります。HueRollでは■#B8148FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。