エメラルドマウンテンの麓。

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

Firefox 73 からは、ハイコントラストモード時に背景画像を表示する設定が可能とのこと。(2020/09/21)

Firefox 73では新たに、readability backplateという仕組みが導入された。この機能を使うと、背景画像はそのままで、テキストの背後にバックプレートが敷かれ、テキストのコントラストを高める。

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

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

Gecko からフォークした Windows 版 Pale Moon 28.6.0.1 もハイコントラストモードをサポートする

さて、エンジンが Chrome と同じになって全く食指が動かなかった Edge ですが、Microsoft が開発するハイコントラストモードサポートを先行して提供している事を知りました。

ユーザーのハイコントラストで表示して欲しい、という要請を Web 文書に反映するこの機能は、アクセシビリティの点で重要です。これとは別に自身の Web サイトがマイコン画面のようなビビッドな配色になるのも、僕は結構気に入っています。

現在、ハイコントラストモードをサポートする環境は多くなく、IE, EdgeHTML エンジンの Edge, Windows 版の Firefox、そして Gecko からフォークした Goanna エンジンの Pale Moon があります。これに Chromium Edge が加わわりました。

ゆくゆくは prefers-contrast メディア特性として広範なブラウザに実装されるようで楽しみですね。

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

  • shift + alt + print screen を同時に押す。ハイコントラストのオフも同じ。
  • Windows の設定 > 簡単操作 > ハイ コントラスト > ハイ コントラストをオンにする

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

左から Firefox80, Edge85, IE11, Windows のハイコントラスト設定画面

ハイコントラストモードでは貴方の Web サイトのスタイルが大きく変化します。この際もデザインを損なわない為には、独特の挙動を理解するのが最初の一歩です。

この変化は一見すると各ブラウザで似た感じなのですが、よく見ていくと IE+Edge と Gecko+Goanna では結構異なります。IE のバージョン、EdgeHTML と Chromium Edge、Firefox と Pale Moon でも細々と異なり、僕は計5種類に分類したのでした。

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

グレードブラウザ-ms-high-contrastモード切替の反映ユーザー設定の色の反映
AIE10, 11, Edge18-だいたい OS 側で設定した色。メディア特性で上書き不可。
BWindows 版 Chromium Edge85だいたい OS 側で設定した色。(*2)
CIE9 以下×
DWindows 版 Firefox(新しめ *1)×背景色と選択テキストの色のみ OS 側で設定した色。リンク色はブラウザ側で固定の模様。
EWindows 版 Pale Moon, Firefox(古め *1)×onload 時のみ
Z非サポート×
  1. Windows 版 Firefox がどのバージョンで D, E, Z グレードへ移るのかは未調査です。
  2. Edge85 で :before, :after 疑似要素の背景色が維持するバグがある。Edge84 では起きていない。

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

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

背景色

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

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

背景画像

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

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

テキスト色

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

ボーダー色

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

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

IE と Edge で Windows の設定が反映されました。Firefox, Goanna では色はアプリ側の固定の暗い青と暗い紫で、背景色によってはコントラストが足らず見辛いです。

フォーム部品の色

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

選択テキストの色

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

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

  1. -ms-high-contrastメディア特性と JavaScript でフォールバック
  2. IE10+, Edge18 以下に比べて機能の劣る Chromium Edge だけに CSS ハック
  3. border-colortransparent を使って三角形を作っている場合
  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 ではどうすればよいのでしょう?

次の記事では 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
ダークモード対応に関する記事。ハイコントラストモードとポイントは異なりますが良記事です。