ピュア・バイオレットに合う色は？澄んだ紫を鮮やかに引き立てる色合わせ【#8000FF】

ピュア・バイオレット（■#8000FF）は、青みを感じる澄んだ鮮やかな紫です。共有カレンダーや会議の日程調整Webアプリでは、選択中の日付、確定候補の時間帯、主要な「日程を確定」ボタンなどに使うと、紫を鮮やかに引き立てながら操作の優先順位を作りやすくなります。ここでは、ソフトラベンダーホワイト、インクプラム、ディープティールを合わせ、時間情報を読みやすく保ちながらバイオレットを主役にする配色を考えます。

淡いラベンダーホワイトを土台にし、濃いプラムとティールで紫を整理する

■#8000FFには、背景用のソフトラベンダーホワイト■#F5F2FA、本文や予定情報用のインクプラム■#241A32、補助操作用のディープティール■#2F5A64を合わせる例が考えられます。

■#F5F2FAはごく淡い紫みを含む明色で、カレンダーや時間候補のカードを軽く見せながらバイオレットとのつながりを残せます。■#241A32は紫みをわずかに含む低彩度の濃色なので、会議名、参加者、所要時間、タイムゾーン（地域ごとの標準時）などを落ち着いて整理できます。■#2F5A64は青緑寄りの濃色で、紫から色相（赤・青・緑など色みの違い）を離しつつ鮮やかさを抑えているため、「参加者を確認」などの補助操作を主要操作と分けやすくなります。

日程調整画面では、ピュア・バイオレットを選択中の時間帯と主要CTAに集める

実装では、ページ全体や未選択の時間候補カードを■#F5F2FAにし、選択中の日付、確定候補の時間帯、主要なCTA（Call to Action、日程確定など次の行動を促す操作）の背景へ■#8000FFを使います。その上の文字を■#FFFFFFにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約6.25:1です。通常サイズの文字に必要な4.5:1以上を満たします。

■#8000FFと■#F5F2FAのコントラスト比は約5.64:1なので、選択中の時間帯や主要ボタンの色面も明るい背景から区別できます。会議名、参加者名、所要時間は■#241A32にし、背景との比率は約14.95:1です。補助の「参加者を確認」ボタンは■#2F5A64を背景にし、その上の文字を■#FFFFFFにすると約7.59:1です。ティールとページ背景も約6.85:1あります。

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

鮮やかさを活かすなら、予定の状態を紫とティールの色だけで伝えない

■#8000FFと■#2F5A64のコントラスト比は約1.21:1です。そのため、「選択中」と「未選択」や「確定済み」と「調整中」をこの2色の違いだけで伝えるのは避け、状態名の文字、チェックマーク、太めの枠線、日時表示なども併用します。カレンダー上でも、現在選んでいる時間帯には色だけでなく「選択中」の表示や枠線を加えると、色以外の手掛かりを残せます。

HueRollでは■#8000FFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。