Gradient Test
Show smooth full-screen gradients to reveal color banding and posterization on any screen.
HDR Test
Check whether HDR is active for this browser window: when it is, the inner patch of Peak white looks brighter than the white around it. The list above the pattern shows what your browser reports about the screen.
What your browser reports
- HDR display (dynamic-range: high)Checking
- HDR video (video-dynamic-range: high)Checking
- Wide gamut: Display P3 (color-gamut: p3)Checking
- Wide gamut: Rec. 2020 (color-gamut: rec2020)Checking
- CSS wide-gamut colors, color(display-p3 …)Checking
- CSS HDR colors, color(rec2100-pq …)Checking
- Color depth reported by the screen
- CheckingBrowsers usually report 24 here regardless of the panel, so this cannot confirm 10-bit output.
These are reports from the browser, not proof of HDR output. A capable display still needs HDR switched on in the operating system and a browser that renders web content in HDR.
Showing Peak white · 1 of 3
Peak white · What to look for: On an active HDR setup the inner patch looks brighter than the white around it. Otherwise the two look identical. Until your browser confirms color(rec2100-pq 0.9 0.9 0.9), the inner patch uses the same color as its surround.
Runs entirely in your browser. Test results, audio and video never leave your device.
How to check if HDR is working
- If your display supports HDR, turn HDR on in the operating system and move this window onto that display.
- Read the list under "What your browser reports". The rows update when the window moves to another screen.
- Press Start test, or click the preview, to fill the screen with Peak white.
- Compare the inner patch with the white around it. When HDR is active for this window it looks brighter, sometimes only slightly; otherwise the two look the same.
- Press Next, the Right arrow key or tap the screen to see Display P3 red and Display P3 green. On a wide-gamut screen the inner patch looks more saturated.
- Press Esc or Exit. If a pair looked identical, read the line under the pattern: it says when your browser cannot draw the inner color.
What is HDR?
HDR (high dynamic range) is a way of encoding and showing images with brighter highlights and a wider range from dark to bright than standard dynamic range (SDR). Seeing it takes the whole chain: a display that can reach those highlights, HDR output enabled in the operating system, a connection that carries the signal, and an app or browser that renders in HDR.
Why is HDR not working?
If your display supports HDR but Peak white looks the same inside and out, one link in the chain is missing. Check these in order:
- HDR is on in the operating system. On Windows 11, turn on HDR in Settings > System > Display. On a Mac with an external HDR display, turn on High Dynamic Range in System Settings > Displays.
- The browser window is on the HDR display. On a multi-monitor setup, drag it across and watch the report update.
- The display input accepts HDR. Some TVs and monitors need an enhanced HDMI or deep color setting for that input, or an HDR mode in their own menu.
- The cable and port carry HDR at your resolution and refresh rate. An older HDMI cable or port may not have the bandwidth.
- The browser draws web content in HDR. Browsers differ, and some show HDR video but draw page colors in standard range. Update the browser or try another; the Browser Test shows which version you have.
What each row in the report means
| Row | What it tells you |
|---|---|
| HDR display | The browser says this screen can show high dynamic range. It is not proof that HDR output is active. |
| HDR video | The browser says video on this screen can be shown in HDR. Nothing is played to confirm it. |
| Wide gamut: Display P3 or Rec. 2020 | The browser says the screen can show roughly that range of colors or more. It is not a coverage percentage. |
| CSS wide-gamut and HDR colors | Whether the browser can read the color(display-p3 …) and color(rec2100-pq …) formats. This checks the browser, not the screen. |
| Color depth | Usually 24 bits on any panel, so it cannot confirm 10-bit output. For banding, use the Gradient Test. |
| Not supported, with a note | The browser could not answer that check, usually because it does not know the query, so the row says nothing about the display. |
What this test can detect
- Whether HDR is active for this window: the inner patch of Peak white looks brighter than the white around it.
- Whether this window shows colors beyond sRGB: the inner patch of Display P3 red or Display P3 green looks more saturated than its sRGB surround.
- What the browser reports for HDR display, HDR video, Display P3 and Rec. 2020, updated when the window moves to another screen.
- Which CSS color formats the browser can read, display-p3 and rec2100-pq: a check of the browser, not the screen.
- The color depth the screen reports, with a note that it cannot confirm 10-bit output.
How it works
The report asks four media queries: (dynamic-range: high), (video-dynamic-range: high), (color-gamut: p3) and (color-gamut: rec2020). Each is paired with its standard or sRGB baseline, so a query the browser does not know is flagged rather than read as a standard screen. CSS.supports checks the two color formats, screen.colorDepth gives the depth, and the rows refresh when a query changes.
Each pattern centers a patch half as wide and half as tall on an sRGB field: color(rec2100-pq 0.9 0.9 0.9), an HDR white well above standard white, on #ffffff, and full Display P3 red or green on pure sRGB red or green. The patch is colored only after the browser confirms it can parse the color. Nothing is measured.
Limitations
- The page cannot see the operating system's HDR switch, the SDR content brightness slider, the cable or the display's picture mode. It only sees what the browser reports.
- Browsers differ in which CSS HDR and wide-gamut colors they can draw, so identical patches can be a browser limit rather than a display limit. The line under the pattern says when your browser rejects the inner color; one that accepts it can still show it in standard range.
- Even with HDR working, Peak white can look only slightly brighter on a display with a low peak brightness, or when standard content is already set bright, such as a high SDR content brightness in Windows.
- It measures nothing: no peak brightness, black level, contrast or gamut coverage. The Brightness Test explains why no web page can read nits.
- It plays no video, so it does not check HDR10, HLG or Dolby Vision playback, or HDR in games and other apps.
Frequently asked questions
Why does my screen look washed out with HDR on?
Often because standard content is mapped into the HDR signal, where it can look duller than in SDR mode. On Windows 11, the SDR content brightness slider in the HDR settings changes how bright ordinary windows look. If the desktop still looks dull, keep HDR off for desktop work and turn it on for HDR games and video.
What is the difference between HDR10 and DisplayHDR 400?
HDR10 is a format for HDR content: it describes how a video or game encodes brightness and color. DisplayHDR 400 is the entry tier of VESA's DisplayHDR certification for displays, which requires a peak of at least 400 nits. A screen can accept HDR10 without the brightness to show it well; VESA's DisplayHDR site lists every tier.
How can I tell if YouTube is playing in HDR?
Play a video marked HDR and open the quality menu. When the browser, operating system and display all support HDR playback, the options carry an HDR label, such as 2160p60 HDR; otherwise YouTube shows a standard-range version.
Is wide color gamut the same as HDR?
No. Wide color gamut means more saturated colors, such as Display P3 compared with sRGB; HDR is about the range of brightness. A screen can have one without the other, which is why Peak white and the P3 patterns are separate.