ライト・ブルーに合う色は？爽やかな青をすっきり見せる組み合わせ【#88A2F2】

ライト・ブルー（■#88A2F2）は、明るさのある爽やかな青です。カスタマーサポートの問い合わせ管理画面では、選択中の問い合わせ、主要な「返信を送信」ボタン、現在の対応番号などへ絞って使うと、青をすっきり見せながら、件名や担当者、受信時刻、対応状況を整理しやすくなります。ここでは、ディープネイビー、アイスホワイト、ミューテッドテラコッタを組み合わせます。

ディープネイビーで青を引き締め、白とテラコッタで操作の役割を分ける

■#88A2F2には、選択中の問い合わせをまとめる詳細パネル用のディープネイビー■#243044、問い合わせ一覧と本文カードの背景用のアイスホワイト■#F6F8FC、履歴確認や担当変更などの補助操作用のミューテッドテラコッタ■#6B4E3Dを合わせる例が考えられます。

■#243044は青みを含む低彩度の濃色で、ライト・ブルーの明るさを残しながら文字や輪郭を引き締められます。■#F6F8FCは青みをわずかに含む明色なので、複数の問い合わせを並べても画面を軽く保てます。■#6B4E3Dは赤みを含む落ち着いた茶色で、青から色相（赤・青・緑など色みの違い）を離しながら、「対応履歴を見る」「担当者を変更」などの補助操作を主要な返信操作と分けやすくします。

問い合わせ管理では、ライト・ブルーを選択中の案件と返信操作に集める

実装では、問い合わせ一覧と本文カードの背景を■#F6F8FCにし、件名、顧客名、受信時刻、担当者名、本文を■#243044にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約12.49:1です。

選択中の問い合わせをまとめる詳細パネルを■#243044にし、主要な「返信を送信」ボタン背景、現在の問い合わせ番号、返信欄の短いアクセントへ■#88A2F2を使います。ボタン上の文字とアイコンを■#243044にすると約5.37:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ライト・ブルーのボタン面とディープネイビーのパネルも約5.37:1あるため、主要操作を暗い面から区別できます。

明るい■#F6F8FCの一覧で、選択中の問い合わせへ■#88A2F2を使う場合、2色の差は約2.32:1です。そのため色面だけで選択状態を示さず、■#243044の枠線、選択中ラベル、チェックアイコンを併用します。「対応履歴を見る」「担当者を変更」などの補助ボタンは■#6B4E3Dを背景にし、その上の文字を■#FFFFFFにすると約7.55:1です。ミューテッドテラコッタとアイスホワイトの差も約7.10:1あります。

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

すっきり見せるなら、白文字や対応状態の色分けだけに頼らない

■#88A2F2と■#FFFFFFのコントラスト比は約2.47:1なので、ライト・ブルー背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#243044にします。

また、「未対応」「対応中」「解決済み」などを色だけで区別せず、状態名の文字、担当者名、チェックや時計などのアイコンを併用します。HueRollでは■#88A2F2をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。