グレースケール表示への切り替え方

参考：色を用いた表現に関する注意点

ブックマークレットの利用

以下の手順でブックマークレットを利用することで、ブラウザーに表示中のページをグレースケール表示にすることができます。なお、このブックマークレットが正常に動作しないブラウザーを使っている場合、モバイル・アプリケーションなどWebページ以外のものの表示を確認する場合には、後述するOSの表示切り替え機能を使います。

  1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

    コードを表示
    javascript:(function(){var d=document;s=d.createElement("style");s.innerHTML="*{filter:grayscale(100%) !important}";d.body.appendChild(s)})()
    表示中のページをグレースケール表示にするブックマークレット

  2. チェック対象のページを表示した状態で、このブックマークレットを実行。

OSの表示切り替え機能の利用

Windows 10の場合

  1. 「設定」の「簡単操作」を開く（Win + U）。

  2. 「カラーフィルター」をクリック。

  3. 「カラーフィルターをオンにする」をチェック。

  4. 「グレースケール」を選択。

頻繁に利用する場合は、同じ画面でショートカットキーを有効にすると便利でしょう。

macOSの場合

  1. 「システム環境設定」を開く

  2. 「アクセシビリティ」を開き、左側のメニューから「ディスプレイ」を選択

  3. ここから先はmacOSのバージョンにより異なります

    • Catalinaの場合、上部のタブから「カラーフィルタ」を選択し、「カラーフィルタを有効にする」のチェックを入れ、「フィルタタイプ」で「グレイスケール」を選択

    • Mojave以前の場合、「グレイスケールを使用」にチェックを入れる

参考：Macでアクセシビリティの「ディスプレイ」環境設定を変更する - Apple サポート

iOSの場合

  1. 「設定」アプリ、アクセシビリティ ‣ カラー表示とテキストサイズ ‣ カラーフィルタの順にタップ

  2. 「カラーフィルタ」をオンにする

  3. 「グレイスケール」を選択する

Androidの場合

Android 12の場合

注：以下の記述はPixel 6上のAndroid 12における操作手順です。機種によって異なっている場合があります。

  1. 「設定」アプリ、ユーザー補助 ‣ テキストと表示 ‣ 色補正の順にタップ

  2. 「色補正を使用」をチェック

  3. 「補正モード」で「グレースケール」を選択

Android 11以前の場合

注：以下の記述はPixel 3A上のAndroid 11における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。

  1. 「設定」アプリ、システム ‣ 詳細設定の順にタップ

  2. 開発者向けオプションをタップ（「開発者向けオプション」が表示されていない場合は、後述の手順で「開発者向けオプション」を有効にします）

  3. 色空間シミュレートをタップ

  4. 「全色盲」を選択

「色空間シミュレート」で「無効」を選択するか、「設定」アプリのユーザー補助 ‣ 色補正を無効にすることで、標準の表示モードに戻すことができます。

参考：開発者向けオプションの有効化

「開発者向けオプション」が表示されない場合は、以下の手順で開発者向けオプションを有効にします。

  1. 「設定」アプリ、端末情報をタップ

  2. 表示されている「ビルド番号」を7回連続してタップ

  3. 端末に設定されている暗証番号を入力

関連ガイドライン項目