ディープ・アジュールに合う色は？深い空色を静かに引き立てる配色例【#1B6998】

ディープ・アジュール（■#1B6998）は、青にわずかなシアンのニュアンスを含む深い空色です。Webサイトでは、鉄道やバスの路線・時刻表ページで、路線名、停留所見出し、主要な「経路を検索」ボタンなどに使うと、鮮やかな水色よりも落ち着きを残しながら静かに引き立てやすくなります。ただし、青や水色を背景・見出し・ボタンへ広く使いすぎると、時刻や乗換情報の階層が分かりにくくなり、運行中・遅延・運休などの状態も色だけに頼りやすくなります。ここでは、ライトミスト、チャコールブルーグレー、ダスティクレイを合わせ、深い空色を主役にしながら交通情報を整理しやすい配色を考えます。

ライトミストを土台にし、クレイで寒色へ穏やかな温度差を加える

■#1B6998には、背景用のライトミスト■#F3F7F8、本文や補助文字用のチャコールブルーグレー■#34434B、アクセント用のダスティクレイ■#D6B8A6を合わせる例が考えられます。

■#F3F7F8はわずかに青みを含む明色で、アジュールとのつながりを残しながら時刻表や案内カードの面を明るくできます。■#34434Bは青みを少し含む低彩度の濃色なので、出発時刻、到着時刻、乗換案内、注記などを主役色より控えめに整理できます。■#D6B8A6は赤みを含む低彩度色で、青から色相を離しつつ鮮やかさを上げすぎないため、寒色中心の交通案内へ穏やかな温度差を加えられます。

路線・時刻表ページでは、アジュールを路線名と主要操作に集める

実装では、時刻表や経路候補カードの広い背景を■#F3F7F8にし、路線名、駅・停留所見出し、主要な「経路を検索」ボタン背景などへ■#1B6998を使います。時刻や乗換説明、補足条件は■#34434Bへ分けると、ディープ・アジュールを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#1B6998の面に■#D6B8A6の小さな副ボタンやラベルを置き、その文字を■#34434Bにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#1B6998と■#F3F7F8は約5.53:1、■#34434Bと■#F3F7F8は約9.50:1、■#34434Bと■#D6B8A6は約5.49:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#1B6998と■#D6B8A6は約3.20:1なので、濃いアジュールの面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

静かに引き立てるなら、運行状態を青や暖色だけで伝えない

■#D6B8A6と■#F3F7F8のコントラスト比は約1.73:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#1B6998や■#34434Bの枠線・文字を組み合わせます。

また、「平常運行」「遅延」「運休」などの状態は、色だけで区別せず、状態名の文字、アイコン、記号なども併用します。深い空色を静かに引き立てたい場合も、ページ全体を青へ寄せるより、■#F3F7F8の余白や情報カードを十分に残す方が、時刻と操作の階層を整理しやすくなります。HueRollでは■#1B6998をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。