HDR test

What your browser reports about HDR and colour gamut, plus patterns you can judge by eye, with no invented numbers attached.

What your browser reports

Dynamic range: Checking…
Video dynamic range: Checking…
Display colour gamut: Checking…
Wide-gamut rendering: Checking…

Each of these is a capability report from a CSS media query. Capability is not the same as HDR being switched on right now, and none of it is a measurement of your panel.

Wide gamut swatches

Each square is painted in an sRGB primary with a shape inside it painted in the equivalent Display P3 primary. On an sRGB-only display the two collapse to identical pixels and the shape disappears. On a wide-gamut display the shape becomes visible.

Green separates most, red clearly, and blue barely at all, because the sRGB and P3 blue primaries are nearly the same colour. A blue square that looks blank is normal.

What this test can and cannot tell you

The capability rows are genuine platform answers. They come from the dynamic-range and color-gamut media queries, and where your browser does not understand a query the page says "not reported" instead of guessing, an unsupported feature and a genuine negative look identical otherwise, and reporting one as the other would be a lie.

Capability is not the same as HDR being active. The query tells you the browser and display can do it, not that the operating system has it switched on, and certainly not that what you are looking at right now is HDR content.

There are no numbers here for peak brightness, contrast ratio or gamut coverage, because measuring any of those needs a photometer or a colorimeter. This page reports capability and shows you patterns. Anything more specific would be made up.

More on this: what a browser cannot detect and how these measurements work.

How to run this test

Read the capability panel. These are the answers your browser gives to standard media queries, and each one says what it does and does not mean.
Turn HDR on in your operating system display settings if it is not already, then reload this page. Capability reporting can change when the OS mode changes.
Go full screen on the highlight pattern and look at the small bright shapes against black. On a capable display in HDR mode they should look distinctly brighter than the surrounding white, not merely white.
Check the wide-gamut swatches. If you can see the shape inside each square, your display is showing colours outside sRGB.
If HDR is on and everything looks washed out and grey, that is the well-known Windows problem with SDR content in HDR mode rather than a fault in your display.

What a problem looks like

HDR reported as unavailable on a display that supports it: The media query reports what the browser and the operating system currently present, not what the panel is capable of. If HDR is switched off in your OS display settings, or your browser does not support the query, this reads as standard dynamic range.
Everything looks washed out with HDR enabled: A Windows behaviour rather than a display fault. Standard dynamic range content shown in HDR mode is mapped into a much wider range, which flattens contrast and dulls colour. The SDR content brightness slider in Windows display settings is the control that corrects it.
The gamut shapes are invisible: Either your display covers only sRGB, or your browser is not rendering wide-gamut colour. The capability panel separates those two cases: one row reports the display gamut, another reports whether the engine can paint outside sRGB at all.
The blue gamut shape is invisible while red and green are clear: Expected, and not a fault. The sRGB and Display P3 blue primaries sit very close together, so the blue pair separates by only about 10 steps out of 255, against roughly 117 for green. Blue is simply a weak signal for this technique.
Highlights that look no brighter than white: A page cannot request HDR brightness for ordinary CSS colours, so this pattern demonstrates the contrast structure rather than driving peak luminance. Judge HDR highlight performance with real HDR video, not with a web page.

What to do next

If something looks wrong, check it again in a normally lit room and from straight on, then check whether it appears on a second device. If it only happens on this screen and you are still inside the return window, that is the time to contact the retailer.

Questions people actually ask

Does this tell me if my monitor is HDR?

It tells you whether your browser currently reports high dynamic range capability, which depends on the display, the operating system setting and the browser together. It is a capability report, not a certification, and it cannot tell you a DisplayHDR tier or a peak brightness figure.

Why does HDR look worse than SDR on my PC?

Because standard dynamic range content is being stretched into an HDR container. Windows maps SDR into HDR using a brightness setting that is often wrong by default, which makes desktop content look grey and flat. Adjust the SDR content brightness slider in display settings, and expect HDR to look right only in genuine HDR content.

What is the difference between HDR and wide colour gamut?

HDR is about dynamic range, the distance between the darkest and brightest parts of an image. Wide gamut is about how saturated the colours can be. They usually arrive together on modern displays but they are independent properties, which is why this page reports them separately.

Can you measure my peak brightness in HDR?

No. Peak luminance is measured with a photometer against a specified test pattern and window size. No browser API exposes it, and any figure produced by a web page would be invented.