prefers-contrast

概要

OSのコントラスト設定（高コントラストモードなど）を検出し、UIのコントラストを調整できる。more が設定されている場合にボーダーを強調したり、色のコントラスト比を上げたりする。Windowsのハイコントラストモードにも対応できる。

対応ブラウザ

基本構文

@media (prefers-contrast: more) {
  :root {
    --border-color: #000000;
    --text-color: #000000;
    --bg-subtle: #ffffff;
  }

  .card {
    border: 2px solid var(--border-color);
  }

  .muted-text {
    color: var(--text-color);
  }
}

@media (prefers-contrast: less) {
  :root {
    --text-color: #666666;
  }
}

実務での使いどころ

• 高コントラスト対応

  視覚障害のあるユーザー向けに、ボーダーを太くしたりテキスト色を濃くしたりしてコントラストを強調する。

注意点

アクセシビリティ

• 高コントラストモードのユーザーが使いやすいように、薄い色や微妙なグラデーションによる情報伝達を避ける。
• WCAG AAA（コントラスト比 7:1）を目指すとより多くのユーザーに対応できる。

参考リンク

• MDN Web Docs — prefers-contrast
• Can I use — prefers-contrast