Imagine this page is your email inbox. It's late, the room is dim, and you've just opened a LinkedIn job alert. Scroll down this page slowly, the way you'd skim that email, and keep your eyes on the company logos.
The email below is a recreation. Every logo in it is ordinary web content except one: a 100 x 100 pixel logo taken from a real job alert. Its file asks for HDR brightness, so on an HDR screen its white is brighter than the whitest white anything else on the page can show.
Your job alert for technical lead
Manage alertsSame white, three ways
On the left, the exact same pixels with the HDR color profile stripped out: white as bright as the web normally gets. In the middle, the real logo exactly as its file asks. On the right, the same file capped to SDR. These three tiles ignore the toolbar so you can always compare them.
Why a screenshot can't show you this
Your screen keeps some brightness in reserve above normal white. Apple calls this Extended Dynamic Range. Ordinary pages never touch that reserve. An HDR image can, and the browser lets it.
A screenshot is saved as a normal SDR image, so anything brighter than normal white gets clipped down to normal white. The glow simply isn't in the file. That's also why nobody notices this in design reviews, bug reports or screenshots on Slack. You only see it live, on an HDR screen.
What the logo file says
Read straight from the JPEG's bytes:
| Size | 100 x 100 pixels, grayscale, 15 KB |
| Embedded color profile | 13 KB Apple ICC profile: "Rec. ITU-R BT.2100 PQ" |
| CICP tag | 9 / 16 / 0 / 1: BT.2020 primaries, PQ (SMPTE ST 2084) transfer, full range |
| What PQ means | Code values map to absolute brightness, up to 10,000 nits. White in this file is not "page white", it's "as bright as the screen can go". |
Most likely an ordinary logo exported from an Apple tool with an HDR color space selected. No one meant to make it glow.
What exists, and what's missing
Developers can already cap HDR brightness, if they think of it:
img { dynamic-range-limit: standard; }
Exists but almost nobody sets it, and it's the developer's choice, not yours.
They can also ask whether the screen can show HDR:
@media (dynamic-range: high) { ... }
Exists but it describes the hardware. It says nothing about what the person looking at it wants.
What no platform offers is a way for a person to say "please don't flash brightness at me", the way prefers-reduced-motion lets them say "please don't animate at me":
/* Option A: levels */
@media (prefers-dynamic-range: standard) {
img, video { dynamic-range-limit: standard; }
.hero-video { display: none; } /* show the SDR poster instead */
}
/* Option B: on/off */
@media (prefers-reduced-peak-brightness: reduce) {
img, video { dynamic-range-limit: standard; }
}
Doesn't exist Two candidate names, still open for debate.