Screen test
Eleven full-screen patterns plus what your browser genuinely knows about the panel, with nothing to install.
These are values read from the system, not measured: the browser cannot see nits, contrast ratio or real colour coverage. Physical resolution is the logical one multiplied by the density.
Look for steps in the ramp. Bands instead of a continuous transition mean the chain is working at 8 bits, or the colour range is limited.
The ← → arrow keys change pattern, in full screen too.
Generated right here, in your browser. What you type never leaves your device.
Buying a monitor is easy; knowing what actually arrived in the box is less so. The spec sheet says 4K, 10-bit and HDR, and the only way to check that without a colorimeter is to put up the patterns that separate what a good panel does from what an ordinary one does, and look closely.
This page does two different things. First it tells you what the browser **knows** about the panel: real resolution in physical pixels, density, colour depth, gamut, and whether the system declares HDR. Those are read values, not estimates. Then it puts up eleven patterns grouped into tone, detail, panel, motion and colour, which answer what no system value can: whether the panel actually shows what it claims to show.
And one thing worth saying up front: **the browser cannot measure nits, contrast ratio or response time in milliseconds.** No web test can, and anyone handing you that figure invented it. What is here is what the system declares plus the patterns to judge by eye, which for banding, gamma, inversion and uniformity is surprisingly reliable.
How to use it
- 1
Read the panel readout first
The data block fills itself in. Compare the physical resolution against what you bought: if they differ, either the system is scaling or the cable will not carry more.
- 2
Start with the gradient
Look for steps. A gradient should climb with no visible jumps; if you see bands, the panel or the signal is working with fewer bits than you think.
- 3
Move to the greyscale
Count how many steps you can separate at each end. If the darkest three or four all read as black you are losing shadow detail; if the light ones merge, you are losing it in the highlights.
- 4
Measure your gamma without an instrument
Step back until the fine background lines blur into a flat grey. The numbered patch that best matches that grey is your gamma. The desktop standard is 2.2, and drifting far from it explains why photographs look washed out or muddy.
- 5
Look at uniformity, then move the screen
Stand a metre back and sweep the grey corner to corner: brightness differences read from a distance, never up close. Then, on the viewing-angle row, tilt the panel up and sideways to see how fast the tones fall apart.
- 6
Drop into the specific tests
If you suspect a single point, the refresh rate or an etched shape, each has its own page and its own procedure. This one tells you where to look; those measure it.
Where test cards came from
Before there was enough to broadcast all day, television filled the dead hours with a still image full of circles, lines and grey steps. It was not decoration: it was the working tool an engineer used to set geometry, focus, linearity and contrast without having to be in the studio.
The first famous one was RCA’s Indian Head, from 1939. It came from a monoscope — a tube with the image etched onto a metal plate and read electronically — so the card came out perfect with no camera in the path.
The most-watched of all is British. In 1967 the BBC introduced Test Card F, the first designed for colour, showing a girl playing noughts and crosses in front of a rag clown. The girl was Carole Hersee, the daughter of a BBC employee, and her face was on screen for so many hours across the decades that she is routinely cited as the most broadcast person in British television history.
What is still used today came out of that. SMPTE colour bars were standardised in 1978 and remain the reference pattern in video production. And when television stopped closing down at night and the cards stopped being broadcast, the same job moved to what you are doing now: full-screen patterns, served by a browser.
- 1939
- RCA’s Indian Head test card
- 1967
- Test Card F, the first in colour
- 1978
- SMPTE colour bars standardised
What each pattern measures, and why that one
The gradient hunts quantisation. A ramp from black to white needs many levels to look continuous; if the whole chain — file, graphics card, cable, panel — works at eight bits per channel there are 256 levels, and the eye starts resolving the steps exactly in the flat regions. Ten bits give 1,024 and the banding disappears. That makes the gradient the pattern that exposes an 8-bit panel sold as 10-bit, or a signal being clipped by the cable.
The greyscale hunts clipping. A panel can have good contrast on paper and still crush the four darkest steps into a single black, because the brightness setting or the colour profile is flattening that end. Counting visible steps at both extremes is the direct way to see how much real detail you are left with.
The sharpness pattern hunts scaling. A grid of one-pixel lines is the worst possible case for any interpolation: if the signal is not at the panel’s native resolution the lines smear, shimmer or take on a tint. It also exposes the artificial sharpening many monitors ship with enabled, which reads as a bright halo stuck to every line.
Gamma is measured without an instrument thanks to an old trick. A background of alternating one-pixel lines, half black and half white, averages to 50% light once you step back and the lines blur together. But 50% light is not level 128 on the scale: that depends on the panel’s gamma. So each patch carries the level that corresponds to one specific gamma, and whichever patch disappears into the background names yours. It is the classic visual method and it is still accurate to within a tenth.
Pixel inversion is a side effect of how an LCD works at all. To stop the liquid crystal degrading, the signal polarity flips every frame; if the panel’s inversion pattern does not line up with what you are displaying, a fine flicker appears. A one-pixel checkerboard is the worst possible case, which is exactly why it exposes it: on a good panel it reads as still grey, on a poor one it buzzes.
The moving block hunts ghosting. When a pixel is slow to change colour it leaves a trail behind the object; when the monitor overcompensates with overdrive, a bright halo appears in front. Here it needs saying plainly: **the browser cannot give you milliseconds.** It has no access to the moment the pixel finishes changing, only to when the change was requested. This shows you the trail; it does not measure it.
The uniform field hunts the panel itself. An LCD backlight is never perfectly even, and clouding and brighter corners are normal on IPS and VA. Distance matters more than eyesight: up close you count texture, from a distance you see the shape of the unevenness, which is what actually bothers you during a film.
And the readout at the top comes from what the browser exposes: `screen.width` and `screen.height` in CSS pixels, `devicePixelRatio` to convert them to physical pixels, `screen.colorDepth` for bits, and media queries for colour gamut and dynamic range. It is exactly what the system declares — no more, and no less either.
Checks that need no page at all
Much of what you see here can be reproduced with things you already have, and it is worth knowing how in case there is no browser around.
- 1
On Windows it is Settings → Display; on macOS it is Settings → Displays, holding Option to reveal the unscaled resolutions. If the system does not offer your panel’s native mode, suspect the cable.
- 2
Any photograph of a clear sky or a plain wall works as a gradient. If concentric bands appear in the transition, there is your quantisation.
- 3
A document at 8 or 9 point reveals scaling as well as a grid does. If the text carries a colour edge, your panel is receiving a signal that is not its own.
- 4
In the dark, on a dark grey background, from a couple of metres, you will see backlight bleed and uneven corners that simply do not exist in daylight.
If something is not working
Symptom:The resolution shown is not the one I bought
- Likely cause:
- The system is scaling, or the cable and port do not carry the bandwidth for the native resolution at that refresh rate.
- What to do:
- Set the native resolution in system settings. If it is not offered, try another cable: an older HDMI will not carry 4K at 120 Hz, and a cheap DisplayPort cable does not always either.
Symptom:I see bands in the gradient
- Likely cause:
- Quantisation: the chain is working with fewer levels than it needs, almost always an 8-bit signal or a limited colour range.
- What to do:
- In the graphics driver, check that the bit depth is set to 10-bit if the panel supports it, and that the output range is full rather than limited.
Symptom:The dark greys all look the same
- Likely cause:
- You are losing shadow detail — from low brightness, high contrast, or a colour profile crushing that end.
- What to do:
- Raise brightness and drop contrast a few points, then count the steps again. If nothing changes, check whether a picture mode like cinema or power saving is active.
Symptom:Fine lines shimmer or carry a colour edge
- Likely cause:
- The signal is not at the panel’s native resolution and something is interpolating it, or the sharpness control is above neutral.
- What to do:
- Set the native resolution and leave the monitor’s sharpness at its midpoint. On a panel with unusual subpixel layout, check the system’s text smoothing as well.
Symptom:It says no HDR and my monitor is HDR
- Likely cause:
- The browser reports what the system declares, and HDR is usually off by default on the desktop because it makes ordinary applications look wrong.
- What to do:
- Enable it in the system display settings and reload. If the monitor is HDR400 with no local dimming, the system may decline to declare it — with some justification.
Symptom:Full screen leaves black bars
- Likely cause:
- The window’s aspect ratio does not match the panel, or the browser is on a second screen with a different resolution.
- What to do:
- Move the window onto the screen you want to test before going full screen. Each panel is tested from its own window.
Things worth knowing
The most broadcast face in British television
Carole Hersee, the girl in Test Card F, appeared on the BBC for decades whenever there was nothing scheduled. Her image is estimated to have been on air for tens of thousands of hours — far more than any presenter.
Your resolution is not what the browser says
`screen.width` returns CSS pixels, not physical ones. A modern phone may report 390 when the panel is 1170: you have to multiply by `devicePixelRatio`. It is the cause of half the confusion about resolution on the web.
Many 10-bit panels are 8-bit plus a trick
The technique is called FRC: the panel alternates very fast between two neighbouring shades to fake the one in between. It works surprisingly well, which is why a clean gradient does not prove the panel is truly 10-bit.
Your monitor’s bright corners are normal
In an LCD the light enters at the edges and travels through a guide; making it arrive identically at the centre and the corners is close to impossible at consumer prices. Seeing it on dark grey is not a defect unless it is severe.
The factory sharpening is lying to you
Many monitors ship with sharpness above the neutral point, because a sharpened image is more impressive in a shop. On a fine-line pattern it shows as a white halo stuck to every line.
Frequently asked questions
Can this test measure my monitor’s nits or contrast?
No, and be suspicious of any site claiming otherwise. Measuring luminance needs a sensor pressed against the panel. The browser can only read what the system declares and paint patterns; the rest is your eye, which for banding and uniformity is genuinely good.
How is this different from the dead pixel test?
In what is being hunted. Here the panel is judged as a whole: banding, sharpness, uniformity and the values it declares. The dead pixel test hunts point defects — a dot that does not change with the rest — and for that it needs saturated primaries and a close look.
Why does the resolution not match what the system says?
Because the browser works in CSS pixels. The page shows both: the logical one and the physical one, which is the logical multiplied by the density. On a laptop scaled to 150%, that is exactly the difference.
Is judging gamma from patches reliable?
Surprisingly yes, to within a tenth. It is the classic visual method and it works because the eye compares two adjacent areas far better than it judges an isolated brightness. What it does not replace is a colorimeter if you need real calibration for colour work.
Why does the motion pattern not give me milliseconds?
Because the browser cannot know them. It sees when a colour change is requested, not when the pixel finishes making it; measuring that needs a high-speed camera or a photodiode. Any site handing you a response-time figure made it up.
What does it mean if the checkerboard buzzes?
That your panel has visible pixel inversion. It is not a fault and does not get worse, but it is tiring on interfaces full of fine detail, like spreadsheets or code. Changing the zoom level usually makes it disappear.
Can I use it on a television?
Yes, and it is one of the places it helps most, because televisions ship with aggressive picture processing. Open it in the set’s own browser or cast it from your phone, and test with the picture mode set to filmmaker or cinema.
Do I need full screen?
Not for the gradient or the sharpness pattern. For uniformity you do, because the browser chrome covers the top strip and that is precisely where backlight bleed concentrates.
Does any data about my screen leave my machine?
No. Everything is read and painted in your browser. The panel values are shown on the page and sent nowhere, because there is nowhere to send them: the site is static.
Related tools
Monitor calibration
Eight steps, each with its pattern, the exact state to reach, and which control to move in your monitor’s own menu.
Online ruler
Calibrate it once against a bank card and measure at true size, with the area and perimeter of any rectangle you draw.
Dead pixel test
Nine full-screen colours and an exerciser. Tells a dead pixel from a stuck one — different faults, different outcomes.
Refresh rate test
Measures the Hz you are receiving right now, not the ones on the box. With a motion test and a full display readout.
Updated