# HDR Test

> 今の画面は本当に HDR か。dynamic-range と video-dynamic-range を分け、P3／sRGB と輝度階段をその場で更新。OS スイッチ・パネル・ブラウザ報告は別物です。

- URL: https://bytescope.dev/ja/hdr-test/
- Locale: ja · Also: [en](https://bytescope.dev/en/hdr-test.md) · [zh-Hant](https://bytescope.dev/zh-Hant/hdr-test.md)
- Runs: アップロードしません。このウィンドウのメディアクエリを読み、CSS と canvas でテスト図を描くだけです。
- Requires: Any modern browser. Whether the samples actually show as HDR depends on the display, the operating system and the browser's HDR video support, which the page reports.
- Updated: 2026-09-08

## What it does

このページが答えるのは一つだけです。目の前の画面は、本当に 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 だけです。

## Limits

Does not calibrate the display or measure peak brightness; it plays HDR samples and reports what the browser detects.

## Machine output

Copy JSON copies an envelope `{ tool, url, generatedAt, userAgentHint, result }`. `tool` is `"hdr-test"`; `result` is what the browser reported via matchMedia / CSS.supports / screen numbers — not a measurement of the attached panel.

- `browserReportsHdr` (boolean | null) — `matchMedia('(dynamic-range: high)')`. `null` = API missing or threw.
- `browserReportsHdrVideo` (boolean | null) — `matchMedia('(video-dynamic-range: high)')`. `null` = API missing or threw.
- `dynamicRangeStandard` (boolean | null) — `matchMedia('(dynamic-range: standard)')`. `null` = API missing or threw.
- `videoDynamicRangeStandard` (boolean | null) — `matchMedia('(video-dynamic-range: standard)')`. `null` = API missing or threw.
- `colorGamutSrgb` (boolean | null) — `matchMedia('(color-gamut: srgb)')`. `null` = API missing or threw.
- `colorGamutP3` (boolean | null) — `matchMedia('(color-gamut: p3)')`. `null` = API missing or threw.
- `colorGamutRec2020` (boolean | null) — `matchMedia('(color-gamut: rec2020)')`. `null` = API missing or threw.
- `inferredColorGamut` (string) — Widest matching color-gamut token: `"srgb"` | `"p3"` | `"rec2020"` | `"unknown"`. `"unknown"` = nothing matched.
- `colorBits8` (boolean | null) — `matchMedia('(color: 8)')` (or equivalent bit-depth query). `null` = API missing or threw.
- `colorBits10` (boolean | null) — 10-bit color query. `null` = API missing or threw.
- `colorBits12` (boolean | null) — 12-bit color query. `null` = API missing or threw.
- `colorDepth` (number | null) — `window.screen.colorDepth`. `null` = not read.
- `devicePixelRatio` (number | null) — `window.devicePixelRatio`. `null` = not read.
- `supportsDisplayP3` (boolean | null) — `CSS.supports` of `color(display-p3 …)` syntax — not the display gamut. `null` = CSS.supports missing or threw.
- `supportsOklch` (boolean | null) — `CSS.supports` of oklch syntax. `null` = CSS.supports missing or threw.
- `supportsRec2020` (boolean | null) — `CSS.supports` of rec2020 color syntax. `null` = CSS.supports missing or threw.
- `browserHdrVerdict` (string) — Fold of the media-query flags: `"hdr"` | `"wide-gamut-only"` | `"sdr"` | `"unknown"`. `"hdr"` means the browser reported `(dynamic-range: high)`, not that the panel was measured as HDR.
- `extendedRangeCssColor` (string | null) — Extended-range `color()` that `CSS.supports` accepted. `null` = none accepted.

## FAQ

### モニターは 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)')` は、エンジンがその書き方を解釈できる、というだけです。画面の測定ではありません。

## Related tools

- [Display & Monitor Test](https://bytescope.dev/ja/screen-test.md) — ドット抜け、バンディング、残像、実測リフレッシュレート。同じ系統です。
- [Codec Check](https://bytescope.dev/ja/codec-check.md) — このブラウザが HEVC、AV1、VP9 を復号できるか。10-bit HDR の設定も含みます。
- [My Computer Specs](https://bytescope.dev/ja/my-computer-specs.md) — このブラウザが使っている GPU、CPU のスレッド数、メモリ、ハードウェアアクセラレーションの状態をまとめて確認。