What Is the HDR & Color Gamut Support Detector?
High Dynamic Range (HDR) display capability and wide color gamuts (P3, Rec. 2020) have become standard features on premium monitors, laptops, phones, and TVs. However, OS settings, driver configurations, and browser support can prevent HDR from activating even on capable hardware. This tool uses CSS Media Query 4 feature detection — specifically (dynamic-range: high), (color-gamut: p3), and related queries — to report what your browser and OS are actually exposing to web content.
How It Works
The detector calls window.matchMedia() with standardized CSS Level 4 media feature queries. These are the same queries that web designers use for color-gamut-aware CSS. The results reflect what your browser reports — which is influenced by OS HDR settings, monitor ICC profile, browser flags, and display connection type (HDMI 2.0 vs. DisplayPort, for example). The visual swatches use CSS color() function with display-p3 color space to render out-of-sRGB colors for visual comparison.
Step-by-Step Instructions
Technique Tips & Hardware Facts
OS HDR Toggle
Browser HDR detection (dynamic-range: high) only returns true when Windows HDR or macOS EDR is actively enabled in your OS display settings. Toggle it on, refresh the page, and re-check.
HDMI vs. DisplayPort
HDMI 2.0 supports HDR10 and HLG but not Dolby Vision on most PC setups. DisplayPort 1.4 supports HDR10 with DSC compression. For maximum bit-depth, use DisplayPort or HDMI 2.1.
Browser Flags
Some Chromium-based browsers require the --force-color-profile=display-p3 flag or specific experimental features enabled in chrome://flags to expose P3 color gamut to web content accurately.
ICC Profile Matters
Your monitor's ICC profile must be correctly installed and assigned in your OS color management settings for the browser to correctly report wide gamut capabilities. Verify via OS Color Calibration tools.
Frequently Asked Questions
Why does my P3 monitor show "Not Detected"?
Several reasons: browser may not have P3 ICC profile loaded, OS color management might be routing through a sRGB profile, or you're on a system where the display driver doesn't expose P3 metadata to applications.
Is HDR different from P3 wide gamut?
Yes. HDR refers to the luminance range (highlight brightness and shadow depth). Wide color gamut (P3, Rec. 2020) refers to the range of colors. A display can have wide gamut without HDR, or HDR with standard sRGB gamut — though premium displays combine both.
What is the difference between "HDR Display" and "Video HDR"?
(dynamic-range: high) detects the display's general HDR capability for CSS/UI content. (video-dynamic-range: high) specifically detects support for HDR video playback via the <video> element.
My screen.colorDepth shows 24-bit but I have a 10-bit monitor — why?
JavaScript's screen.colorDepth property reports the OS's color depth setting, not the physical panel. Windows typically reports 24-bit even on 10-bit panels unless you've enabled deep color in the display driver settings.