ダスキー・ブルーに合う色は？渋い青を静かに引き立てる組み合わせ【#203060】

ダスキー・ブルー（■#203060）は、青の落ち着きを残しながら明るさと鮮やかさを抑えた濃色です。Webサイトでは、企業向けサービスの見出し、比較表の重要項目、資料請求や問い合わせの主要ボタンなどに使うと、強く主張しすぎずに要点を示しやすくなります。一方で、暗い青やグレーだけで画面を組むと、要素どうしの差が小さくなり、全体が沈んで見えることがあります。ここでは、ミストグレー、チャコールスレート、ダスティピーチを合わせ、渋い青を主役にしながら静かな明暗差と温度差を作る配色を考えます。

明るいミストグレーを土台にし、淡いピーチで温度差を加える

■#203060には、背景用のミストグレー■#EFF3F5、本文や補助文字用のチャコールスレート■#505A61、アクセント用のダスティピーチ■#D0B3A2を合わせる例が考えられます。

■#EFF3F5はわずかに青みを含む明るいグレーで、基準色とのつながりを残しながら大きな明度差を作れます。■#505A61は低彩度の濃いグレーで、本文や注記を青一色にせず整理する役割に向きます。■#D0B3A2は赤みを含む低彩度色なので、青から色相を離しつつ鮮やかさを上げすぎず、冷たい色だけが続く画面へ穏やかな温度差を加えられます。

サービス紹介や比較表では、青を見出しと主要操作に集める

実装では、ページやカードの広い背景を■#EFF3F5にし、サービス名、比較表の重要見出し、主要ボタン背景など、目線を止めたい場所へ■#203060を使います。本文や補足情報は■#505A61へ分けると、ダスキー・ブルーの役割を強調と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の小さなアクセントには、濃い■#203060の面に■#D0B3A2の補助ボタンや短いラベルを置き、文字を■#203060にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#203060と■#EFF3F5は約11.38:1、■#505A61と■#EFF3F5は約6.32:1、■#203060と■#D0B3A2は約6.44:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、濃い■#203060の面に■#D0B3A2の操作部品を置く場合は、隣接色との差も約6.44:1となり、意味のあるUI部品を識別する視覚情報に必要な3:1以上を確保できます。

ダスティピーチは明るい背景上の文字や境界だけに頼らない

■#D0B3A2は、渋い青へ温かい変化を加えるためのアクセントです。広い面積に増やすより、濃い■#203060の中に置く短いラベルや小さな補助操作へ絞ると、青の静かな主役感を保ちやすくなります。

一方、■#D0B3A2と■#EFF3F5のコントラスト比は約1.77:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#203060や■#505A61の枠線・文字など、十分な明度差を持つ色を組み合わせます。