ハイコントラスト表示とメディアクエリー
エグゼクティブ・フェロー 木達この記事はミツエーリンクス Advent Calendar 2020 - Adventarの22日目の記事です。
主に弱視のユーザーが利用するハイコントラストモード（コントラストの高い色の組み合わせで画面を表示するモード）において、Webコンテンツのスタイル変更を可能にするメディアクエリーとして、古くから-ms-high-contrastが知られています。ベンダー接頭辞からおわかりのように、Web標準ではなくMicrosoftの独自実装ですが、値にはactive / black-on-white / white-on-blackの3種類が用意されており（none値はEdge 18で廃止）、それぞれの用途は以下のコードサンプルでコメントに記した通りです。
@media (-ms-high-contrast: active) {
/* ハイコントラストモード向けのスタイル */
}
@media (-ms-high-contrast: black-on-white) {
/* 白地に黒のハイコントラストモードに特化したスタイル */
}
@media (-ms-high-contrast: white-on-black) {
/* 黒地に白のハイコントラストモードに特化したスタイル */
}WindowsのデフォルトブラウザーがChromiumベースのEdgeとなって久しい今、この独自実装はWeb標準のMedia Queries Level 5によって異なるメディアクエリーに置き換えられつつあります。具体的にはprefers-contrastメディアクエリーがそれで、今年11月21日付けの編集者の草案では以下の4つの値が定義されています。
no-preference- ユーザーはコントラストの嗜好をシステムに通知していない
less- ユーザーはより低いコントラストを好むことをシステムに通知している
more- ユーザーはより高いコントラストを好むことをシステムに通知している
forced- 強制カラーモード（色のコントラストによってテキストの読みやすさを向上させることを目的としたアクセシビリティ機能）が有効化されている
ややこしいのは、今年7月31日付けの作業草案ではforced-colorsという別のメディアクエリーが、prefers-contrastと並列に定義されていた点です。forced-colorsメディアクエリーは、強制カラーモードが有効かどうか検知するもので、none / activeの2つの値が定義されていました。forced-colors: activeとprefers-contrast: forcedは意味的に重複しているのでは？ との議論があり、11月21日付けの編集者の草案ではforced-colorsはレガシーな位置づけとなっています。
上記の変更を踏まえると、Styling for Windows high contrast with new standards for forced colors - Microsoft Edge Blogの「Differences from legacy implementations」で紹介されている内容（過去の記法の書き換え方）は、以下のように「読み替える」ことができそうです。もっとも、勧告前の仕様やそれに基づくブラウザの実装は、変更される可能性がある点は注意が必要ですが......いわゆるダークモード対応で必須のprefers-color-schemeメディアクエリーと組み合わせる点が興味深いです。
| 旧記法 | 新記法 |
|---|---|
@media (-ms-high-contrast: active) { ... } | @media (prefers-contrast: forced) { ... } |
@media (-ms-high-contrast: black-on-white) { ... } | @media (prefers-contrast: forced) and (prefers-color-scheme: light) { ... } |
@media (-ms-high-contrast: white-on-black) { ... } | @media (prefers-contrast: forced) and (prefers-color-scheme: dark) { ... } |
ユースケースとしては、Quick Tips for High Contrast Mode | Sarah Higleyにあるように、基本的な見た目はシステムに委ねつつ、部分的に手を加えるのが実用的ではないかと思います。同時に、こうしたメディアクエリーを活用するための大前提として、OSレベルの足並みがもう少し揃わないとつらいな、とも思います。WindowsとmacOSそれぞれにおいて、ハイコントラスト表示の提供に現状どのような違いがあるかは、Adding prefers-contrast to Firefox - Mozilla Hacks - the Web developer blogが参考になります。