ニアブラック・アジュールに合う色は？深い青みを静かで洗練された印象にする配色例【#111C22】

ニアブラック・アジュール（■#111C22）は、黒に近い暗さの中に青とわずかな青緑のニュアンスを残した深い色です。Webサイトでは落ち着いた背景に使いやすい一方、暗い寒色だけを重ねると情報の境界が弱く見えることがあります。ここでは、■#111C22に明るい無彩色、近い青緑、やわらかな暖色を組み合わせ、静かで洗練された印象に整える配色例を紹介します。

ミストホワイト、スモーキーティール、ウォームベージュを合わせる

■#111C22には、ミストホワイトの■#F3F5F4、スモーキーティールの■#85A9A8、ウォームベージュの■#C3A992を合わせる例が考えられます。

■#F3F5F4は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい本文エリアに使いやすい色です。■#85A9A8は青緑のつながりを保ちながら明るさを加えられるため、補助テキストや区切りに向きます。■#C3A992は寒色中心の画面へ控えめな暖かさを足せるため、主要ボタンや小さな強調に使うと役割を分けやすくなります。

3色を「明るい面」「青緑につながる補助色」「落ち着いた暖色の強調」と分けると、■#111C22の静かな雰囲気を保ちながら情報を整理できます。暖色を鮮やかにしすぎず、ベージュ程度に抑えることで、青緑の静けさを崩しにくい穏やかなアクセントになります。

濃い青みはページの端に使い、本文エリアを明るく切り替える

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

ページ上部を■#111C22にし、見出しと説明文を■#F3F5F4、補助情報を■#85A9A8、主要ボタンを■#C3A992にすると、暗い面でも情報の役割を分けられます。本文エリアは■#F3F5F4へ切り替え、本文文字を■#111C22にすると、濃い青みを印象づけながら長い文章は明るい面で読ませられます。

コントラスト比は文字や図形と背景の明るさの差を示す数値です。■#111C22と■#F3F5F4は約15.81:1、■#111C22と■#85A9A8は約6.79:1、■#111C22と■#C3A992は約7.76:1です。W3Cが公開するWCAG 2.2では、通常サイズの文字は4.5:1以上、意味や状態の識別に必要なボタン輪郭やアイコンなどは隣接色との3:1以上が基準です。ここで文字用途として示した組み合わせは4.5:1以上を満たします。

一方、■#F3F5F4の上に■#85A9A8を置くと約2.33:1、■#C3A992を置くと約2.04:1です。どちらも明るい本文背景上の通常文字には使いません。

洗練された印象は色数より面積と境界で整える

■#111C22を静かに見せたい場合は、色を増やすより、どこまで暗色を使うかを先に決める方が調整しやすくなります。ページ全体を暗くせず、ページ上部やページ下部など範囲を区切り、その間に■#F3F5F4の明るい面を入れると、暗色の存在感を残しながら画面を軽くできます。

■#85A9A8は補助情報や細い区切りに使い、■#C3A992は主要ボタンや小さなラベルへ絞ります。暖色の面積を控えることで、青緑を主役にした落ち着いた構成を保ちやすくなります。配色の印象は写真や余白の量でも変わるため、実際の画面で暗色・明色・アクセントの比率を確認してください。

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