アクセス可能な反転色

最近アクセス可能なフォームの入力のためのスタイルを開発するときに興味深い課題が出てきた-どのようにWindowsコンピュータで利用可能な反転カラースキームを処理する.
参照のために、反転PCを使用するには、Windows PCを切り替えるには、キーボードショートカットを使用することができますて

Shift+Alt+PrtScr

デフォルトでは、html±<input> and html±<textarea> 罰金を見て、色が正しく反転します.
ただし、カスタムスタイリングを使用せずにborder プロパティ、例えばbox-shadow そして、標準のカラービューで境界線を隠すと、これらの要素のボックスの影が反転モードで表示されず、逆モードを使用しているユーザーのアクセシビリティ問題が作成されます.
この問題を解決する簡単なトリックは、以下のように、これらの要素に透明なボーダーを追加することです.

border: 1px solid transparent;

これは、インプットと外部のボックスシャドウのプロパティの組み合わせを使用している場合は、ギャップを作成する可能性がありますので、使用するときに指定するメディアクエリを使用することができます-この場合、反転モードがアクティブな場合.
現在、この目標を達成できる2つの有用なメディアクエリがあります.ms-high-contrast: active and forced-colors: active最初のメディアクエリは、以前のバージョンのInternet Explorerで動作しますforced-colors 現代のブラウザで動作します.
最終的なコードは次のようになります.

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
  border: 1px solid transparent;
}

側注:現在これらのメディア・クエリーのどちらも、これを書いているように、最新のFirefoxで働くように見えません.
両方とも完全にサポートされているブラウザは、反転カラーモードを使用して、最新のマイクロソフトエッジでサポートされています.
当初公開https://jaketracey.com