4:4:4 Chroma Subsampling Test
Render colored text and one-pixel patterns to visually check whether a display path preserves chroma detail.
Test settings
Applies only to the colored-text pattern; 12–32 px.
Test output
JavaScript is required to draw the test pattern. Enable it to run the test.
View all three patterns in fullscreen before recording the overall result.
- Pattern
- Colored text
- Readiness
- 0/4 confirmed
- Canvas backing
- —
- Device pixel ratio
- —
Inspect the physical screen. A screenshot contains only the browser image and cannot verify link or panel processing.
4:4:4 versus other chroma formats
Chroma subsampling lowers the sampling density of color detail. 4:4:4 keeps full chroma resolution; 4:2:2 reduces it horizontally; 4:2:0 reduces it horizontally and vertically.
| Format | Chroma resolution | Typical screen clue |
|---|---|---|
| 4:4:4 | Full horizontal, full vertical | Colored text, fine lines, and adjacent blocks are most likely to keep crisp edges. |
| 4:2:2 | Half horizontal, full vertical | Vertical edges in colored text may look soft, fringed, or merged. |
| 4:2:0 | Half horizontal, half vertical | Colored detail in both directions is easier to smooth; video often hides it better than desktop text. |
This is a visual screen only. It does not read the active HDMI, DisplayPort, GPU, or TV output format.
Learn more
Test flow and keyboard controls
Set the target display to its native resolution and restore browser zoom to 100%. View all three patterns in fullscreen from a normal distance, then inspect colored edges more closely. Arrow keys or 1, 2, and 3 switch patterns.
4:4:4, 4:2:2, and 4:2:0
Images can be described as luma plus chroma. 4:4:4 keeps both chroma planes at full resolution; 4:2:2 halves horizontal chroma detail; 4:2:0 halves horizontal and vertical chroma detail. Video often uses subsampling because vision is less sensitive to color detail than brightness, while high-contrast desktop text makes the difference easier to see.
How to record what you see
Confirm native resolution, 100% system and browser scaling, PC input mode, and overscan off. View colored text, one-pixel lines, and alternating blocks in fullscreen, then record the overall result as clear, slightly fringed/blurred, or obviously fringed/blocky. This is a condition-specific observation, not an automatic signal-format diagnosis.
Scope and possible confounders
The page cannot read the actual HDMI or DisplayPort format. Scaling, sharpening, subpixel order, antialiasing, color management, and TV processing can change the result. Screenshots verify only the page pattern, not the final panel output.
Privacy, implementation, and sources
The patterns and observation record are generated in this browser. No test data is uploaded, no remote API is used, and no third-party runtime is loaded.
The Canvas backing size is derived from CSS dimensions and devicePixelRatio, with image smoothing disabled. This reduces resampling inside the page but cannot bypass OS scaling or TV processing.
Frequently asked questions
How can I tell whether my TV supports 4:4:4?
Use native resolution, 100% browser zoom, and PC input mode. View colored text, one-pixel lines, and alternating blocks in fullscreen. Crisp edges across patterns are a useful clue; confirm the GPU and TV settings separately.
Does blurry colored text always mean 4:2:2 or 4:2:0?
No. Scaling, font antialiasing, sharpening, subpixel order, and video processing can create similar blur. Rule those out one by one.
Why use 100% browser zoom?
Non-100% zoom resamples text and one-pixel patterns, so the visual result may mimic chroma subsampling.
Can a screenshot prove 4:4:4 chroma?
No. The screenshot is taken before the display link and panel processing. Check the physical screen instead.