Contrast Ratio Test
Inspect shadow detail, highlight detail, clipping, and gradient separation without claiming a measured contrast ratio.
This check opens a focused test surface. You can return with Escape. Review what this browser test can and cannot measure.
Before you start
- Use stable room lighting and your normal display mode.
- Allow the display to warm up and avoid changing settings during the run.
How to run this check
- Start the Contrast Ratio Test
- Choose a gradient pattern (Horizontal, Vertical, Diagonal, Split)
- Try to distinguish all brightness levels (1-5, 5-10, etc.)
- Record the darkest and brightest steps you can distinguish without changing settings
- Use a calibrated luminance meter when a numeric contrast value is required
What this browser test can tell you
Can help you check
- Black and white clipping, shadow and highlight detail, and gradient separation.
Cannot measure
- This test cannot measure numeric contrast ratio, black luminance, or peak brightness.
Setup, interpretation, and sources
Recommended setup
- Use a stable display mode and allow the display to warm up.
- Check the patterns in the room lighting you normally use.
How to interpret what you see
- Record the darkest and brightest steps you can distinguish without changing settings.
- Exact contrast and luminance measurements require a calibrated colorimeter or luminance meter.
Sources
Methodology reviewed:
💡 Why This Test?
Contrast ratio is a measured relationship between black and white luminance. This browser page does not measure those luminance values or calculate a ratio.
The 20 patterns let you inspect visible shadow and highlight separation, clipping, and banding under your current browser, display, and room conditions.
✅ What You'll Check:
- Whether gradients show smooth transitions or visible steps
- If you can distinguish levels 1-5 (dark) and 95-99 (bright)
- Crushed blacks (darkest areas merge into pure black)
- Clipped whites (brightest areas merge into pure white)
- The pattern and steps where visible detail merges
📖 How to Use This Test
- Use stable room lighting and your normal display mode
- Allow the display to warm up and keep settings unchanged
- Click "Start Test" to enter fullscreen
- Navigate through all 20 gradient patterns using arrow keys
- Look for smooth transitions without visible banding
- Record the darkest and brightest distinct steps you can see
- Note any areas where detail is lost (crushed/clipped)
Tip: Do not adjust settings while recording a run. Exact contrast and luminance require a calibrated colorimeter or luminance meter.
Click to start fullscreen contrast testing. Navigate through 20 different gradient patterns.
👁️ What You're Looking For
Separated Steps Example
Clear distinction between all brightness levels
Merged Dark Steps Example
Dark areas merge together, losing shadow detail
Merged Bright Steps Example
Bright areas merge together, losing highlight detail
What This Pattern Shows
🎨 Pattern Types
- ● Gradients: Basic 0-100% transitions
- ● Split Patterns: Complex multi-section tests
- ● Fine Steps: Closely spaced browser values
- ● Directional: Horizontal and vertical
🔍 Quick Tips
- • Use steady room lighting
- • Look for smooth transitions
- • Check shadow and highlight detail
- • Test at normal viewing distance
📋 How to Test
Start Fullscreen Test
Click the test button and enable fullscreen for a larger visual comparison.
Dark Room Testing
Use steady room lighting and keep the display mode unchanged while comparing patterns.
Check All 20 Patterns
Navigate through gradients, split patterns, and fine-step tests using arrow keys.
Look for Detail Loss
Watch for crushed blacks, clipped whites, or missing steps in gradients.
Navigate
Use arrow keys, navigation buttons, or click anywhere to cycle patterns. Press ESC to exit.
📊 Observations to Record
Steps appear separated
- • Note which dark steps remain distinct
- • Note which bright steps remain distinct
- • Keep the viewing conditions
- • Repeat before comparing settings
Some steps merge
- • Record the first missing dark step
- • Record the first missing bright step
- • Check browser and display settings
- • Do not infer a numeric ratio
Banding or clipping appears
- • Describe where it appears
- • Compare ordinary content
- • Keep SDR and HDR runs separate
- • Measure luminance externally if needed
🔧 Common Issues & Solutions
⚫ "Can't distinguish dark levels 1-5, they all look black"
What you observed: Several near-black browser steps appeared to merge under the current conditions.
Context: Room lighting, display mode, brightness and contrast controls, browser color management, and operating-system output can all affect visible separation.
Next step: Record the darkest distinguishable step before changing anything. If you adjust one supported setting, repeat the full comparison and keep both observations.
🌫️ "Blacks look gray/washed out, poor contrast" (IPS glow vs low contrast)
What you observed: Dark areas appeared gray or changed across the screen or with viewing angle.
Context: Reflections, room light, screen surface, display brightness, viewing position, and display processing can change the visible black level.
Next step: Compare from a centered position under your normal lighting and record where the appearance changes. This page cannot reveal the display technology or measure native contrast.
📊 "Gradients show distinct steps/bands instead of smooth transition"
What you observed: Distinct steps appeared in a browser-rendered gradient.
Context: Browser rendering, scaling, color management, GPU output, display processing, screenshots, and compression can introduce or hide banding.
Next step: Record the pattern and location. Verify signal settings separately; the pattern cannot determine panel bit depth or isolate a limitation.
📐 "Calibrated monitor still fails gradient test" (Gamma vs EOTF)
What you observed: A browser pattern differs from a separate calibration or application result.
Context: The browser, ICC profile, operating-system HDR mode, application color management, tone mapping, and content encoding may use different processing paths.
Next step: Keep the comparison in one controlled mode. Use calibrated measurement and profiling software for a quantitative result.
💡 "SDR looks fine but HDR has crushed blacks/clipped whites"
What you observed: Shadow or highlight steps changed after switching the operating-system or display HDR mode.
Context: Content encoding, browser output, operating-system tone mapping, GPU settings, display processing, and the current mode can all affect clipping. This page does not measure brightness or verify an external certification.
Next step: Record SDR and HDR observations separately with the exact settings used. Follow device and operating-system guidance for supported calibration, or use measurement hardware.