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.

Note: Some devices have high dynamic range capabilities that are not always 'on' and need to be activated (sometimes programmatically, sometimes by the user, sometimes based on the content). This media feature does not test whether the dynamic range capability is active; it only tests whether the device is capable of high dynamic range visuals.

HDRMedia queryDisplays

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.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