1. Establish the neutral baseline
Open the black-to-white ramp in fullscreen at 100% browser zoom. Scan along the full transition. A smooth ramp has no intentional boundaries, so any visible contour is part of the output you are observing.
Inspect transitions, not a bit-depth badge
Color Banding Test
The color banding test renders independent black-to-white, red, green, blue, cyan, magenta, and yellow ramps. Rotate each ramp, compare its smooth version with known discrete steps, and look for repeated edges or abrupt changes in a controlled visual workflow.
Smooth first, reference second
A practical color banding test sequence
Change one variable at a time so the comparison remains meaningful.
2. Learn the stepped appearance
Switch rendering to stepped and choose 8 or 16 levels. These boundaries are intentional. Increase the count to compare obvious reference steps with subtler contours in the smooth color banding test.
3. Separate channel behavior
Repeat red, green, and blue without changing picture mode. Then use cyan, magenta, and yellow to combine channels. Record whether a contour stays in the same tone region or is visible only in one mixture.
4. Cross-check the pipeline
If bands are important in normal use, compare the color banding test after verifying expected resolution, SDR or HDR mode, GPU range, output format, and the display’s gradient or contrast-enhancement settings.
The visible contour has a route
Where gradient banding can enter the chain
| Stage | Possible influence | Useful check |
|---|---|---|
| Browser and source canvas | Color management, compositing, zoom, and browser-specific gradient rendering | Keep zoom at 100%; compare a current second browser without changing other settings. |
| Operating system and GPU | Output depth, RGB range, chroma format, HDR conversion, and color profile | Confirm the intended mode from system and GPU controls; avoid guessing from appearance. |
| Display link and processing | Bandwidth negotiation, internal processing, dynamic contrast, and local tone mapping | Compare with enhancement features unchanged, then disable one documented feature at a time. |
| Panel and viewing conditions | Panel drive, dithering, uniformity, viewing angle, reflections, and ambient light | Repeat from the normal centered position and check whether bands exist in real content. |
What the code draws
Rendering method for the color banding test
Smooth mode creates a canvas linear gradient from channel value 0 to 255 on the selected axis. The primary ramps increase one channel; the secondary ramps increase two channels together. Stepped mode calculates evenly spaced integer values and fills adjoining rectangles, giving you an intentionally quantized reference made by the same renderer.
The page does not add its own dithering. That keeps the source method understandable, but it cannot prevent the browser, GPU, or display from applying other interpolation or dithering. The color banding test shows the delivered visual result and cannot isolate a physical component or determine native panel bit depth.
Read bands in context
When a contour matters
Only in one browser
A difference isolated to one browser may indicate rendering or color-management behavior before the signal reaches the panel. It is still an observation, not proof of a software defect.
Also in normal gradients
Bands visible in skies, shadows, or generated graphics deserve a source-quality cross-check. Compression and low-bit-depth media can contain contours that a display is simply reproducing.
Changes with picture mode
A strong change after switching display processing suggests the mode affects the output. Keep the color banding test settings recorded; do not assume the panel hardware changed.