ブライト・バイオレットに合う色は？強い紫を華やかに引き立てる色合わせ【#9E3DFF】

ブライト・バイオレット（■#9E3DFF）は、青みを感じる明るく鮮やかな紫です。コミュニティサービスのプロフィールテーマ設定画面では、選択中のテーマカード、主要な「変更を保存」ボタン、プロフィール見本のアクセントなどに絞って使うと、強い紫を華やかに引き立てながら名前や自己紹介、設定項目を整理しやすくなります。ここでは、ライラックホワイト、インクネイビー、ディープティールを組み合わせます。

ライラックホワイトを土台にし、ネイビーとティールで紫の華やかさを整える

■#9E3DFFには、設定画面やプレビューカードの背景用のライラックホワイト■#FAF8FD、表示名・自己紹介・設定説明用のインクネイビー■#1B2033、画像変更や詳細設定などの補助操作用のディープティール■#3A5E5Bを合わせる例が考えられます。

■#FAF8FDはごく淡い紫みを含む明色で、プロフィール見本や設定項目の広い面を軽く保てます。■#1B2033は青みを含む低彩度の濃色なので、表示名、自己紹介、公開範囲、補足説明などをバイオレットより落ち着いて整理できます。■#3A5E5Bは青緑寄りの低彩度色で、紫から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「画像を変更」「詳細設定を開く」などの補助操作を主要な保存操作と分けやすくなります。

プロフィールテーマ設定では、ブライト・バイオレットを選択中テーマと保存操作に使う

実装では、設定画面と未選択のテーマカード背景を■#FAF8FDにし、表示名、自己紹介、公開範囲、説明文を■#1B2033にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.30:1です。

選択中のテーマカード、主要な「変更を保存」ボタン背景、プロフィール見本の短いアクセントへ■#9E3DFFを使い、その上の文字を■#FFFFFFにすると約4.60:1です。通常サイズの文字に必要な4.5:1以上を確保できます。また、■#9E3DFFと■#FAF8FDの差は約4.36:1なので、選択中カードや主要ボタンの色面も明るい背景から3:1以上の差を確保できます。

「画像を変更」「詳細設定を開く」などの補助ボタンは■#3A5E5Bを背景にし、その上の文字を■#FFFFFFにすると約7.16:1です。ディープティールとページ背景の差も約6.79:1あります。

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

華やかに見せるなら、白文字の余裕とテーマ状態の伝え方に注意する

■#9E3DFFと■#FFFFFFのコントラスト比は約4.60:1で、通常サイズの文字に必要な4.5:1をわずかに上回ります。そのため、ホバーや選択状態で紫をさらに明るく変更する場合は、白文字との比率をもう一度確認します。

また、■#9E3DFFと■#3A5E5Bの差は約1.56:1なので、「選択中」「未選択」「保存済み」「未保存」をこの2色だけで分けるのは避けます。テーマ名、チェックマーク、選択枠、保存状態の文字なども併用します。HueRollでは■#9E3DFFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。