ダーク・ブルーに合う色は？濃紺に近い青を端正に引き立てる組み合わせ【#1F367A】

ダーク・ブルー（■#1F367A）は、鮮やかさを抑えた濃紺に近い青です。Webサイトでは、FAQやサポートページの質問見出し、カテゴリ名、主要な検索・問い合わせボタンなどに使うと、明るい青よりも落ち着いた端正さを出しやすくなります。ただし、濃い青と青みグレーだけで画面をまとめると、情報が硬く見えたり、回答済み・未解決などの状態が色だけに頼った表示になったりします。ここでは、ウォームオフホワイト、ウォームチャコール、ダスティサンドを合わせ、濃紺に近い青を主役にしながら、冷たくなりすぎない配色を考えます。

ウォームオフホワイトを土台にし、ダスティサンドで温度差を加える

■#1F367Aには、背景用のウォームオフホワイト■#F6F2EB、本文や補助文字用のウォームチャコール■#4B4540、アクセント用のダスティサンド■#C9A78Cを合わせる例が考えられます。

■#F6F2EBはわずかに黄みを含む明色で、濃い青との明度差を作りながら真っ白よりやわらかな情報面を作れます。■#4B4540は暖色寄りの低彩度な濃色なので、回答文、補足説明、更新日時などを青一色にせず整理できます。■#C9A78Cは赤みと黄みを含む落ち着いたサンドカラーで、青から色相を離しつつ鮮やかさを抑えているため、FAQの補助操作や短いラベルへ穏やかな温度差を加えられます。

FAQ・サポートページでは、ダーク・ブルーを質問見出しと主要操作に集める

実装では、FAQ一覧や回答カードの広い背景を■#F6F2EBにし、質問見出し、選択中のカテゴリ、主要な検索・問い合わせボタン背景などへ■#1F367Aを使います。回答本文や補足情報は■#4B4540へ分けると、ダーク・ブルーを情報の入口と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#1F367Aの面に■#C9A78Cの小さなボタンやラベルを置き、その文字を■#1F367Aにする方法があります。

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

端正さを保つなら暖色は補助に絞り、状態を色だけで伝えない

■#C9A78Cと■#F6F2EBのコントラスト比は約2.00:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#1F367Aや■#4B4540の枠線・文字を組み合わせます。

また、「解決済み」「未解決」「回答待ち」などの状態は、色だけで区別せず、状態を示す文字、アイコン、枠線なども併用します。ダスティサンドを広い背景へ増やすより、濃い青の中に置く補助ボタンや短いラベルへ絞ると、ダーク・ブルーの端正さを保ちながら冷たさをやわらげやすくなります。HueRollでは■#1F367AをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。