ミューテッドダーク・インディゴに合う色は？暗い青紫を重厚に見せる配色【#221C4A】

ミューテッドダーク・インディゴ（■#221C4A）は、青紫の色味を残しながら明るさを抑えた濃色です。Webサイトでは、見出しやナビゲーション、情報をまとめる帯などに使うと重みを出しやすい一方、寒色だけで固めると硬く沈んで見えることがあります。ここでは、パーチメント、ウォームストーン、ミューテッドクレイを組み合わせ、青紫の深さを残しながら重厚に見せる配色を考えます。

黄みのある明色と土色を合わせ、青紫の冷たさを受け止める

■#221C4Aには、紙のような明るいパーチメントの■#F2EEE7、補助文字用のウォームストーン■#625A56、アクセント用のミューテッドクレイ■#B67D66を合わせる例が考えられます。

■#F2EEE7はわずかに黄みを含む明色なので、暗いインディゴとの明度差を大きくしながら、真っ白より温かい余白を作れます。■#625A56は暖色寄りの低彩度グレーで、本文より弱く見せたい補足文やメタ情報に使うと、寒色を増やさず階層を付けられます。■#B67D66は赤みを含む土色で、青紫と色温度を離しつつ鮮やかさを抑えているため、落ち着いた画面に小さな変化を加えやすい色です。

インディゴは骨格に使い、読む面はパーチメントへ切り替える

実装では、ヘッダーやセクション見出し、カードの上端などページの骨格に■#221C4Aを使い、本文や情報カードの背景を■#F2EEE7へ切り替えると、暗色を広げすぎず重厚さを保てます。補助情報は■#625A56へ分け、主要文字との強弱を作ります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#221C4Aと■#F2EEE7は約13.62:1、■#625A56と■#F2EEE7は約5.83:1、■#221C4Aと■#B67D66は約4.59:1です。WCAG 2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。濃い■#221C4Aの面に■#B67D66のボタンを置く場合は、ボタンと周囲の差も約4.59:1となり、意味のあるUI部品に必要な3:1以上も確保できます。

重厚さを保つなら、クレイは暗い面のアクセントに限定する

■#B67D66は、冷たい青紫へ土色の温かさを足す役目です。広い背景へ増やすより、濃い■#221C4Aの中に置く主要ボタンや短いラベル、細いラインへ絞ると、インディゴの重さを残したまま視線を動かせます。

一方、■#B67D66と■#F2EEE7のコントラスト比は約2.97:1です。そのため、明るい背景上の通常文字には使わず、意味のあるUI部品の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では、操作部品や意味のある図形を識別するために必要な視覚情報は隣接色と3:1以上が基準です。明るい面に操作要素を置く場合は、■#221C4Aの背景や枠線など、十分な明度差を持つ色へ切り替えてください。