Screen Resolution Test
See your screen resolution, viewport, device pixel ratio and aspect ratio, and how they relate.
Text Clarity Test
Check whether text on your monitor or TV is as sharp as it should be. Colored text, 1-pixel lines and dots show signs of chroma subsampling, scaling blur and oversharpening; the page cannot read the signal itself.
Showing Colored text · 1 of 6
The colored rows should look as crisp as the black and white rows; blur or fringes on them point to chroma subsampling.
Runs entirely in your browser. Test results, audio and video never leave your device.
How to check text clarity and chroma 4:4:4
- Reset browser zoom (Ctrl+0, or Cmd+0 on a Mac) and set your screen to its native resolution. If a note appears under the pattern buttons, read it before you judge fine lines.
- Press Start test to fill the screen and sit at your usual distance. Change patterns with Next, the arrow keys or a tap, and press Esc or Exit to leave.
- On Colored text, compare the colored rows with the black and white rows at the top. If black and white text is crisp but red on blue or blue on red looks smeared or fringed, color detail is likely being reduced, which is what chroma subsampling does.
- On Line pairs and Checkerboards, every panel should show fine, even detail. Colored panels that blend into one flat color while the black and white ones stay distinct point to chroma subsampling; moiré or bands in every panel point to scaling.
- On Pixel dots, every dot should be a sharp point of the same size. To see the subpixel layout, look at the dots through a magnifier or your phone camera’s zoom.
- On Text sizes, compare the small text with text in other apps. On Sharpness, look for a thin light or dark outline along the edges: that halo often means the display adds sharpening.
- If something looks wrong, try the fixes below one at a time, and check again after each.
What is chroma subsampling?
Chroma subsampling is a way to save bandwidth by sending color at a lower resolution than brightness. At 4:4:4, every pixel keeps its own color; 4:2:2 shares color between each pair of pixels side by side, and 4:2:0 across each block of four. Black and white text stays sharp, but colored text on a colored background blurs or gets fringes.
4:4:4 vs 4:2:2 vs 4:2:0
The numbers describe how much color detail a video signal keeps. Brightness keeps every pixel in all three, which is why black and white text stays sharp whichever one reaches your screen. RGB keeps every pixel’s color too, so it looks the same as 4:4:4.
| Format | Color detail | Where you meet it | Colored text |
|---|---|---|---|
| 4:4:4 (or RGB) | Every pixel has its own color | Computers connected to monitors | As sharp as black and white text |
| 4:2:2 | One color for each pair of pixels side by side | Some HDMI modes; can happen at 4K with HDR | Soft or fringed; colored vertical lines merge |
| 4:2:0 | One color for each block of 2 × 2 pixels | Most video and streaming, and some HDMI modes at 4K | Blurred in both directions |
How to fix blurry or fringed text
These are settings to try, and none is certain to help. Change one at a time, and check the patterns again after each.
- Use the native resolution. Any other resolution makes the monitor or TV scale the picture, which softens every line; the Screen Resolution Test shows the resolution and scale your system uses.
- On a TV, set the input to PC; the setting’s name varies by brand. Samsung says renaming the input PC or PC DVI fixes fuzzy text from a computer, because the TV then adjusts its scaling. LG says setting the input label to PC fixes a picture that is blurry or out of position on its TV monitors. Neither says it changes the color format, so check Colored text again afterwards.
- If the edges of the desktop are cut off or everything looks enlarged, the picture is being zoomed, which softens every line. The Screen Geometry Test shows whether the edges are cut off, and how to stop it.
- On the computer, check the output color format, or pixel format, in the graphics driver’s settings, if it has one. RGB and YCbCr 4:4:4 keep every pixel’s color; YCbCr 4:2:2 and 4:2:0 do not. Full and limited range is a separate setting that changes black levels, not sharpness; the Contrast Test checks it.
- Use the HDMI port the TV’s manual recommends for a computer or for 4K at 60 Hz, and turn on the TV’s enhanced HDMI setting for that port if it has one; its name varies by brand, so check the manual.
- Lower the sharpness setting until the outlines on the Sharpness pattern disappear. The neutral setting differs between brands: on some displays it is 0, on others the middle of the range.
What this test can detect
- Colored text that blurs, smears or gets colored fringes while black and white text stays sharp: the typical sign of chroma subsampling.
- Scaling blur: 1-pixel lines, checkerboards and dots that turn into gray mush, moiré or uneven bands.
- Light or dark halos along the edges of the squares and lines on the Sharpness pattern, often a sign of oversharpening.
- Small text that looks soft, thin or uneven at the sizes you read every day.
- Your screen’s subpixel layout, such as RGB or BGR stripes, when you look at the Pixel dots through a magnifier.
- Display scaling and browser zoom that together do not come to a whole number, and a test area the browser does not size in device pixels: each one puts a note under the pattern buttons.
How it works
Each pattern is drawn on a canvas with one canvas pixel per device pixel and no scaling. The size comes from the device-pixel-content-box that ResizeObserver reports in Chrome, Edge and Firefox; elsewhere, including Safari, the page estimates it and says so.
Stripes and checkerboards alternate every 1 or 2 device pixels, dots sit 2 or 4 pixels apart, and text runs from 9 to 24 CSS px in your system font. A note appears when the scale is not a whole number, or when the size had to be estimated. Nothing is measured: you judge by eye.
Limitations
- It is a visual check. A web page cannot read the signal format, color depth or resolution your graphics card sends, so the page never tells you which one you have. It also cannot tell RGB from YCbCr 4:4:4, since both keep every pixel’s color.
- The note covers only what the browser reports: a scale that is not a whole number, and a browser that does not report the test area’s size in device pixels, such as Safari, where the estimate can be a pixel out at a fractional scale and stretch the patterns slightly. It cannot see scaling after the browser: a scaled resolution in macOS, where the browser still reports 200%, a TV’s zoom or overscan, or scaling by the graphics card.
- Scaling, a TV’s sharpening and picture processing, and your operating system’s text rendering, such as ClearType on Windows, all change how the patterns look. Cameras add their own sharpening and moiré, so judge sharpness by eye, not from a photo.
- At a normal distance, single pixels are too small to show their red, green and blue parts. Seeing the subpixel layout needs a magnifier or a phone camera’s zoom.
- Fine black and white stripes and checkerboards are uncomfortable for some people, and in rare cases can trigger seizures in people with pattern-sensitive epilepsy. Look away or press Esc if they bother you.
Frequently asked questions
Can the page tell which chroma format my screen receives?
No. A web page cannot read the signal, so it never names a format. It shows patterns that look different when color detail is reduced: if colored text and colored stripes blur while black and white ones stay sharp, check the color format in your graphics settings and on the display.
Why is text blurry on my TV but sharp on my monitor?
Often because the TV treats the computer like a video source: it may scale the picture, sharpen it or reduce its color detail. If Colored text blurs while the black and white rows stay sharp, reduced color detail is the likely cause; if everything looks soft, scaling is. Try the TV’s PC input setting and the native resolution first.
Why does text look worse with HDR on?
Sometimes because of bandwidth. HDMI 2.0 carries up to 18 Gbps. HDR sends more data than SDR, so at 4K and 60 Hz a computer or TV may switch to 4:2:2 or 4:2:0, or to 8-bit color. If Colored text blurs only with HDR on, check the output color format.
Do I need 4:4:4 for movies and games?
Not for movies: most consumer video (streaming, Blu-ray and broadcast) uses 4:2:0, so a 4:4:4 signal adds no detail there. It matters most on the desktop, where text and thin colored lines need full color detail. In games it mainly sharpens small colored text and thin lines in menus and on-screen displays.
Why do I see colored fringes around black text?
Often from subpixel text smoothing, such as ClearType on Windows, which uses an LCD pixel’s red, green and blue stripes. Panels with another subpixel layout, such as some OLED panels, can show fringes. The ClearType Text Tuner turns it off: Control Panel > Fonts > Adjust ClearType text, or on Windows 11 search the Start menu for ClearType.
Why is text sharp here but blurry in one app?
Often because of display scaling. Above 100 percent, Windows stretches apps without scaling support, which blurs their text, while browsers draw text at the scaled size. Turn on Let Windows try to fix apps so they’re not blurry under advanced scaling settings, or in the app’s Properties > Compatibility tab, set Override high DPI scaling behavior, scaling performed by: Application.