本文へ移動

§18-06Accessibility

高コントラストモード

配色を強めて文字と背景の差を大きくする。

弱視や強い日差しの下でも文字と境界を見分けられるよう、配色の差を強める。見た目を選べない人のための設定で、公共性の高いサービスでは必須。

実装のポイント

OS 設定は prefers-contrast: more と forced-colors: active で検出する。forced-colors 下では背景色が無視されるので境界は border で示す。

特徴
  • アクセシビリティ
  • 状態管理
デモで使っているもの
  • shadcn/ui
  • lucide-react