ストロング・バイオレットに合う色は？鮮やかな紫を存在感のある印象にする色合わせ【#730BDA】

ストロング・バイオレット（■#730BDA）は、青みを感じる鮮やかな紫です。Webサイトでは、ゲームストアの商品紹介ページで、作品名のアクセント、選択中のエディション、主要な「購入ページへ」ボタンなどに使うと、紫の存在感を出しながら画面内の優先順位を整理しやすくなります。ただし、スクリーンショットやキービジュアルにも強い色が多い場合は、紫を広い背景へ使うほど画像とUIが競合しやすくなります。ここでは、クールホワイト、ディープネイビー、アイスブルーを合わせ、ストロング・バイオレットを要点へ集める配色を考えます。

クールホワイトを広く使い、ネイビーとアイスブルーで紫の役割を分ける

■#730BDAには、背景用のクールホワイト■#F6F7FB、本文や補助文字用のディープネイビー■#20243A、補助情報用のアイスブルー■#B7D8FFを合わせる例が考えられます。

■#F6F7FBは白に近い明色で、紫を大きな余白から切り離しやすくします。■#20243Aは青みを含む濃色なので、価格、対応機種、発売日、説明文などを落ち着いて整理できます。■#B7D8FFは明るい水色で、紫と同じ寒色寄りでも色相（赤・青・緑など色みの違い）を離せるため、紫の帯やパネル上で補助情報を分ける色として使いやすい組み合わせです。

ゲーム商品ページでは、バイオレットを作品名と主要CTAに集める

実装では、スクリーンショット周囲や商品説明の背景を■#F6F7FBにし、作品名の一部、選択中のエディション、主要なCTA（Call to Action、購入ページへの移動など次の行動を促す操作）の背景へ■#730BDAを使います。その上の文字を■#FFFFFFにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約7.53:1です。通常サイズの文字に必要な4.5:1以上を満たします。また、■#730BDAと■#F6F7FBは約7.03:1なので、主要ボタンの面も明るい背景から区別できます。

価格、対応機種、発売日、説明文は■#20243Aにします。「デラックス版」「追加コンテンツあり」などの補助ラベルを紫の帯やパネル上に置く場合は、■#B7D8FFをラベル背景にし、その文字を■#20243Aにします。アイスブルーとバイオレットは約5.12:1、アイスブルーとネイビーは約10.39:1なので、紫の面に置くラベルの境界と、その中の文字をどちらも見分けやすくできます。

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

存在感を保つなら、アイスブルーを明るい背景上の境界色にしない

■#B7D8FFと■#F6F7FBのコントラスト比は約1.37:1です。そのため、明るい背景上でアイスブルーの面だけを使ってボタンや選択欄の存在を示すのは避け、■#20243Aの枠線や文字を組み合わせます。紫の帯上で使う場合は、■#730BDAとの約5.12:1の差を活かせます。

また、「選択中」「購入済み」「予約受付中」などの状態は、バイオレットとアイスブルーの色分けだけに頼らず、状態名の文字、チェックマーク、アイコン、枠線なども併用します。ゲーム画面やキービジュアルに紫が多い場合は、ページ全体へさらに■#730BDAを広げるより、■#F6F7FBの余白を十分に残す方が、画像と操作を分けやすくなります。HueRollでは■#730BDAをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。