ミスト・ブルーに合う色は？やわらかな青をきれいに見せる配色例【#E3E7F2】

ミスト・ブルー（HEX（#から始まるWeb用カラーコード）で ■#E3E7F2）は、青をかなり淡くやわらげた色です。オンラインストレージのファイル共有画面では、選択中のファイル、共有設定の要約、主要な「共有リンクを作成する」ボタンなどに範囲を絞って使うと、やわらかな青を主役にしながらすっきり整った印象にまとめやすくなります。ここでは、ディープスレートブルー、クールホワイト、ミューテッドラストを組み合わせます。

ディープスレートブルーで文字を締め、ラストで補助操作を分ける

■#E3E7F2には、見出しや本文用として、ここではディープスレートブルーと呼ぶ■#38475C、ページ背景用のクールホワイト■#FBFCFE、権限設定などの補助操作用として、ここではミューテッドラストと呼ぶ■#7A5148を合わせる例が考えられます。

■#38475Cは青みを含む暗い色で、ミスト・ブルーと色相（赤・青・緑など色みの違い）を近づけながら明るさの差を大きく取れます。■#FBFCFEはわずかに青みを含む白に近い色なので、ファイル名や共有情報が並ぶ広い面を明るく保ちやすい背景候補です。■#7A5148は落ち着いた赤茶系で、「権限を変更する」「リンクを無効にする」などの補助操作を、青系の主要操作と色相で分けたいときに使えます。

ファイル共有では、選択中の項目と主要ボタンにミスト・ブルーを使う

ページ背景と未選択のファイル行を■#FBFCFEにし、ファイル名、更新日時、共有先を■#38475Cで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.20:1です。

選択中のファイル、共有設定の要約、主要な「共有リンクを作成する」ボタンの背景に■#E3E7F2を使い、その上の文字とアイコンを■#38475Cにすると、コントラスト比は約7.63:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#E3E7F2と■#FBFCFEの差は約1.20:1です。淡い色面だけでは選択中のファイルや主要ボタンの境界を見分けにくいため、■#38475Cの枠線、「選択中」という文字、チェックアイコンを併用します。この枠線とページ背景のコントラスト比は約9.20:1です。

「権限を変更する」などの補助ボタンは■#7A5148を背景にし、その上を■#FFFFFFの文字にすると約6.78:1です。■#7A5148と■#FBFCFEの差も約6.60:1あり、主要操作と補助操作を分けやすくなります。

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

きれいに見せるなら、淡い青だけで選択状態を伝えない

■#E3E7F2と■#FFFFFFのコントラスト比は約1.24:1です。そのため、ミスト・ブルー背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#38475Cにします。

また、「選択中」「共有中」「未共有」などの状態を色だけで伝えず、状態名の文字、枠線、チェックアイコンなども併用します。ミスト・ブルーをページ全体へ広げるより、選択中のファイルや主要操作など用途を絞って使い、■#FBFCFEの余白を広く取ると、やわらかな青を主役にしながら画面をすっきり整えやすくなります。HueRollでは■#E3E7F2を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。