ダークモードでコントラストが足りなくなる文字とアイコン

どちらも基準を満たし、どちらも各色にダーク用の値を持たせます。違うのは、その値を置く場所です。テーマのトークンはすべての色を1か所にまとめるため、デザインシステムの配色とコントラスト比をまとめて確認でき、トークンを使う新しいコンポーネントは、誰も意識しなくても両方のテーマで正しくなります。複数のコンポーネントが同じグレーを共有するなら、トークンを選びます。light-dark() は各組をコンポーネントの1行に置くため、色にダーク用の値があることがレビューですぐ分かり、2つ目のブロックも要りません。独自の色を持つコンポーネントや、色の数が少ないサイトに向いています。どちらの場合も、アイコンは currentColor にする必要があります。SVGに直接書かれた色には、トークンも組も届かないからです。

各色は、ページの背景だけでなく、ダークテーマで置かれるすべての背景の上で測ります。ダークテーマでは、明るい面で奥行きを表すことが多いため、#111827 のページの上で基準を満たすグレーも、より明るいカード、バナー、メニューの上ではコントラストが下がり、届かないことがあります。

システムの設定ではなく、サイト独自の切り替えボタンで変わるテーマにも、同じ値が必要です。ボタンでルートに data-theme="dark" などの属性を設定し、メディアクエリーと同じトークンをそのセレクターでも定義し直すか、ボタンでルートの color-scheme を切り替えて light-dark() を従わせます。WCAGの1.4.3の解説ページは、利用者が選んだ色が基準を下回ることを「必要な値に戻す仕組みがあれば」認めています。ライトテーマにワンクリックで戻せる切り替え式のダークテーマがこれに当たるかどうかは、WCAGでもまだ結論が出ていません。システムの設定に合わせるテーマには、そのワンクリックがありません。ダークモードの利用者全員が受け取るページそのものです。いずれにしても、読むためにダークモードを必要としている人もいるため、提供するテーマはすべて測ってください。

Tailwindでは、色のユーティリティごとに dark: の組が必要です（text-gray-500 dark:text-gray-400）。1つでも書き忘れると、ライトの値のまま残ります。色をダークテーマで変わるテーマ変数として定義すれば、ユーティリティが上のトークンと同じく役割を表すようになり、書き忘れる組がなくなります。

<img> のファイルとして表示するアイコンは、currentColor を使えません。ページのCSSがファイルの中まで届かないためです。単色のアイコンはSVGとしてインラインで書くか、ダークテーマ用に別のファイルを用意します。SVGファイルの中に prefers-color-scheme のクエリーを書く方法もありますが、Safariは <img> で読み込んだSVGでは、このクエリーを長く無視してきました。ロゴの文字は1.4.3の対象外ですが、黒いロゴが暗いページに置かれると、表示が壊れたように見えます。<picture> に <source media="(prefers-color-scheme: dark)"> を加え、明るい版を指定します。

フォーカスの枠も同じ問題を起こします。#1a4fd0 の枠は白の上で6.83:1ですが、#1f2937 のカードの上では2.15:1です。枠にもトークンか組を用意します。iframeで埋め込んだウィジェットは、ウィジェット側の配色のまま表示されます。ダークの設定があれば使い、なければ明るいまま残します。ウィジェット自体の色が基準を満たしていれば問題ありません。