HDR Test

Browsers can report whether the current screen claims HDR and a wide color gamut, and can show a few patterns that only look different on capable displays. This page shows both and explains what they do and do not prove.

What your browser reports

  • HDR display (dynamic-range: high)Checking
  • HDR video (video-dynamic-range: high)Checking
  • Wide gamut: Display P3 (color-gamut: p3)Checking
  • Wide gamut: Rec. 2020 (color-gamut: rec2020)Checking
  • CSS wide-gamut colors, color(display-p3 …)Checking
  • CSS HDR colors, color(rec2100-pq …)Checking
Color depth reported by the screen
CheckingBrowsers usually report 24 here regardless of the panel, so this cannot confirm 10-bit output.

These are reports from the browser, not proof of HDR output. A capable display still needs HDR switched on in the operating system and a browser that renders web content in HDR.

Peak white · What to look for: On an active HDR setup the inner patch looks brighter than the white around it. Otherwise the two look identical.

Runs entirely in your browser. Nothing is uploaded or stored.

How to use

  1. Read the "What your browser reports" list. It shows what your browser reports for the screen the window is on, and it updates if you move the window to another display.
  2. Press Start test, then step through Peak white, Display P3 red and Display P3 green with the arrow keys or the Previous and Next buttons.
  3. On each pattern, compare the inner patch with its surround. With HDR or wide color active in the operating system and the browser, the inner patch looks visibly brighter or more saturated.
  4. If the two look identical, HDR or wide color is not active for this browser window, even if the hardware supports it. The line under the test area says when your browser cannot draw the inner color at all.

What this test can detect

  • Whether the Peak white pattern shows a visibly brighter inner patch, which only happens when the operating system and browser present this window in HDR.
  • Whether the display reports a wide color gamut (Display P3 or Rec. 2020).
  • Whether the browser can render colors beyond sRGB on this screen.

Important

  • A browser reporting HDR support does not guarantee HDR output. The operating system, the cable, the display mode and the browser all have to cooperate.
  • Most browsers still render page colors in standard dynamic range. The patterns here use CSS features that only some browsers support, so a plain result can be a browser limit rather than a display limit.
  • This page cannot measure peak brightness, contrast or color accuracy. Use it to see whether HDR appears to be active for this window, not to grade an HDR display.

Questions

The list says HDR is supported but the patches look the same. Why?
The media query only reports what the screen claims. If HDR is switched off in the operating system, the window is on a non-HDR monitor, or the browser renders web content in standard dynamic range, the patches will not differ.