【CSS】@media (prefers-contrast: more) でハイコントラストに対応する

どうも、くまだです。

@media (prefers-contrast: more) に関するメモ。

@media (prefers-contrast: more) とは

OSやブラウザの設定でハイコントラストモードをオンにしているユーザーを検知するメディアクエリです。

視覚的に見づらさを感じるユーザーへの配慮として使います。

@media (prefers-contrast: more) {
  /* ハイコントラスト時のスタイル */
}

通常のメディアクエリと同じ書き方です。

例えば薄いテキストカラーや細いボーダーを強調するのに使います。

/* 通常時 */
.card {
  color: #888;
  border: 1px solid #eee;
}

/* ハイコントラスト時 */
@media (prefers-contrast: more) {
  .card {
    color: #000;
    border: 2px solid #000;
  }
}

forced-colors: active との違いは、Windowsの強制カラーモードは forced-colors: active で検知します。テキストカラー・ボーダーなど視認性に直結する部分だけ対応するだけで十分です。

prefers-contrast: more はユーザーの好みの設定を検知するのに対して、forced-colors: active はOSが強制的にカラーパレットを上書きしてる状態を検知する。

@media (forced-colors: active) {
  /* Windowsのコントラストテーマ適用時のスタイル */
}

ここまで読んでくださりありがとうございました。