強制カラーモードの有効化手順
このデモはOSレベルで強制カラーモードを有効にするか、Chrome DevTools でエミュレートして確認します。
Windows
- 設定 → アクセシビリティ → コントラストテーマ
- スタイルのいずれかを選択
- 「適用」ボタンをクリック
ショートカット: Alt + Shift + PrintScreen
Chrome DevTools
- ⌘ + ⌥ + I で DevTools を開く
- ⌘ + ⌥ + P でEmulate CSS media feature forced-colorsまたはCSS forced-colorsをエミュレートするを実行する
ページリロードなしで即座に切り替わります
macOS
macOS の「コントラストを上げる」はアクセシビリティ設定にありますが、
forced-colors メディアクエリには対応していません。
→ Chrome DevTools のエミュレーションをご利用ください
ラジオボタンの選択状態
ラジオボタンをCSSで装飾した際に、選択状態が可視化されないことがあります。
選択状態をbackground-colorの変化だけで表現していると、強制カラーモードで全てが同じ ButtonFace色になり、どれが選択されているかわからなくなります。
選択状態に border: 2px solid transparent を追加するだけで、強制カラーモードで ButtonText 色の境界線が現れ、選択状態が明確になります。
ドロワーの境界線
ドロワーの境界を box-shadow だけで表現すると、強制カラーモードで影が消えて境界がわからなくなることがあります。
box-shadowは強制カラーモードで無効化されます。ドロワーの境界線が視覚的に認識しにくくなります。
border-left: 1px solid transparent を追加すると、強制カラーモード時に currentColor の境界線が現れ、ドロワーとページの境界が明確になります。
ボタンの優先度表現
ボタンの優先度（プライマリ・セカンダリ）を色だけで表現すると、強制カラーモードで意図しない見た目になり、ユーザーにとってどのアクションが重要かわからなくなります。
色の違いだけでボタンの優先度を伝えています。強制カラーモードでは プライマリの背景色が ButtonFace で統一され、ボタンの形がわからなくなり、優先度が低く見えてしまいます。
プライマリボタンに border: 5px double transparent を追加することで、強制カラーモードで ButtonText 色のダブルボーダーが現れ、ボタンの強調が視覚的に際立ちます。
アイコン付きボタン
ボタンのアイコン色によっては、強制カラーモードでアイコンが見えづらくなってしまうことがあります。
強制カラーモードでは背景画像として埋め込んだ矢印アイコンが消えます。
SVGの色が fill や stroke で指定されている場合、強制カラーモードで背景色と同化してアイコンが見えなくなることがあります。
インライン SVG に currentColor を使うことで、強制カラーモードでもアイコンが ButtonText 色で表示されます。
インライン SVG で stroke='currentColor' を使うことで、強制カラーモードでも ButtonText 色が継承され、アイコンが常に表示されます。