ミニマルなダークグレーのロゴを完璧に仕上げたのに、Chromeのダークモードのタブバーで完全に消えてしまった経験はありませんか？ブラウザはあなたのブランドガイドラインなど気にしません。彼らが気にするのはUIのレンダリングだけです。アイコンが背景に溶け込んでしまえば、ユーザーは開いている40個のタブの中からあなたのサイトを見失ってしまいます。

通常、コントラスト比はテキストに対してのみ厳密に考えられがちです。しかし、Faviconは重要なUIの道標です。予測不可能なブラウザのテーマ環境でも視認性を保つには、厳格なFaviconコントラスト比ガイドが必要です。見えないアイコンを修正していきましょう。

アイコンテストの前提条件

始めるのに多くの準備は必要ありません。現在のFaviconファイル（できればベクター版）を用意し、別のタブで標準的なWCAGコントラストチェッカーを開いておくだけです。一般的なブラウザのUI背景に対して、最低でも3:1のコントラスト比を目指します。

ステップ1：ブラウザタブの背景色を把握する

コントラストを計算する前に、何と比較するのかを知る必要があります。ブラウザタブの背景は純白や純黒ではありません。

もしFaviconが純黒（#000000）の場合、Chromeのライトモードでは非常にシャープに見えます。しかしダークモードでは、コントラスト比が絶望的な1.1:1まで低下し、完全に透明になってしまいます。

ステップ2：比率を計算して調整する

アイコンのメインカラーのHEXコードを取得し、コントラストチェッカーで #202124 と比較します。スコアが3.0未満の場合、視認性に問題があります。

GitHubはこの処理が非常に優れています。デフォルトのOctocatロゴは黒です。ダークモードでは、単にロゴ全体を純白に反転させる（これはキツく見え、細部が潰れる原因になります）のではなく、白いシルエットに切り替えます。これにより、どんな暗いタブでも4.5:1を優に超えるコントラスト比を保証しています。

色が変わる動的なSVGを使用するか、保護用の背景を持つ単一の静的画像を使用するか、戦略を決める必要があります。

ステップ3：動的SVGによる修正の実装

最もエレガントな解決策は、CSSを埋め込んだSVG Faviconを使用することです。これにより、アイコンがユーザーのシステム設定にリアルタイムで反応できるようになります。これは全体的なFaviconアクセシビリティの核となる要素です。

SVGファイル内に埋め込むべき正確なコード構造は以下の通りです：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    .icon { fill: #1A1A1A; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #F8F9FA; }
    }
  </style>
  <path class='icon' d='M50 10 L90 90 L10 90 Z' />
</svg>

これを favicon.svg として保存し、HTMLでリンクします。ブラウザがダークモードに切り替わると、SVGは瞬時にダークグレーからオフホワイトに反転し、完璧なコントラスト比を維持します。

ステップ4：普遍的なフォールバック戦略

すべてのブラウザがSVG Faviconをサポートしているわけではありません（古いSafariなど）。依然としてフォールバック用のPNGまたはICOファイルが必要です。PNGはCSSメディアクエリを使用できないため、明るい背景と暗い背景の両方でコントラストテストに合格する単一のデザインが必要です。

私のお気に入りのテクニックは「保護ストローク」です。暗いアイコンの周りに1pxまたは2pxの半透明の白いストローク（例：rgba(255, 255, 255, 0.8)）を追加します。明るいタブではストロークは見えません。暗いタブではストロークが後光のように機能し、3:1のコントラスト要件をクリアするシャープな境界線を作り出します。

あるいは、透明なロゴを単色の角丸の背景（ピル形状など）の中に配置することもできます。その背景色が #F1F3F4 と #202124 の両方と良好なコントラストを保つようにしてください。サイトのヘッダーと完璧に色を合わせたい場合は、Faviconのカラースキームマッチングに関するガイドをお読みください。

避けるべきよくある落とし穴

動的アイコンに純黒（#000000）や純白（#FFFFFF）は絶対に使用しないでください。純色は最新のOLED画面で眼精疲労を引き起こし、ブラウザがアクティブなタブに使用する微妙なグラデーションと衝突することがよくあります。オフブラックとオフホワイトを使用しましょう。

また、細く複雑な線に頼るのも避けてください。1pxの線は数学的なコントラスト比テストには合格するかもしれませんが、ブラウザのタブで16x16ピクセルに縮小されると、アンチエイリアス処理によってぼやけた塊になってしまいます。

高コントラストのSVGとフォールバック用のPNGの準備ができたら、Mzu favicondlに通して、サーバーが必要とする正確なサイズとICOフォーマットを生成しましょう。見えるタブこそがクリックされるタブです。不適切なコントラストであなたの努力を無駄にしないでください。