ミューテッドダーク・ブルーに合う色は？重みのある青を端正に引き立てる組み合わせ【#1C284A】

ミューテッドダーク・ブルー（■#1C284A）は、青にわずかな紫みを含む暗く落ち着いた色です。Webサイトでは見出しやナビゲーションに重みを出しやすい一方、青の濃淡だけでまとめると冷たく単調に見えることがあります。ここでは、明るいフロストグレー、スレートブルー、ミューテッドティールを合わせ、重みのある青を端正に引き立てる配色を考えます。

明るいグレーで余白を作り、ティールで静かな変化を付ける

■#1C284Aには、背景用の■#EEF2F6、補助文字用の■#526277、アクセント用の■#789E9Bを合わせます。明るいグレーは基準色の冷静さを保ちながら本文面を軽くし、スレートは色相のまとまりを崩さず情報の強弱を作れます。ティールは青緑側へ少しずらした低彩度色なので、鮮やかなシアンほど強く見せずに操作箇所へ変化を付けられます。

本文は明るい面で読み、濃いブルーは見出しと操作の土台へ集める

本文やカードを■#EEF2F6、見出しや主要文字を■#1C284A、補足文を■#526277にすると、暗い青を主役にしながら読み進める面を明るく保てます。主要ボタンは濃い青の面に■#789E9Bを置き、文字を■#1C284Aにすると役割を分けやすくなります。

コントラスト比は、文字やUI（ユーザーが操作する画面部品）と背景の相対的な明るさの差です。■#1C284Aと■#EEF2F6は約12.86:1、■#526277と■#EEF2F6は約5.54:1、■#1C284Aと■#789E9Bは約4.93:1です。WCAG 2.2の通常文字4.5:1以上を満たし、最後の組み合わせは意味のあるUI部品に必要な3:1以上も確保できます。

端正さを保つなら、ティールは暗い面に限定する

■#789E9Bと■#EEF2F6のコントラスト比は約2.61:1です。そのため、ティールを明るい背景上の通常文字には使わず、意味のあるUI部品の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では必要なUIの視覚情報は隣接色と3:1以上が基準です。ティールは濃い■#1C284Aの中に置く主要ボタンや選択中ラベルなどへ絞ると、青のまとまりを保ちやすくなります。