ミッドナイトブルーとシルバーを使う｜暗い画面の文字と装飾

ミッドナイトブルーとシルバーは、暗いWeb画面に落ち着いた明るさを添えたいときの組み合わせです。ただし、見出しも本文も線も同じシルバーにすると、情報の優先順位が分かりにくくなります。背景を暗く保ちながら、文字と装飾をどう使い分けるか、Webサイトのメイン画面と情報カードを例に考えます。

シルバーは文字と装飾で役割を分ける

ミッドナイトブルーは黒に近い深い青で、画面用の一例として■#121D34を使います。シルバーには、CSSの色名「silver」に対応する■#C0C0C0を選びます。HEX（ヘックス）カラーコードは、「#」から始まる英数字で画面上の色を表す形式です。この記事では6桁の表記を使います。これらは単色の指定なので、本物の金属に見られる反射や光沢までは表現しません。

背景にはミッドナイトブルー■#121D34、大切な見出しや本文には白に近い■#F4F6FA、補足文と短い装飾線にはシルバー■#C0C0C0を割り当てます。白に近い文字を主役にし、シルバーは一段控えた情報や飾りに回す考え方です。文字と装飾の色が同じでも、文字サイズ・太さ・周囲の余白を変えると役割を区別できます。

暗いWeb画面で試す2つの配置例

例1：トップ画面の見出しとボタン

サイト上部の広い背景をミッドナイトブルー■#121D34で統一し、キャッチコピーは明るい■#F4F6FA、説明文はシルバー■#C0C0C0にします。見出しの脇にシルバーの短い縦線を置き、ほかの飾り線は増やしません。これなら見出しが先に目に入り、線は情報の区切りとして働きます。申し込みボタンを配置するなら、背景を■#F4F6FA、ボタン内の文字を■#121D34とし、シルバーの飾りより操作部分を明確にします。

例2：情報カードが並ぶダーク画面

ページ背景の■#121D34に対し、カードの面を少し明るい青■#263650に変えます。カードの見出しには■#F4F6FA、補足説明には■#C0C0C0を使います。カード同士の区切りが必要なら、すべてを銀色の太い枠で囲むのではなく、余白を取り、選択中のカードだけシルバー■#C0C0C0の枠と「選択中」の文字を添えます。色だけで状態を伝えないことも大切です。

銀色の濃さを変えるときはコントラストを確認

コントラスト比は、文字などと背景の明るさの差を示す数値です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。今回の配色では、■#F4F6FAの文字と■#121D34の背景は約15.51:1、シルバー■#C0C0C0と■#121D34は約9.23:1、シルバー■#C0C0C0とカード背景■#263650は約6.69:1で、いずれも通常サイズの文字の基準を満たします。

一方、シルバーを暗くした青みのあるグレー■#8594AAは、背景が■#121D34なら約5.45:1ですが、カードの■#263650の上では約3.95:1です。後者は通常サイズの文字のAA基準に届きません。同じ文字色でも、載せる面が変われば判断が変わります。

また、ページ背景■#121D34とカード背景■#263650だけの比は約1.38:1です。操作に必要な境界や状態表示をこの差だけに頼らず、意味のある枠やアイコンは隣接色に対して原則3:1以上か確認してください。純粋な飾り線には同じ基準が一律に適用されるわけではありません。HueRollで確認できるのは選択色と白・黒とのコントラストなので、ミッドナイトブルーとシルバーなど任意の2色の比は別途計算して確かめます。