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

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

グレースケール表示にした際の見え方を確認する場合、基本的にはOSが提供する表示切り替え機能を用います。以下に各OSごとの表示切り替え機能の利用方法を示します。

Windows 10、Windows 11

  1. 「設定」画面を開き、「アクセシビリティ」（Windows 10では「簡単操作」）をクリック（Win + U）。

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

  3. ウィンドウの右側にある「カラーフィルター」のスイッチをオンにして、その下にあるドロップダウンをクリックして関連オプションを表示。

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

    スクリーン・ショット：カラーフィルターの設定画面

頻繁に利用する場合は、同じ画面で「カラーフィルターのキーボードショートカット」を有効にすると便利でしょう。この設定を有効にすると、Win + Ctrl + Cキーの押下でいつでもカラーフィルターのオン・オフを切り替えることができるようになります。

スクリーン・ショット：カラーフィルターの設定画面でキーボードショートカットを有効にする

参考：Windows を見やすくする - Microsoft サポート

macOS

以下の手順やスクリーン・ショットは、macOS Venturaでのものです。

  1. Appleメニュー ‣ システム設定の順に選択

  2. サイドバーで「アクセシビリティ」を選択

  3. 右側で「ディスプレイ」をクリック

    スクリーン・ショット：アクセシビリティ、ディスプレイの設定画面

  4. 画面下方の「カラーフィルタ」のセクションで、「カラーフィルタ」のスイッチをオンにする

  5. 「フィルタタイプ」で「グレイスケール」を選択

    スクリーン・ショット：カラーフィルタの設定

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

iOS

注：以下の記述はiOS 17.4における操作手順です。

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

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

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

参考：iPhoneに表示されるカラーを変更して画面上の項目を見やすくする - Apple サポート (日本)

Android

Android 13以降の場合

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

  1. 「設定」アプリ、ユーザー補助 ‣ 色と動き ‣ 色補正の順にタップ

    注：Androidのバージョンによっては、「色と動き」ではなく「テキストと表示」をタップ

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

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

参考：テキストとディスプレイの設定を変更する - Android のユーザー補助機能 ヘルプ

Android 11以前の場合

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

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

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

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

  4. 「全色盲」を選択

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

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

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

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

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

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

参考：ブックマークレットの利用

簡易的なチェックの方法として、ブラウザーに表示中のページをグレースケール表示にするブックマークレットを利用する方法があります。以下の手順でブックマークレットを作成することができます。

なお、このブックマークレットが正常に動作せず、実行すると表示が崩れてしまうような場合があることが報告されています。そのような場合やこのブックマークレットが正常に動作しないブラウザーを使用している場合、モバイル・アプリケーションなどWebページ以外のものの表示を確認する場合には、各OSの表示切り替え機能を使います。

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

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

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

関連ガイドライン項目

関連FAQ