グレースケール表示への切り替え方
ブックマークレットの利用
以下の手順でブックマークレットを利用することで、ブラウザーに表示中のページをグレースケール表示にすることができます。なお、このブックマークレットが正常に動作しないブラウザーを使っている場合、モバイル・アプリケーションなどWebページ以外のものの表示を確認する場合には、後述するOSの表示切り替え機能を使います。
以下のコードをターゲットとするブックマーク(ブックマークレット)を作成。
表示中のページをグレースケール表示にするブックマークレットコードを表示
javascript:(function(){var d=document;s=d.createElement("style");s.innerHTML="*{filter:grayscale(100%) !important}";d.body.appendChild(s)})()
チェック対象のページを表示した状態で、このブックマークレットを実行。
OSの表示切り替え機能の利用
Windows 10の場合
「設定」の「簡単操作」を開く(Win + U)。
「カラーフィルター」をクリック。
「カラーフィルターをオンにする」をチェック。
「グレースケール」を選択。
頻繁に利用する場合は、同じ画面でショートカットキーを有効にすると便利でしょう。
macOSの場合
「システム環境設定」を開く
「アクセシビリティ」を開き、左側のメニューから「ディスプレイ」を選択
ここから先はmacOSのバージョンにより異なります
Catalinaの場合、上部のタブから「カラーフィルタ」を選択し、「カラーフィルタを有効にする」のチェックを入れ、「フィルタタイプ」で「グレイスケール」を選択
Mojave以前の場合、「グレイスケールを使用」にチェックを入れる
iOSの場合
「設定」アプリ、
の順にタップ「カラーフィルタ」をオンにする
「グレイスケール」を選択する
Androidの場合
Android 12の場合
注:以下の記述はPixel 6上のAndroid 12における操作手順です。機種によって異なっている場合があります。
「設定」アプリ、
の順にタップ「色補正を使用」をチェック
「補正モード」で「グレースケール」を選択
Android 11以前の場合
注:以下の記述はPixel 3A上のAndroid 11における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。
「設定」アプリ、
の順にタップをタップ(「開発者向けオプション」が表示されていない場合は、後述の手順で「開発者向けオプション」を有効にします)
をタップ
「全色盲」を選択
「色空間シミュレート」で「無効」を選択するか、「設定」アプリの
を無効にすることで、標準の表示モードに戻すことができます。参考:開発者向けオプションの有効化
「開発者向けオプション」が表示されない場合は、以下の手順で開発者向けオプションを有効にします。
「設定」アプリ、
をタップ表示されている「ビルド番号」を7回連続してタップ
端末に設定されている暗証番号を入力
関連ガイドライン項目
テキスト:複数の視覚的要素を用いた表現
リンク:複数の視覚的要素を用いた表現
フォーム:複数の視覚的要素を用いた表現