【2020年版】ハイコントラストモード対応で圧倒的おもてなし！Chromium Edge含む4ブラウザ対応はこれでバッチリ

Chromium エンジンの Edge が僕のパソコンにも降って来ていました。これ以前に Microsoft が開発していた EdgeHTML エンジンは「現代的なウェブとの相互運用性」を重視したといいます。しかしどうしてもシェアで先行する Chrome との差異はあって Web 開発者らの支持が得られなかったのだと思われます。しかし省電力性の高さなどユーザーにユニークな選択肢を提供してきた点は、もっと顧みられて良い筈です。

Chromium Edge がハイコントラストモードをサポート

ハイコントラストモードをオンする

ハイコントラストモードの独特の挙動を把握する

ブラウザ別ハイコントラストモードの違い

グレード	ブラウザ	-ms-high-contrast	モード切替の反映	ユーザー設定の色の反映
A	IE10, 11, Edge18-	◎	〇	だいたい OS 側で設定した色。メディアクエリ内で自由な色に上書き可能。
B	Windows 版 Chromium Edge85	〇	〇	だいたい OS 側で設定した色。(*2)メディアクエリ内でシステムカラー限定で上書き可能。(2022/03/17)
C	IE9 以下	×	〇	だいたい OS 側で設定した色。
D	Windows 版 Firefox(新しめ *1)	×	〇	背景色と選択テキストの色のみ OS 側で設定した色。リンク色はブラウザ側で固定の模様設定する。
E	Windows 版 Pale Moon, Firefox(古めGecko 1.8+ *1)	×	onload 時のみ
Z	非サポート	×

1. Windows 版 Firefox がどのバージョンで D, E グレードへ移るのかは未調査です。E グレートを Gecko 1.8 からサポートします。(2022/03/16)
2. Edge85 で :before, :after 疑似要素の背景色が維持するバグがある。Edge84 では起きていない。

ハイコントラスト色設定のWeb文書への反映

ハイコントラスト設定画面のプリセットやユーザー設定がどう Web 文書に反映するのか、詳しく見ていきます。

背景色

Windows の設定がドキュメント全体、全要素に適用されます。<blockquote>, <pre> 等を背景色でスタイリングしている場合は枠線等で囲みます。

あらかじめ背景色と同色の枠線で囲んでおくと後述する Javascript によるフォールバックに失敗した場合も安全です。

背景画像

非表示になるので、コンテンツを背景画像で提供している場合に不味いです。

この対策には :before, :after 疑似要素と content:url() を使う方法が『High Contrast Proof CSS Sprites』で紹介されています。背景を無効にした印刷でもコンテンツが欠落しないのでハイコントラストモード対応に関わらず導入をお勧めします。

テキスト色

ハイパーリンクを除いて一色になります。色は背景色に対して自動で黒か白を割り当てられるようです。<strong>, <em> 等の強調をテキスト色の違いでスタイルしている場合は太字や下線等を設定します。

ボーダー色

テキストと同じ色になります。要素に薄色の線を入れている場合は鮮やかな色になってしまいます。五月蠅い印象になるならハイコントラストモード時は線を消したり点線にするのも手です。

ハイパーリンクのテキスト色とボーダー色

フォーム部品の色

“淡色表示のテキスト”が IE ではテキストとボーダーに、Chromium Edge はテキストだけに配色されました。Firefox, Goanna ではフォーム部品もテキスト色と同じでした。

選択テキストの色

上記全ての環境で Windows の設定が適用されました。

ハイコントラストモード対応のポイント

1. -ms-high-contrastメディア特性と JavaScript でフォールバック
2. IE10+, Edge18 以下に比べて機能の劣る Chromium Edge だけに CSS ハック
3. border-color に transparent を使って三角形を作っている場合
4. 腰を据えて各部品を再デザインする、将来の新機能に備える体制を
5. ここ一番で使える！色の反転がハイコントラストモードでも有効

1. -ms-high-contrastメディア特性とJavaScriptでフォールバック

IE10 以上と Edge はハイコントラストモード用の -ms-high-contrast メディア特性が用意されています。

この IE10 以上と Edge18 以下の -ms-high-contrast メディア特性は強力で、このメディアクエリ内では各種色の指定も可能です。Web サイト全体のスタイル指定をこの中に書いてしまえば、通常と全く同じ見た目にも出来そうです。もちろんハイコントラストモードを選んだ閲覧者の意図に沿って抑制的に使用します。

@media (-ms-high-contrast:none){ /* IE10, 11 のみ */ }
@media (-ms-high-contrast:active){ /*  */ }
@media (-ms-high-contrast:white-on-black){ /* 黒地に白文字 */ }
@media (-ms-high-contrast:black-on-white){ /* 白地に黒文字 */ }

これ以外の IE9 以下と Firefox, Goanna では javascript でハイコントラストモードを判定して文書のスタイルを変化させます。僕は『Checking for Windows High Contrast』を元にしたコードを使ってハイコントラストモード専用の .css を追加で読み込むことにしました。専用 CSS の切り出しには postCSS を使った gulp タスクを書いています。

2. IE10+, Edge18に比べて機能の劣るChromium EdgeだけにCSSハック

IE や EdgeHTML ではサポートされなかった prefers-color-scheme と組み合わせることで、Chromium Edge だけにスタイルを当てることが出来ます。次のボーダーを使った三角形などで、Edge18 以下用スタイルの上書きが必要になります。

印刷メディアにも適用されるのを避けるために only screen も付けておきます。prefers-color-scheme:dark だけを指定すると印刷メディアにも効いてしまうことは Chrome でも起こります。併せてチェックしておくのが良いでしょう。

@media only screen and (-ms-high-contrast:active) and (prefers-color-scheme:dark),
    only screen and (-ms-high-contrast:active) and (prefers-color-scheme:light) {
    /* 今のところ Chromium Edge only */
}

3. border-XXX-color:transparent を使って三角形を作っている場合

ボーダー色がテキスト色と同じになってしまう為に、一部の辺の色を transparent 等にして作る三角形が、ハイコントラストモードでは四角形になってしまいます。-ms-high-contrast メディア特性の中で自在に色指定が出来る IE10+, Edge18 以下は次のようにすれば OK です。

@media (-ms-high-contrast:active){
  border-top-color : transparent;
  border-bottom-color : transparent;
}

しかし Chromium Edge, IE9 以下と Firefox、Goanna ではどうすればよいのでしょう？

forced-colors:active をサポートする Chromium Edge 79+, Chrome 89+, Fireox 89+ ではシステムカラーの背景色を使う

Chromium Edge ではシステムカラーの背景色を指定します。透明色では無く背景色なので、やや使い勝手が悪いです。(2022/03/17 追記)

@media (forced-colors:active){
  border-top-color : Window; /* or Canvas */
  border-bottom-color : Window;
}

IE9以下とFirefox89未満、Goannaでは要素の回転で表現する

次の記事では border-color:transparent では無く transform:rotate を使った三角形の作り方を紹介しています。ブラウザが要素の回転をサポートしていれば三角形は可能です。SVG や VML でのフォールバックは未検証です。

【2017年版】CSSのみで三角形を作る方法を解説するよ｜ついでに台形や扇形も作ってみるよ

僕が採用した方法はこの記事を元にしました

CSS3を極めたいなら知っておきたい三角形を作る3つの方法

transform:rotate と併せて clip:rect を使う方法。こちらの方が元々の border-color:transparent を使った三角に近い表現になる。

4. 腰を据えて各部品を再デザインする、将来の新機能に備える体制を

コントラストモード別に :hover, :focus, :hover:focus 等のインタラクションを、サイトの各部品に設定するにあたってアドホックに取り組んでしまうと、コードが散らかってスタイルの一貫性も損なわれ易いです。ハイコントラストモードの挙動を把握した上で、部品の一覧を用意して腰を据えて取り組むのが良いです。

-ms-high-contrast の姉妹の prefers-color-scheme:dark メディア特性も Chrome, Safari, Firefox で提供されています。これらを合わせて対応していけたら良いですね。

僕は自身の小さなブログプロジェクトですが、仕切り直してやり遂げる事ができました。そうそう Web サイトへのインタラクションの設定については『リンクテキストのインタラクションを整理する』も参照ください。

5. ここ一番で使える！色の反転がハイコントラストモードでも有効

スタイルの自由度が低くて困った時に最期に頼りになったのが filter:invert(1) と outline:solid invert でした。アイコン画像の色を反転させたい場合など、追加の画像と、ユーザーのネットワークへの負荷を避けることが出来ました。太いボーダーを背景色でくり抜くことも出来て重宝しました。

特に outline:solid invert は -ms-filter が無効な IE8 でも反転効果が使えてパワフルです。このテクニックについて解説した記事『Invert a whole webpage with CSS only』に助けられました。

おわりに

ハイコントラストモードの存在を遅ればせながら2018年の暮れに知った僕はブログの対応に着手しました。

特殊な挙動に戸惑ったり、フォールバック用の javascript を書いたり。試行錯誤を通して Web サイトの各部品に対してハイコントラストモード用を加えたデザインポリシーの再定義から取り組む必要があることにも気づかされました。

やることは決して少なくは無かったですが自身の Web サイトが晴れてハイコントラストモードに対応し、一定のデザイン性を維持している様子を眺めるのは愉しいものです。Web 屋の端くれとして多様なアクセス手段を提供していく地力を養えたことは収穫でした。

お勧め記事

saneyuki_s log > EdgeHTMLを悼む

Gecko エンジン元コントリビューターによる記事。必読です！

アクセシビリティを意識した CSS の書き方 > Windows でのハイコントラストモード

ハイコントラストモードについてアクセシビリティの思想側から。

勝手にChromium版になったMicrosoft Edgeをアンインストールする

Chromium Edge をアンインストールして EdgeHTML を再使用する方法など。

ブランド訴求と「ハイコントラスト」モード

Web ドキュメント側の実装だけでハイコントラストバージョンを提供しているブランドの例。

prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features

ダークモード対応に関する記事。ハイコントラストモードとポイントは異なりますが良記事です。