javascriptscreenhdr

Check if display supports HDR (High Dynamic Range) color in JavaScript?

Is it possible in JavaScript to detect if the browser's monitor supports HDR?

I have the requirement to display a HDR certificate on a webpage when the visitor is using a HDR monitor, but I've expressed to the client that this might not be possible. We've been able to embed video that supports HDR and it plays back correctly on Chrome for Windows.

So far in my research I've found no way of detecting such a capability.

The closest thing I've found is the Screen.colorDepth API

Solution

  • The modern way to do it is using matchMedia() and the dynamic-range @media query:

    console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
console.log("HDR:", window.matchMedia("(dynamic-range: high)").matches)