prefers-contrastでハイコントラストモード
CSS prefers-contrastメディア機能でハイコントラストモードを検出。ボーダーを強化し、グラデーションを削除し、可読性を向上。
User Preferences
詳細な説明
prefers-contrastでハイコントラストモード
prefers-contrastメディア機能は、ユーザーがOSのアクセシビリティ設定でより高いまたは低いコントラストを要求しているかを検出します。
クエリ
@media (prefers-contrast: more) {
:root { --border: #000000; --text: #000000; }
}
許容値
- more -- コントラストの増加を希望
- less -- コントラストの減少を希望
- no-preference -- 特に希望なし
- custom -- カスタムの強制カラーパレット
調整すべき点
- 微妙なグラデーションを削除
- ボーダーを強化
- テキストのコントラストを増加（WCAG AAAの7:1以上）
- 透明度を削除
- フォーカスインジケーターを強化
ユースケース
OS設定でハイコントラストモードを有効にしている弱視のユーザーの可読性を向上させるためにこのクエリを使用してください。