Monitor test and screen resolution
In fullscreen, the arrow keys and space change colour. Press Escape to leave.
Runs entirely in your browser · nothing is recorded, saved or uploaded
Fills the screen with solid colours so you can judge a panel as a surface: uniformity, backlight bleed and colour casts that normal content hides. It also reports what your screen tells the browser — resolution, viewport, device pixel ratio and the physical pixel count behind them.
How to use the monitor test and screen resolution
The colour screens are the same set a dead pixel test uses, put to a different question. There you are hunting a single wrong dot; here you are judging the panel as a surface, and what you are looking for is unevenness: a corner dimmer than the centre, a patch with a colour cast, a gradient across a field that should be flat.
Backlight bleed shows on the black screen and only in a dark room. Light leaks around the edges of an LCD panel because the backlight is always on behind it; black on an LCD is a closed shutter, not an absence of light. Some bleed is normal on any edge-lit panel; large bright patches or obvious corner glow are not. OLED screens have none at all, because each pixel emits its own light and black means genuinely off.
Uniformity shows best on the grey and white screens. Cheaper panels are noticeably brighter in the centre, and a colour cast toward one side is common on large IPS displays. Whether it matters depends entirely on the work — invisible for text, disqualifying for photo editing.
The numbers are a separate question, and the surprise there is that the resolution a browser reports is not the number of pixels in the panel. screen.width gives CSS pixels, a unit of about 1/96 of an inch that exists so a page is a readable size on any display. The device pixel ratio says how many physical pixels sit behind each CSS pixel: 2 on most Apple Retina screens, often 1.25, 1.5 or 1.75 on Windows laptops with display scaling. Multiply the two and you get what the panel actually has. So a MacBook reporting 1512×982 has a 3024×1964 panel, and a Windows laptop set to 150% scaling reports 1280×720 on a 1920×1080 screen. Neither is wrong; both are the browser telling you the size in the unit that matters for layout.
The viewport is smaller again: it excludes browser chrome, and it is the number your CSS media queries actually respond to. Designing against screen resolution instead of viewport width is a common mistake, and it is why a layout can break on a screen that is nominally wide enough. One practical consequence: an image needs to be devicePixelRatio times its CSS size to look sharp, which is why a 300px-wide logo should be exported at 600px for a ratio-2 display. That is the whole reason srcset exists.
One genuine limitation runs across both halves: a browser cannot measure a panel. There is no API for brightness, colour accuracy, contrast or refresh rate, so the colour screens give you a controlled surface and your own eyes, and the numbers are what the device declares about itself, with nothing observed. Actual measurement needs a colorimeter, and no web page can substitute for one.
What people use it for
- Checking a new monitor for backlight bleed before the return window closes
- Finding a colour cast or a dim corner on a panel used for photo work
- Comparing two screens on the same flat grey before choosing one
- Reading the physical pixel count behind a Retina or a scaled Windows display
- Checking the viewport width a CSS media query will actually respond to
Questions
Light leaking around the edges of an LCD, visible on a black screen in a dark room. Some is normal on edge-lit panels; large patches are not.
Each pixel emits its own light, so black means the pixel is off. There is no backlight to leak.
It is common on cheaper panels and normal within limits. Whether it matters depends on the work. Invisible for text, serious for photo editing.
Ambient light washes out exactly the faint edge glow you are trying to see.
No. A browser has no access to panel measurements. Real measurement needs a colorimeter; this gives you a controlled surface and your eyes.
There is no browser API for it. It can only be estimated by timing animation frames, which is unreliable enough that no number is claimed here.
The screens are the same; the question is not. A dead pixel test hunts one wrong dot, this judges the panel as a surface.
Browsers report CSS pixels. Multiply by the device pixel ratio to get the physical count; 2× on Retina, often 1.5× on scaled Windows laptops.
How many physical pixels sit behind each CSS pixel. It is what makes text sharp on a high-density screen.
The viewport width. That is what media queries respond to; screen resolution is not.
The CSS size times the device pixel ratio — a 300px logo needs 600px of image on a 2× display. That is what srcset is for.
No. The values are read from your device when the page loads and stay in your browser.