ダスキー・インディゴに合う色は？くすんだ青紫を重厚に見せる配色【#282060】

ダスキー・インディゴ（■#282060）は、青紫の深さを残しながら明るさと鮮やかさを抑えた濃色です。Webサイトでは、事例詳細の見出し、資料ダウンロードカード、管理画面のサイドナビゲーションなどに使うと、静かで重みのある強調色として扱いやすくなります。一方で、青紫やネイビー系の濃色を広い面積に重ねると、画面全体が暗く見えたり、主要操作と補助情報の差が弱くなったりします。ここでは、クールグレー、ブルースレート、ミューテッドサンドを合わせ、くすんだ青紫の重厚さを残しながら読みやすさを整える配色を考えます。

明るいクールグレーを土台にし、サンドカラーで温度差を作る

■#282060には、背景用のクールグレー■#EFF1F5、本文や補助文字用のブルースレート■#505764、アクセント用のミューテッドサンド■#B8AE86を合わせる例が考えられます。

■#EFF1F5はわずかに青みを含む明るい背景で、インディゴとのつながりを残しながら大きな明度差を作れます。■#505764は低彩度の青みグレーで、本文や更新日、補足説明などを基準色より一段弱く見せる用途に向きます。■#B8AE86は黄みを含む低彩度色なので、青紫から色相を離しつつ鮮やかさを上げすぎず、冷たさの続く画面に穏やかな温度差を加えられます。

資料カードやサイドナビでは、インディゴを要点と操作に集める

実装では、資料カードやコンテンツ面の広い背景を■#EFF1F5にし、見出し、選択中のナビ項目、主要ボタン背景などへ■#282060を使います。本文や補助情報は■#505764へ分けると、インディゴの役割を強調と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）のアクセントには、濃い■#282060の面に■#B8AE86の小さなラベルや補助ボタンを置き、文字を■#282060にする方法があります。

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

ミューテッドサンドは明るい背景上の文字や境界だけに頼らない

■#B8AE86は、暗い青紫に温かい方向の変化を加えるアクセントです。広い背景に増やすより、濃い■#282060の中に置く短いラベルや小さな補助操作へ絞ると、インディゴの重厚さを保ちやすくなります。

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