ミッドナイトブルーに合う色は？暗い背景を活かす配色

ミッドナイトブルーをWebサイトの背景に使うとき、暗くなりすぎずに見出しやボタンを目立たせるには、何色を合わせればよいのでしょうか。深い青を主役にしながら、文字色、アクセント、明るいセクションの役割を分ける方法を、イベント告知ページの配色例で紹介します。

ミッドナイトブルーには白系・淡い青・ゴールドを合わせる

ミッドナイトブルーは夜空を思わせる濃い青です。Webで使うCSSの名前付き色「midnightblue」には■#191970が定義されています。色名は商品やデザイン資料によって異なる濃淡を指す場合もあるので、制作時は色名とカラーコードを一緒に共有しましょう。HEX（ヘックス）は、Webの色を「#」と6桁の16進数で表す方法です。

暗い背景には、文字用の温かみのある白■#F7F5EEを合わせると、明るさに大きな差を作れます。日付などの補足には淡いブルー■#C3CCE8を使い、落ち着いたゴールド■#E6B65Aは重要なボタンだけに絞ると、同じ画面でそれぞれの役割が分かります。明るいセクションを作る場合、本文は濃い青灰■#263451に切り替えます。

ゴールドを広い背景や長文の文字色として増やすのではなく、「次に押してほしいボタン」を示す小さな面積に使うのが、この配色例の基本です。

星空観察イベントの案内ページでの配色例

夜の観察イベントを案内するページを想定します。最初の大きな案内部分と、その後の詳しい説明部分で背景を切り替えると、暗い色を活かしながら情報を読み進めやすくなります。

• 冒頭の背景：ミッドナイトブルー■#191970。見出し「星空観察会」を温かみのある白■#F7F5EEで載せ、主役を明確にする。
• 日付・会場の案内：淡いブルー■#C3CCE8。暗い背景■#191970の上で、見出しより控えめな色にする。
• 申込みボタン：ゴールド■#E6B65Aの背景とミッドナイトブルー■#191970の文字。「参加を申し込む」と操作内容も書く。
• 詳細説明エリア：温かみのある白■#F7F5EEの背景に、濃い青灰■#263451の本文を配置する。
• 区切りや小さな装飾：ゴールド■#E6B65Aを短い線に使う場合も、申込みボタンより目立つ数や太さにしない。

冒頭に開催概要と申込みボタンを置き、続く明るいエリアに持ち物・集合場所・注意事項を並べる構成です。背景の切替だけに頼らず、見出しと余白もそろえて内容を区切ります。暗いカードを重ねる場合は境界が見えにくくなることがあるため、必要に応じて明るい線や十分な余白を加えます。

文字とボタンのコントラストを確認する

文字と背景の明るさの差を数値で示したものがコントラスト比です。Webアクセシビリティの指針「WCAG 2.2」のAA基準では、通常の文字は4.5対1以上、大きな文字は3対1以上が必要です。

ミッドナイトブルー■#191970と温かみのある白■#F7F5EEの組み合わせは約13.61対1、同じ背景に淡いブルー■#C3CCE8を載せた場合も約9.28対1です。ゴールド■#E6B65Aのボタンにミッドナイトブルー■#191970の文字を置くと約7.92対1になり、いずれも通常文字の基準を上回ります。

一方、ゴールド■#E6B65Aの上に白■#FFFFFFの文字を載せると約1.87対1で不足します。また、ゴールド■#E6B65Aを明るい背景■#F7F5EEの上に小さな文字として使っても約1.72対1です。アクセント色を使うときは、隣り合う背景と文字の組み合わせを必ず確認してください。写真や半透明の色を重ねる場合は、実際に表示される背景色で再計算し、重要な情報を色だけで伝えないようにしましょう。