ストロング・マゼンタに合う色は？力強い赤紫を鮮やかに見せる組み合わせ【#DA0BA6】

ストロング・マゼンタ（■#DA0BA6）は、鮮やかさの強い赤紫で、画面の中に明確なアクセントを作りやすい色です。Webサイトでは、音楽イベントや期間限定企画の告知ページで、開催日のバッジ、イベント名の一部、主要な「チケットを見る」ボタンなどに使うと、赤紫を主役にしながら情報の優先順位を整理しやすくなります。ただし、強い色を背景全体へ広げると写真や文字と競合しやすいため、明るい背景と濃い文字色を土台にし、マゼンタを重要な場所へ絞るのが扱いやすい方法です。ここでは、クールミスト、インクネイビー、スレートティールを合わせます。

明るいクールミストを土台にし、ネイビーとティールで赤紫を整理する

■#DA0BA6には、背景用のクールミスト■#F8F7FB、本文や見出し用のインクネイビー■#1F2130、補助操作用のスレートティール■#2A6F85を合わせる例が考えられます。

■#F8F7FBは白に近い明るい背景色で、鮮やかな赤紫を広い面積から切り離しやすくします。■#1F2130は青紫をわずかに含む濃色なので、日時、会場、出演者、注意事項など長く読む情報を落ち着かせて整理できます。■#2A6F85は鮮やかさを抑えた青緑寄りの色で、マゼンタから色相（赤・青・緑など色みの違い）を離しているため、補助操作を別の役割として見せやすい組み合わせです。

イベント告知ページでは、ストロング・マゼンタを開催情報と主要CTAに集める

実装では、ページ全体の背景を■#F8F7FBにし、開催日のバッジ、イベント名の一部、主要なCTA（Call to Action、チケット確認や申込みなど次の行動を促す操作）の背景へ■#DA0BA6を使います。その上の文字を■#FFFFFFにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約4.59:1です。通常サイズの文字に必要な4.5:1以上を満たします。また、■#DA0BA6と■#F8F7FBは約4.30:1なので、主要ボタンの面も明るい背景から区別できます。

本文、会場住所、タイムテーブルなどは■#1F2130にし、補助の「会場マップを見る」ボタンは■#2A6F85を背景にして、その上の文字を■#FFFFFFにします。ティールと白のコントラスト比は約5.66:1、ティールと背景は約5.31:1なので、補助操作も文字とボタン面の両方を見分けやすくできます。

■#1F2130と■#F8F7FBは約14.93:1、■#DA0BA6と■#F8F7FBは約4.30:1、■#2A6F85と■#F8F7FBは約5.31:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンなどの画面部品）や状態を示す視覚情報には隣接色との3:1以上が求められます。

鮮やかさを活かすなら、マゼンタを小さな文字や状態色に使いすぎない

■#DA0BA6と■#F8F7FBの約4.30:1は、ボタン面などのUIを背景から区別する用途には3:1以上ありますが、通常サイズの文字に必要な4.5:1には届きません。そのため、明るい背景上で■#DA0BA6を小さな本文や注釈の文字色として使うのは避け、文字は■#1F2130へ分けます。

また、■#DA0BA6と■#2A6F85のコントラスト比は約1.23:1です。「選択中」と「未選択」やチケット種別などをこの2色だけで分けず、ラベル文字、下線、チェックマーク、枠線なども併用します。マウスポインターを重ねた状態で■#DA0BA6を明るく変更すると、■#FFFFFFとの文字コントラストが4.5:1を下回る場合があるため、状態色を変えるときは再計算が必要です。HueRollでは■#DA0BA6をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。