ByteScope

HDR Test

HDR test online — 今この画面が HDR か。ウィンドウを別画面へ移すと数字も追従します。

アップロードしません。このウィンドウのメディアクエリを読み、CSS と canvas でテスト図を描くだけです。

今このウィンドウ

確認中

確認中

メディアクエリ

(dynamic-range) はこのページ。(video-dynamic-range) は映像プレーンです。同じクエリではありません。

(dynamic-range: high)
確認中
(dynamic-range: standard)
確認中
(video-dynamic-range: high)
確認中
(video-dynamic-range: standard)
確認中
(color-gamut: srgb)
確認中
(color-gamut: p3)
確認中
(color-gamut: rec2020)
確認中
(color: 8)
確認中
(color: 10)
確認中
(color: 12)
確認中
screen.colorDepth
確認中
devicePixelRatio
確認中

color-gamut: 確認中

CSS の色の書き方

CSS.supports は、エンジンがその色を解釈できるという意味で、パネルが出せるという意味ではありません。

color(display-p3 1 0 0)
確認中
oklch(…)
確認中
color(rec2020 1 0 0)
確認中

色域の三角形（CIE xy）

  • sRGB · sRGB は Display P3 の 73.7%
  • Display P3 · Display P3 は Rec.2020 の 71.7%
  • Rec.2020

輝度の階段

隣り合う段は分かれて見えるはずです。黒つぶれは暗い側が潰れ、白飛びは上が潰れ、バンディングは平坦な段になります。

黒の手前

白の手前

真っ黒の手前と真っ白の手前で、隣の段が一つに潰れていないか。

P3 と sRGB

同じ色相を二つの書き方で出します。赤と緑に差が出るのが広色域の合図です。

R

G

B

color(display-p3 …) · rgb()

二つが同じに見えるなら、このウィンドウは sRGB 止まりのことが多いです。

HDR 白と SDR 白

SDR 白は #fff です。HDR 側は、エンジンが許すなら輝度 100% を超える CSS 色を使います。

SDR 白

HDR 白

確認中

よくある対応

目安です。上の実測を信じてください。ウィンドウを別画面へ移すと数字も付いていきます。

API / クエリChromeEdgeFirefoxSafari
window.matchMedia今のデスクトップブラウザにはあります。無いと、このページは不明のままです。✓✓✓✓
(dynamic-range: high)Chrome、Edge、Safari。Firefox はクエリ自体はあるが、HDR 判定は OS 次第。✓✓◐✓
(video-dynamic-range: high)dynamic-range の別名ではありません。Safari と Chromium で差があります。✓✓◐✓
(color-gamut: p3 / rec2020)広く実装されています。srgb は P3 や Rec.2020 でも合います（範囲クエリ）。✓✓✓✓
CSS.supports display-p3 / oklch書き方の対応です。パネルの測定ではありません。✓✓✓✓

このツールについて

このページが答えるのは一つだけです。目の前の画面は、本当に HDR か。何もアップロードしません。ページが載ってから matchMedia で dynamic-range、video-dynamic-range、color-gamut を読み、CSS.supports で広色域の色指定を試し、輝度の階段と P3 対 sRGB の色を描きます。ウィンドウを別のディスプレイへドラッグすると、その場の数字が付いていきます。

別物が三つある

OS の HDR スイッチ、パネルのピーク輝度、このブラウザが出す報告は、同じ事実ではありません。パネルが HDR でも OS 側が切れていることがあります。逆に dynamic-range: high と出ても、ピークが SDR と大差ない画面もあります。このページが見ているのは、今このウィンドウに対するブラウザの報告だけです。

dynamic-range と video-dynamic-range

(dynamic-range: high) は、このページの出力経路です。(video-dynamic-range: high) は映像プレーン用で、別名ではありません。ノート PC では片方だけが合うことがあります。だから別々に出します。

HDR クリップを置かない理由

HDR10 のサンプルは置いていません。静的書き出しがすでに大きく、クリップを足すと Cloudflare のデプロイが落ちます。それに、ここには mediainfo が無く、ファイルが本当に HDR10 のメタデータを持つか検証できません。未検証のファイルに HDR と書く方が悪い。再生を試すなら、手元の HDR ファイルを Codec Check か OS のプレーヤーで開くか、HDR と分かっている配信を見てください。ここのテスト図は CSS と canvas だけです。

よくある質問

モニターは HDR ですか？

このページが出すのは、*ブラウザ* が今のウィンドウの出力経路をどう見ているかです。dynamic-range: high は、その経路が HDR できるとブラウザが判断している、という意味です。nits は測りません。OS の HDR スイッチが入っている証明にもなりません。画面が二枚あるなら、ウィンドウを移してみてください。答えはディスプレイごとです。

OS の HDR、パネル、ブラウザが別物なのはなぜ？

パネルはハードウェアです。ピーク輝度、ローカルディミング、PQ や HLG が出せるか。OS のスイッチは、デスクトップを HDR モードにするかどうか。ブラウザは、そのあとで *この* ウィンドウ向けのメディアクエリを報告します。三つは食い違います。このページの「はい」はブラウザの「はい」で、色彩計の測定ではありません。

dynamic-range: high は実際何を意味しますか？

dynamic-range: high は、今の出力経路が HDR に対応しているとブラウザが判断している、という意味です。パネルのピークが十分高いことでも、SDR の映像が急に綺麗になることでもありません。(dynamic-range: standard) は HDR ディスプレイでも合います。SDR しか出せない、という旗ではありません。

なぜ HDR の動画サンプルが無いのですか？

理由は二つで、どちらも実務です。書き出したサイトはすでに約 275 MB あり、以前のデプロイでは WASM を CDN に逃がして Cloudflare に載せました。HDR 動画を足すとデプロイが落ちます。それに、ここには mediainfo が無く、同梱クリップが HDR10 メタデータを持つか確認できません。手元の HDR ファイルか、HDR と分かっている配信で再生を試してください。見知らぬ mp4 を HDR10 だとは言いません。

ウィンドウを動かすと数字が変わるのはなぜ？

どの matchMedia も change を購読しています。効くのはウィンドウが乗っている出力経路なので、別モニターへドラッグすると色域もダイナミックレンジも bits-per-channel も更新されます。不具合ではなく、このページの本丸です。

P3 と sRGB の色が同じに見えます。広色域ではない？

同じに見えるなら、このウィンドウは sRGB 止まりのことが多いです。パネルが sRGB か、OS が広色域モードではないか、ブラウザが Display P3 を出していないか。赤と緑に差が出るのが広色域の合図です。CSS.supports('color', 'color(display-p3 1 0 0)') は、エンジンがその書き方を解釈できる、というだけです。画面の測定ではありません。

関連ツール