ストロング・パープルに合う色は？濃い紫を華やかに際立たせる配色例【#C00BDA】

ストロング・パープル（■#C00BDA）は、赤みを含んだ鮮やかな濃い紫です。Webサイトでは、クリエイター向けオンライン講座の申込みページで、講座名のアクセント、募集期間のバッジ、主要な「受講を申し込む」ボタンなどに使うと、華やかさを出しながら重要な情報へ視線を集めやすくなります。ただし、紫を画面全体へ広げると教材画像や講師写真と競合しやすいため、明るい背景と濃い文字色を土台にし、紫を主要な場所へ絞るのが扱いやすい方法です。ここでは、ソフトラベンダーホワイト、インクネイビー、ソフトライムを合わせます。

明るい背景と濃い文字色を土台にし、ライムを補助色として加える

■#C00BDAには、背景用のソフトラベンダーホワイト■#FAF7FC、本文や見出し用のインクネイビー■#232238、補助情報用のソフトライム■#D8E6A8を合わせる例が考えられます。

■#FAF7FCはごく淡い紫みを感じる明色で、主役の紫とのつながりを残しながら広い余白を作れます。■#232238は青紫をわずかに含む濃色なので、講座概要、受講料、日程、注意事項など長く読む情報を落ち着いて整理できます。■#D8E6A8は黄緑寄りの淡色で、紫から色相（赤・青・緑など色みの違い）を大きく離せるため、紫の帯やパネル上で補助情報を分ける色として使いやすい組み合わせです。

講座申込みページでは、ストロング・パープルを講座名と主要CTAに集める

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

講座概要や料金、開催日時は■#232238にします。特典や「早期申込」のような補助情報を紫の帯の中で目立たせる場合は、■#D8E6A8をラベル背景にし、その文字を■#232238にします。ライムと紫のコントラスト比は約3.67:1、ライムとネイビーは約11.64:1なので、紫の面に置く意味のあるラベルの境界と、その中の文字をどちらも識別しやすくできます。

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

華やかさを保つなら、淡いライムを明るい背景上の境界色にしない

■#D8E6A8と■#FAF7FCのコントラスト比は約1.25:1です。そのため、明るい背景上でライムの面だけを使ってボタンや選択欄の存在を示すのは避け、■#232238の枠線や文字を組み合わせます。紫の帯上で使う場合は、■#C00BDAとの約3.67:1の差を活かせます。

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