HDR Support Test in Your Browser
Phone
Tablet
Laptop
Monitor
Ultrawide
TVSee what your browser reports about HDR and color-gamut support, then run a shadow-detail and highlight-detail step test to gauge how much near-black and near-white detail your display and eyes can actually resolve.
What this page can and can't tell you
A web page cannot honestly claim to measure or display true HDR. Real HDR requires a PQ or HLG transfer function, a display actually driven at high peak nits, and an OS/browser pipeline that hands untouched HDR data to the panel — and in most browsers today (2026), ordinary CSS and canvas content is still composited as standard dynamic range (SDR), even on HDR-capable hardware. Nothing on this page measures nits, contrast ratio, or actual HDR output.
What is genuinely useful without a real HDR pipeline: your ability to distinguish very close shades near black and near white. That's a real, meaningful check of your display's tone-mapping and your own perception — it just isn't "HDR" in the marketing sense. Treat everything below as a best-effort approximation, not a certified measurement.
Browser-reported signal (estimated)
This reads the CSS media features (dynamic-range: high) and
(color-gamut: …). These are signals your browser reports about
its own rendering pipeline — they are not proof that your OS is currently
feeding HDR data to the physical panel, and a "yes" here can still mean the
content you see is tone-mapped down to SDR.
Shadow detail self-test (near-black steps)
Each swatch below steps from pure black toward a very dark gray
(rgb(0,0,0) to rgb(30,30,30)). In a dim room, count how
many distinct steps you can actually tell apart from their neighbors — on a
weak panel or in a bright room, several steps may look identical.
Highlight detail self-test (near-white steps)
Same idea, inverted: these swatches step from a light gray up to pure white
(rgb(225,225,225) to rgb(255,255,255)). Bright glare or
an aggressive display "boost" mode can crush the top steps together.
Wide-gamut sample experimental
If your browser supports the CSS color(display-p3 …) function, a
second near-white strip below is drawn using wide-gamut color values instead of
plain sRGB. This is a wide-gamut sample — it only renders
distinctly on a compatible wide-gamut/HDR display and browser combination. On a
standard sRGB screen, or a browser without support, it will look identical (or
very close) to the sRGB strip above, which is expected and not a bug.
None of the counts above are saved, sent anywhere, or scored — they're for your own reference only. Nothing on this page is stored after you leave.
Inspect shadow and highlight steps without confusing them with HDR output
This page combines browser-reported rendering signals with two visual detail checks. The shadow strip contains ten neutral shades from RGB 0 to RGB 30, while the highlight strip contains ten from RGB 225 to RGB 255. Count the neighboring patches you can distinguish under consistent conditions. The result is your own observation of these browser-rendered shades, not a measurement of HDR brightness, gamut coverage or the display’s dynamic range.
How to use the tool
- Begin at your normal viewing position and a comfortable brightness setting. Reduce glare without making the room conditions different between comparison runs.
- Read the reported HDR rendering, color-gamut and CSS Display P3 support signals. Record them separately from what you see in the strips; an API support result and a visual observation are different kinds of information.
- Inspect the near-black strip and choose the number of distinct shades you can see. Repeat for the near-white strip. Count the patch appearance rather than relying on its number label.
- Change one setting, such as the picture mode or OS HDR switch, and repeat. Write down both counts and the setting so you can compare the same conditions later.
Read the reported signals carefully
The HDR signal comes from the browser’s dynamic-range media query, while the gamut signal comes from color-gamut queries. These describe what the browser reports about its rendering environment. They do not directly measure the panel, establish a current HDR video signal or guarantee that a specific image is being presented through an HDR pipeline.
CSS Display P3 support indicates that the browser accepts that color syntax. Syntax support does not prove measured P3 coverage on the connected screen. The experimental P3 strip uses equal red, green and blue components near white. Because these are neutral shades rather than strongly saturated colors, a similar appearance to the RGB strip is not evidence that the panel lacks a wide gamut.
A “yes” signal paired with ordinary-looking strips is therefore not a contradiction. Browser capability, OS configuration, content encoding, display mode and physical screen behavior are separate factors. The ordinary numeric RGB patches on this page cannot prove true HDR highlight output.
Interpret merged or distinguishable steps
If the first few dark patches merge, room glare, viewing angle, picture settings and the rendering path can all contribute. Try a dimmer environment without changing brightness, then compare a neutral picture mode. Increasing brightness may expose more steps but also changes the test condition; record that change instead of treating the new count as a universal score.
If the brightest patches look identical, check for excessive contrast or enhancement settings. The page’s highlight range stays close to ordinary white, so it cannot tell you how many nits a specular HDR highlight reaches. Likewise, seeing every patch is a useful local observation, not certification of color accuracy.
For example, six shadow steps in daylight and nine after reducing reflections suggest the room affected visibility. They do not imply the panel suddenly gained HDR capability. A count change after enabling OS HDR describes a difference in how these patches were presented, which can be worth investigating with known HDR media.
Use the right follow-up for HDR questions
Confirm that your display and connection support the intended HDR mode, then use appropriately encoded HDR content and the OS’s supported configuration process. On a Mac, Apple’s HDR guidance below explains the supported setup. For numerical peak brightness, contrast or color accuracy, use measurement equipment and an appropriate workflow.
The selectors record your self-count and display feedback on this page; they are not an automatic sensor or calibrated grading system. Keep a manual record if you want to compare a later session. For a broader inspection, use the color and gradient patterns or read the HDR and OLED guide.
Frequently asked questions
Do these strips display a true HDR test signal?
The strips are ordinary browser color patches and cannot establish HDR output. They are useful for comparing visible near-black and near-white separation within the current rendering path.
Does “HDR-capable rendering: yes” prove my panel is in HDR?
No. It is a browser-reported media-query result, not a direct physical measurement or confirmation that this page contains an HDR-encoded signal.
Why does the P3 strip look like the RGB strip?
Both strips contain neutral near-white steps. Similar appearance is expected in many setups and does not measure the display’s saturated-color gamut coverage.
What does my step count measure?
It records how many shades you report distinguishing in this session. Lighting, eyesight, settings and browser presentation affect it; it is not a measured contrast ratio.
Can this tell me my screen’s peak nits?
No. Browser patches provide no luminance measurement. Peak brightness requires suitable measurement equipment and a defined test condition.
References: MDN: dynamic-range media feature · Apple HDR setup.
Last updated: