Screen Resolution Test
Instantly verify your monitor is running at native resolution, test display sharpness, check for color banding, and identify chroma subsampling issues — all in your browser, no software required.
Test 1 — 1-Pixel Sharpness Grid
This canvas is filled with alternating 1-pixel black and white columns. At native resolution, you should see crisp vertical stripes. If the pattern looks grey or blurry, your monitor is not rendering at its native resolution — every other pixel is being merged.
What to look for: distinct black and white stripes = native resolution ✓ | uniform grey = non-native resolution ✗
Test 2 — Subpixel Checkerboard
A true 1-pixel checkerboard pattern. At native resolution, this should appear as a uniform mid-grey when viewed at normal distance (the pixels are too small to see individually). If you see a coarse grid pattern, you may be zoomed in or using a low-PPI display.
What to look for: smooth, even grey at arm's length = high PPI display ✓ | visible grid = low PPI or zoomed in
Test 3 — Color Depth & Gradient Banding
A smooth gradient from black to white tests whether your display can render all 256 brightness levels of an 8-bit panel. Visible stepped bands indicate a 6-bit panel, Limited RGB range output from your GPU, or a poor-quality cable compressing the signal.
What to look for: perfectly smooth gradient = 8-bit panel, Full RGB ✓ | visible steps or bands = 6-bit or Limited RGB output ✗
Test 4 — RGB Channel Gradients
Three independent channel gradients (red, green, blue). Chroma subsampling artifacts appear as uneven gradients in the red or blue channel while green looks smooth — because 4:2:0 subsampling preserves luminance (green-dominant) but compresses chrominance channels. If red or blue look stepped while green is smooth, your cable is bandwidth-limited.
What to look for: all three gradients equally smooth = full 4:4:4 color output ✓ | red/blue banded, green smooth = chroma subsampling active ✗
Test 5 — Text Rendering Sharpness
Text at multiple sizes rendered on a canvas at the device's actual pixel ratio. On a high-DPR display (Retina, 4K with scaling), the smallest text size should still be crisp and legible. On a standard 1x display at native resolution, text should have clean, anti-aliased edges without colored fringes.
What to look for: sharp, clean letter edges = correct resolution + DPR ✓ | fuzzy edges or colored fringes around text = scaling or subsampling issue ✗
How to Interpret Your Results
If Test 1 (1px grid) looks grey and blurry
Your monitor is not running at its native resolution. Open Display Settings (Windows: right-click desktop → Display settings; Mac: System Settings → Displays) and select the resolution marked (Recommended). This is always the panel's native resolution. Running at any other resolution forces the monitor to interpolate pixels, causing blur.
If Tests 3 or 4 show banding or uneven channels
Your GPU may be outputting Limited RGB (16–235) instead of Full RGB (0–255), causing crushed blacks. In Windows, open the NVIDIA Control Panel or AMD Radeon Software, navigate to Display → Output Color Format and set it to RGB Full (0–255). Alternatively, your cable may be causing chroma subsampling — replace HDMI 1.4/2.0 with HDMI 2.1 or DisplayPort 1.4.
If text (Test 5) has colored fringes
Colored fringes around text (especially red/blue halos on white backgrounds) are the classic signature of chroma subsampling caused by cable bandwidth limitation. This is most common when running a 4K monitor at 60Hz+ via HDMI 1.4. The fix is replacing the cable with a certified high-bandwidth alternative.
How to check if your resolution is truly correct
Compare the Physical Resolution card at the top of this page with your monitor's spec sheet. They should match exactly. If your monitor is 2560×1440 but the tool reports 1920×1080, your resolution is wrong regardless of what Windows labels "Recommended."
Common Screen Resolution Test Questions
Is this test accurate?
The resolution values read by this tool are directly from your browser's JavaScript APIs (screen.width, screen.height, window.devicePixelRatio) — these are exact values reported by your OS, not estimates. The canvas tests render at the actual device pixel level via canvas.width = element.offsetWidth * devicePixelRatio, ensuring they are drawn at physical pixel precision rather than CSS pixel precision.
Why does my Physical Resolution differ from my Viewport?
Because the browser renders in CSS pixels, not physical pixels. A 4K display at 150% scaling has 3840 physical pixels across but the browser sees it as 2560 CSS pixels wide. The Device Pixel Ratio (1.5 in this case) bridges the two. Both numbers are correct — they measure different things. See our full DPI vs PPI guide for a deeper explanation.
What should I do after finding an issue?
- Wrong resolution: Fix blurry screen on Windows — set to native (Recommended) resolution
- Gradient banding: Change GPU output from Limited RGB to Full RGB in driver settings
- Chroma subsampling (colored text fringes): Replace cable with HDMI 2.1 or DisplayPort 1.4
- Low PPI / coarse checkerboard: See our PPI guide to evaluate if your monitor has adequate pixel density
Frequently Asked Questions
How do I know if my monitor is at native resolution?
Check the Physical Resolution card at the top of this page and compare it to your monitor's specification sheet. They must match exactly. Additionally, if the 1-pixel sharpness test shows crisp black-and-white stripes (not grey), you are at native resolution. In Windows, navigate to Display Settings and ensure the resolution selected has "(Recommended)" next to it.
What is chroma subsampling and how does it make text blurry?
Chroma subsampling (4:2:0 or 4:2:2) compresses colour channel data to reduce bandwidth usage. When a cable cannot carry the full data stream for your resolution and refresh rate, the GPU activates subsampling automatically. Text appears blurry with coloured fringes because the color information for adjacent pixels is averaged together. Fix: use a certified HDMI 2.1 (48Gbps) or DisplayPort 1.4 (32.4Gbps) cable.
Why does the gradient look banded on my screen?
Gradient banding has two main causes: (1) a 6-bit panel that can only physically render 64 steps per channel rather than 256, and (2) Limited RGB output from your GPU, which clips the darkest blacks and brightest whites. For cause 2, open your GPU driver (NVIDIA Control Panel or AMD Radeon Settings) → Display → set Output Color Range to Full (0–255).
What does Device Pixel Ratio mean?
Device Pixel Ratio (DPR) is the ratio of physical screen pixels to CSS (logical) pixels. A DPR of 1 means one CSS pixel = one physical pixel. A DPR of 2 (Apple Retina, or 4K monitor at 200% scaling) means one CSS pixel = four physical pixels in a 2×2 grid, enabling crisp rendering of text and graphics without scaling artifacts. You can check your live DPR on our homepage resolution checker.