モニター色域テスト｜sRGB・Display-P3・Rec.2020

対象色域

テストパターン

確認前の準備ネイティブ解像度とブラウザズーム100%を使うモニターと作業に合うプロファイルを確認する夜間モードや自動色補正をオフにする CSS Color 4に対応したブラウザで再読み込みする

検出中

画面をクリックするか、全画面ボタンを使ってください。

色パッチの差

同じ行のsRGB基準と対象色域を比較します。

グラデーションの観察

滑らかさ、バンディング、色の欠落やクリップを確認します。

ブラウザの概算レポート概算の対応状況

ブラウザの概算レポート検出中対象色域を選んでテストを始めてください。

color-gamutはユーザーエージェントと出力機器が報告する概算範囲を示すだけです。色パッチの差はブラウザの色管理、OS設定、表示モード、コンテンツにも左右され、カバー率や容積率は出力しません。

結果の見方

まずブラウザの概算レポートを確認し、次にパッチ比較とグラデーションを切り替えます。広色域環境では対象色がsRGB基準より鮮やかに見えることがありますが、差が出ない場合はブラウザ、プロファイル、表示モード、パネルの制限も考えられます。

CSSのcolor-gamutメディア特性とCSS Color 4のcolor()構文で、出力経路の概算対応とテスト色を確認します。パネルの分光測定ではありません。

ウェブページは原色座標、白色点、輝度、色域カバー率、色域容積を読み取れません。割合や機器の証明が必要なら測色計または分光計を使ってください。

モニターがDisplay-P3に対応しているか調べるには？

Display-P3を選び、ブラウザのレポートを確認して、sRGBとP3のパッチを全画面で比べます。目視確認であり、実測カバー率の証明ではありません。

ブラウザは対応を報告するのに、画面の色が同じに見えるのはなぜ？

出力経路の対応が報告されても、プロファイル、表示モード、パネル、周囲の光によって違いが見えにくくなることがあります。

ブラウザで色域カバー率を測定できますか？

できません。パネルの原色座標や実測データを取得できないため、P3 95%などのカバー率は保証できません。

color-gamutの報告はどれくらい正確ですか？

ブラウザと出力経路が報告する対応範囲の手がかりであり、パネルのカバー率、容積、色精度を証明するものではありません。

プライバシーと情報源

設定と観察メモはこのブラウザ内に保存されます。アップロードはなく、コピーはクリックしたときだけ実行します。

パターンはCSS Color 4、color-gamut、ブラウザのFullscreen APIを使って表示します。