HTML+CSSバナーのダークモード問題！ブラウザの強制反転を無効化してデザインを保つ方法

昨今のWeb制作では、AIOやGEO（生成AI最適化）への対応として、画像内のテキスト情報をAIクローラーに正しく認識させるため、画像バナーをHTMLとCSSで作成するケースが増えています。
テキストデータ化によるSEO効果の向上や、画像ファイルサイズ削減による表示速度改善の面でも大きなメリットがあります。

ただ、ここで気になるのが、Chromeやスマートフォンなどのブラウザに搭載されている強制ダークモード（自動色反転機能）によるデザインの変化です。

ダークモード環境では、ブラウザが自動で色の反転処理を行うため、意図しない配色に変わってバナーのデザインが崩れたり、文字の視認性が落ちたりします。

Chromeのデベロッパーツール（Renderingタブなど）から「Automatic dark mode」を選択すると、この強制反転の挙動を確認できます。

これまではメディアクエリ（@media）を使ってダークモード用のスタイルを別途書き直す対応が主流でしたが、記述量が増えて運用の手間がかかるデメリットがありました。

そこで今回は、メディアクエリを使わずにCSSを2行追加するだけで、バナーをダークモードの反転対象にせず、元のライトモードのデザインを保つ方法をご紹介します。

ダークモードでバナーのデザインを保つ方法

実際のサンプルコードで挙動を確認していきます。
まずはHTMLとCSSの設計です。

Webサイトの設置場所やデザイン方針に合わせて、全体をリンクにするパターンと、部分的にリンクにするパターンの2つを用意しました。

HTML

<!-- サイドバー バナー（全体をaタグで囲うパターン） -->
<div class="ai-banner-wrapper">
  <a href="#" class="ai-banner">
    <div class="ai-banner__inner">
      <!-- ここにバナーのコンテンツが入ります -->
    </div>
  </a>
</div>

<!-- コンテンツ バナー（外枠をdivにして、中のボタン等を部分リンクにするパターン） -->
<div class="ai-banner">
  <div class="ai-banner__inner">
    <!-- ここにバナーのコンテンツが入ります -->
    
    <!-- 中の一部分（ボタンなど）だけをリンクにする -->
    <a href="#" class="ai-banner__btn">
      詳細・導入手順はこちら
    </a>
  </div>
</div>

続いてCSSです。

全体をリンクにする場合も部分的にリンクにする場合も、CSSでの対策は共通です。

CSS

.ai-banner {
  display: block; 
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;

  /* 強制ダークモードによる色反転をブロックしてライトモードを維持 */
  color-scheme: only light;
  forced-color-adjust: none;

  .ai-banner__inner {
    /* ここに背景画像やパディングなどの装飾を記述 */
  }
}

追加した2つのプロパティの役割について見ていきます。
従来の @media (prefers-color-scheme: dark) のようにダークモード用のスタイルを個別に定義するのではなく、「この要素はダークモードの計算対象から除外する」とブラウザへ直接指示を出す方法です。

① color-scheme: only light; の役割

color-scheme は、その要素がライトモード・ダークモードのどちらに対応しているかをブラウザに指定するプロパティです。

通常、color-scheme: light; と指定するだけでは、一部ブラウザの自動反転処理（Auto Dark Mode）によって色が書き換えられてしまうケースがあります。
ここに only を付与して only light と記述することで、Chromium系ブラウザの自動反転処理に対して「この要素（および子要素）にはダークテーマを適用しない」という明確な指定を行えます。

② forced-color-adjust: none; の役割

forced-color-adjust は、OSやブラウザが持つハイコントラストモードやアクセシビリティ（ユーザー補助）機能が、Webサイト本来のカラー設定を上書きする動きを制御するプロパティです。

これを none に設定することで、端末固有のダークモード機能や省電力モードがバナー内の文字色（color）や背景色（background-color）を変えてしまう挙動を防げます。

CSS指定の有無による実際の表示結果の違いがこちらです。

CSS対策なし（強制反転によって文字や背景の視認性が低下した状態）

CSS対策あり（2行追加することでライトモードのデザインを維持）

外枠のタグが a でも div でもうまく適用できる

この対策は、親要素となるクラス（.ai-banner）に対して指定を行うため、HTMLの構造に左右されません。

バナー全体をリンクにする場合は <a> タグ、中のボタンのみをリンクにする場合は <div> タグといった使い分けが考えられますが、どちらの場合でも親要素に color-scheme: only light; が指定されていれば、配下のテキストや画像、ボタン要素まで一括で反転処理を無効化できます。

そのため、HTMLの要素（a や div）を変更するたびにCSSを書き直す必要はありません。

まとめ

画像バナーをHTMLとCSSで作成することで表示速度やSEOのメリットを得られますが、ブラウザの自動反転によって意図しない表示になるケースがあります。
ブランドカラーやデザインを意図通りに見せたいパーツを作成する際は、親要素に以下の2行を指定しておくと安心です。

CSS

color-scheme: only light;
forced-color-adjust: none;

メディアクエリでダークモード用スタイルを個別に書く手間が省けるため、HTMLバナーを実装する際のスニペットとして活用してみてください。