ByteScope

HDR Test

HDR test online — is this screen really HDR? The numbers follow the window onto another display.

Nothing is uploaded. The page reads this window's media queries and draws CSS/canvas patterns in this tab.

This window, right now

checking

checking

Media queries

(dynamic-range) is this page. (video-dynamic-range) is the video plane. They are not the same query.

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

color-gamut: checking

CSS colour syntax

CSS.supports means the engine parses the colour, not that this panel can show it.

color(display-p3 1 0 0)
checking
oklch(…)
checking
color(rec2020 1 0 0)
checking

Gamut triangles (CIE xy)

  • sRGB · sRGB covers 73.7% of Display P3
  • Display P3 · Display P3 covers 71.7% of Rec.2020
  • Rec.2020

Luminance ladder

Adjacent steps should stay distinct. Black crush hides the dark end; white clipping hides the top; banding makes a staircase of flats.

Near black

Near white

Near-black and near-white neighbours should not merge into one step.

P3 vs sRGB

Same hue, two encodings. A difference in the reds and greens is the wide-gamut signal.

R

G

B

color(display-p3 …) · rgb()

If the pair matches, this window is likely clamped to sRGB.

HDR white vs SDR white

SDR white is #fff. The HDR patch uses a CSS colour with luminance above 100% when the engine allows it.

SDR white

HDR white

checking

Typical browser support

Typical picture only. Trust the live queries above — they follow the window onto another screen.

API / queryChromeEdgeFirefoxSafari
window.matchMediaAll current desktop browsers. Missing → this page stays unknown.✓✓✓✓
(dynamic-range: high)Chrome, Edge, Safari. Firefox: query exists; HDR match varies by OS.✓✓◐✓
(video-dynamic-range: high)Not a synonym for dynamic-range. Safari and Chromium differ.✓✓◐✓
(color-gamut: p3 / rec2020)Widely implemented. srgb also matches P3 and Rec.2020 (range feature).✓✓✓✓
CSS.supports display-p3 / oklchSyntax support. Not a measurement of the panel.✓✓✓✓

About this tool

This page answers one question: is the screen in front of you really HDR? Nothing is uploaded. After mount it reads matchMedia for dynamic-range, video-dynamic-range and color-gamut, plus CSS.supports for wide-gamut colour, then draws a luminance ladder and P3 versus sRGB patches. Drag the window onto another display — the live queries follow.

Three different things

The OS HDR switch, the panel's peak brightness, and what this browser reports are not one fact. Windows or macOS can have HDR off on a capable panel; a browser can report dynamic-range: high on a display whose peak is barely above SDR. This page only sees the browser's report for *this* window.

dynamic-range vs video-dynamic-range

(dynamic-range: high) is the page's output chain. (video-dynamic-range: high) is the video plane — a different CSS media feature, not a synonym. A laptop can match one and not the other. They are listed separately on purpose.

No HDR clip, on purpose

There is no HDR10 sample here. The site's static export is already large enough that a clip would break the Cloudflare deploy, and this environment cannot run mediainfo to prove a file actually carries HDR10 metadata. An unverified clip labelled HDR is worse than none. To test playback, open a file you trust in Codec Check or the OS player, or use a known HDR stream. The patterns on this page are CSS and canvas only.

Frequently asked questions

Is my monitor HDR?

This page reports what the *browser* thinks about the window's current output chain. dynamic-range: high means the browser believes that chain can do HDR. It does not measure nits, and it does not prove the OS HDR switch is on. Move the window onto another screen if you have two — the answer is per display.

Why are the OS HDR switch, the panel, and the browser three different things?

The panel is hardware: peak brightness, local dimming, whether it can even do PQ or HLG. The OS switch decides whether the desktop is in an HDR mode. The browser then reports media queries for *this* window. Any one of the three can disagree with the other two. A yes from this page is the browser's yes, not a calorimeter reading.

What does dynamic-range: high actually mean?

dynamic-range: high means the browser believes the current output chain supports HDR. It does not mean the panel's peak is high enough to look impressive, and it does not mean SDR content will suddenly look better. (dynamic-range: standard) also matches HDR displays, because they can still show SDR — it is not an SDR-only flag.

Why is there no HDR video sample?

Two reasons, both practical. The exported site is already ~275 MB, and a previous deploy had to move a WASM runtime to a CDN to fit Cloudflare; shipping HDR video would make the deploy fail. And mediainfo is not installed here, so a bundled clip could not be verified to carry HDR10 metadata. Play an HDR file you already have, or a known HDR stream. This page will not pretend a random mp4 is HDR10.

Why did the numbers change when I moved the window?

Every matchMedia query is subscribed with change. The window's output chain is the one that matters, so dragging onto another monitor is supposed to update gamut, dynamic range and bits-per-channel. That is the point of the page, not a glitch.

The P3 and sRGB patches look the same. Is my screen not wide-gamut?

If they match, this window is likely limited to sRGB: either the panel is sRGB, the OS is not in a wide-gamut mode, or the browser is not sending Display P3. A difference in the reds and greens is the wide-gamut signal. CSS.supports('color', 'color(display-p3 1 0 0)') only means the engine parses the syntax — it is not a display measurement.

Related tools