ニアブラック・ブルーに合う色は？黒に近い青をシャープに引き立てる組み合わせ【#111522】

ニアブラック・ブルー（■#111522）は、黒に近い暗さの中に青みを残した深い色です。Webサイトでは、背景やページ上部に使うと引き締まった印象を作りやすい一方、暗い青ばかりを重ねると見出し・本文・ボタンの役割が分かりにくくなることがあります。ここでは、■#111522に明るい色、近い寒色、暖色のアクセントを組み合わせ、シャープさを保ちながら情報を整理する配色例を紹介します。

オフホワイト、スチールブルー、くすんだアンバーを合わせる

■#111522には、クールなオフホワイトの■#F2F5F8、落ち着いたスチールブルーの■#9AB6C7、くすんだアンバーの■#D2A75Bを合わせる例が考えられます。

■#F2F5F8は基準色との明るさの差が大きく、暗い背景上の文字や明るい本文エリアに使いやすい色です。■#9AB6C7は青のつながりを保ちながら明るさを加えられるため、補助テキストや区切りに向きます。■#D2A75Bは青とは異なる黄みを持つため、主要ボタンや小さな強調に使うと、寒色中心の画面で操作位置を分けやすくなります。

3色を「明るい面」「青につながる補助色」「暖色の強調」と分けると、■#111522の暗さを保ちながら役割を整理できます。アンバーを広く使いすぎると暖色の印象が強くなるため、まずは主要ボタンや小さなラベルなど限られた場所から使うと調整しやすくなります。

暗い青はページの骨格に使い、本文は明るく切り替える

■#111522を基準にするなら、次のように役割を分けると使いやすくなります。

ページ上部を■#111522にし、見出しと説明文を■#F2F5F8、補助情報を■#9AB6C7、主要ボタンを■#D2A75Bにすると、暗い青を基準にしながら情報の優先順位を分けられます。本文エリアは■#F2F5F8へ切り替え、本文文字を■#111522にすると、長い文章を暗い背景に載せ続けずに済みます。

コントラスト比は、■#111522と■#F2F5F8が約16.63:1、■#111522と■#9AB6C7が約8.57:1、■#111522と■#D2A75Bが約8.16:1です。W3CのWCAG 2.2では、通常サイズの文字は4.5:1以上、意味や状態を伝えるボタンやアイコンなどの見分けに必要な部分は隣接色との3:1以上が基準です。ここで文字用途として示した組み合わせは条件を満たします。

一方、■#F2F5F8の上に■#9AB6C7を置くと約1.94:1、■#D2A75Bを置くと約2.04:1です。どちらも明るい本文背景上の通常文字には使いません。

シャープに見せるなら青の面積と暖色の量を分ける

■#111522は広く使うほど重さが増えるため、画面全体を暗色で埋めるより、ページ上部、ナビゲーション周辺、ページ下部など範囲を決めて使う方が調整しやすくなります。途中に■#F2F5F8の明るい面を入れると、暗い青との境界がはっきりし、全体をすっきり見せやすくなります。

■#9AB6C7は青系のまとまりを保つ補助色として使い、■#D2A75Bは主要ボタンや注目させたい小さな要素に絞ります。暖色の面積を抑えると、青を主役にしたシャープな印象を保ちやすくなります。

HueRollでは■#111522をHEXで指定し、関連色や配色候補を確認したり、選択した色と白・黒とのコントラストを比べたりできます。任意の2色同士のコントラスト比較やWCAGの適合レベルの自動判定には対応していないため、この記事で示した組み合わせの比率は別途計算した値です。