Widely available Best for advanced visual experiences. Treat HDR-aware styling as an enhancement rather than a core requirement.

dynamic-range media query

The dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device.

HDRMedia queryDisplays

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
dynamic-range
98
98
100
13.1
98
13.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@media (dynamic-range: high) {
  .hero-image {
    background-image: url(hero-hdr.avif);
  }
}
@media (dynamic-range: standard) {
  .hero-image {
    background-image: url(hero-sdr.jpg);
  }
}

Live demo

standarddynamicrange

CSS standarddynamicrange demo.

PreviewFullscreen

high dynamicrange

CSS high dynamicrange demo.

PreviewFullscreen

conditionsplit. Example

CSS conditionsplit. Example demo.

PreviewFullscreen

Use cases

  • HDR-aware media UI

    Adjust presentation around photos or video when the display can represent a broader luminance range.

  • Premium visual themes

    Apply refined display-specific styling only when the device can actually reproduce it.

Cautions

  • Dynamic-range support varies widely, so always keep a solid SDR experience first.
  • More vivid output can still become unreadable if brightness and contrast are not balanced carefully.

Accessibility

  • HDR capability does not replace accessible contrast testing.
  • Users should still be able to read controls and labels on standard displays without losing information.

Related links