sRGB, Display P3 and Rec. 2020 are colour gamuts, each wider than the last. Most web pages and documents are made in sRGB.
- A wide-gamut screen only shows wide colour when the system and the browser pass it through, so the check that matters is the path, not just the panel.
- A browser can read which gamut it is given and draw colours past sRGB for you to judge. It cannot measure the panel: coverage, accuracy and white point need a colorimeter.
- A site that prints a coverage percentage from a browser is guessing.
The short answer
If your screen is sold as wide gamut, check that the system gives the browser that gamut and that you can see the difference. If it reports sRGB, either the panel is sRGB, which is normal, or a colour profile or setting is narrowing a wide panel; the fixes are in the system's display settings.
What a browser reads
Everything here is reported by the browser, not measured from the panel.
- The color-gamut media query: sRGB, Display P3 or Rec. 2020, the widest that matches. Some browsers report none, which is not a verdict on the screen.
- Whether CSS can name Display P3 and Rec. 2020 colours, and whether a canvas can be made in the Display P3 colour space.
- Whether the browser is offered HDR, and the colour depth the system reports, since both change what reaches the page.
What your eyes add
The test then shows pairs of squares: the most saturated colour sRGB can hold outside, and the same primary at the edge of a wider space inside. The pairs are red, green, blue, cyan, green, wider still. On a path that delivers the wider colour, the inner square looks richer; on an sRGB path the browser maps it into sRGB and each pair looks like one square. Look straight on, at full brightness.
When a wide screen reads sRGB
- Windows 11: in Settings, System, Display, choose the screen and look for Automatically manage color for apps, where your hardware offers it. Turning HDR on also gives apps a wide gamut. Install the screen's own colour profile from its maker; Chrome and Edge read the gamut from it.
- macOS: System Settings, Displays, Color profile, and choose the display's own profile rather than sRGB or a generic one.
- On the screen itself: a mode called sRGB, or a picture mode that clamps colour, narrows a wide panel on purpose.
- Use Chrome, Edge or Safari, which report the gamut and draw wide-gamut CSS colours.
What it cannot measure
Coverage percentage, accuracy (delta E), white point and calibration all need light measured from the panel by a colorimeter. A wide panel on an sRGB path and an sRGB panel look the same from a web page, so the test says that rather than choosing one, and it never prints a percentage.
Terms used here
Questions
- Do I need a wide-gamut screen?
- Only for work or play made in a wide gamut: photo editing for print or for P3 devices, HDR video and some games. Most web pages and documents are sRGB, and look the same on either.
- Is a wide colour gamut the same as HDR?
- No. Gamut is how saturated the colours can be; HDR is how bright and dark the picture can go. A screen can be wide gamut without HDR. The HDR test reads whether HDR is on.