ピュア・ブルーに合う色は？純度の高い青をシャープに際立たせる組み合わせ【#0040FF】

ピュア・ブルー（■#0040FF）は、紫や緑への寄りが少ない、非常に鮮明な青です。オンライン試験や確認テストの受験画面では、選択中の設問、現在位置、主要な「次の設問へ」ボタンなどに使うと、純度の高い青をシャープに際立たせながら操作の流れを作りやすくなります。ただし、回答済み・未回答・見直し対象といった状態を青だけで整理すると、色の意味が増えすぎて判断しにくくなる場合があります。ここでは、ミストホワイト、インクグラファイト、ダスティワインを組み合わせます。

ミストホワイトを土台にし、濃いグラファイトで鮮明な青を引き締める

■#0040FFには、背景用のミストホワイト■#F3F5FA、本文・設問文・選択肢用のインクグラファイト■#20253A、見直し操作用のダスティワイン■#7A3D58を合わせる例が考えられます。

■#F3F5FAはごく淡い青みを含む明色で、問題文や選択肢カードの広い背景を軽く保ちながらブルーとの明度差を作れます。■#20253Aは青みを含む低彩度の濃色なので、設問文、制限時間、注意事項などを主役色より落ち着いて整理できます。■#7A3D58は赤紫寄りの落ち着いた濃色で、青から色相（赤・青・緑など色みの違い）を離しつつ鮮やかさを抑えているため、「見直し対象にする」などの補助操作を主要操作と分けやすくなります。

受験画面では、ピュア・ブルーを現在位置と主要CTAに集める

実装では、画面全体や未選択の選択肢カードを■#F3F5FAにし、現在の設問番号、選択中の回答、主要なCTA（Call to Action、次の設問への移動など次の行動を促す操作）の背景へ■#0040FFを使います。その上の文字を■#FFFFFFにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約6.61:1です。通常サイズの文字に必要な4.5:1以上を満たします。

■#0040FFと■#F3F5FAは約6.06:1なので、選択中の回答や主要ボタンの色面も明るい背景から区別できます。設問文、制限時間、注意事項は■#20253Aにし、背景との比率は約13.88:1です。「見直し対象にする」ボタンは■#7A3D58を背景にし、その上の文字を■#FFFFFFにすると約7.97:1です。ダスティワインとページ背景も約7.30:1あります。

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

シャープに見せるなら、回答状態を青とワインの色だけで伝えない

■#0040FFと■#7A3D58のコントラスト比は約1.21:1です。そのため、「回答済み」と「見直し対象」をこの2色の違いだけで示すのは避け、状態名の文字、チェックマーク、旗アイコン、太めの枠線なども併用します。「未回答」「回答済み」「見直し」の設問一覧でも、色に加えて短いラベルや記号を表示すると、状態を色以外でも判断できます。

また、問題図やグラフに青が多い場合は、画面全体へさらに■#0040FFを広げるより、■#F3F5FAの余白を十分に残す方が、問題内容と操作を分けやすくなります。HueRollでは■#0040FFをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。