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

Question

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

Adnah

CSSWG: "colorDepth can be used in the context of selecting SDR/HDR in addition with other information.": if (screen.colorDepth >= 48 && window.matchMedia('(color-gamut: p3)').matches && /* other checks */) { /* use HDR content */ } else { /* use SDR content */ } – Hatfield

@Hatfield thank you sir! That should do the trick. You can post that as an answer if you want. – Adnah

It's just a copy&paste from the CSS Working Group... If it works for you then just add it as an answer accept it :) – Hatfield

Is this what YouTube is using to determine if your display is in HDR mode or is there something more native today? – Pockmark

Answer 1

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)

Rockwood

Answer 2

Made a few experiments from the code suggested by @Andreas and tweaked it a tiny bit.

if (screen.colorDepth > 24 && window.matchMedia('(color-gamut: p3)').matches) { 
  /* use HDR content */ 
} else { 
  /* use SDR content */ 
}

Jany

It is a tranfer function (PQ or HLG) that defines HDR, colorDepth and gamut has nothing to do with it. Common mistake. – Gaselier

@ВалерийЗаподовников Is it possible to detect the transfer function from JavaScript somehow? – Rockwood