What Is a Color Banding Test?
A color banding test displays a controlled gradient that should change progressively from one tone to another. Instead of a smooth transition, banding appears as visible stripes, contours, or abrupt tonal shelves. This page generates grayscale, red, green, blue, combined RGB, and dark gradients locally. You can rotate them horizontally or vertically and choose smooth rendering or an explicit number of steps, making the source structure known.
The same task is often called a gradient test, monitor gradient test, display banding test, or gradient banding test. It evaluates the complete visible rendering path, not only the physical panel. A contour may come from the generated source, browser rasterization, operating-system color management, GPU output format, monitor processing, panel bit depth, dithering, compression, or an HDR/SDR conversion. The result is an observation, not automatic fault identification.
What Color Banding Looks Like
Banding forms boundaries across areas that should change gradually. On a grayscale ramp it may resemble vertical columns or horizontal terraces, depending on direction. In a color channel it can appear as repeated darker and brighter zones. Some transitions are easier to see in shadows because fewer code values or aggressive tone curves cover a perceptually important range. The Dark Gradient mode concentrates attention on that region.
Do not confuse every visible division with unwanted banding. The 256-, 128-, 64-, and 32-step modes intentionally quantize the gradient, so boundaries are expected and become progressively wider. They provide a reference for how contour spacing changes. The Smooth choice removes that deliberate step count, although the finite digital and display pipeline still cannot produce mathematically infinite tones.
How to Get Started
Set browser zoom to 100 percent when practical, select Grayscale and Smooth, then enter fullscreen. Hide controls so bright interface elements do not affect adaptation or local dimming. View from your normal distance and scan the ramp without leaning far off axis. Rotate between horizontal and vertical directions; a fixed panel artifact may remain attached to the screen while source bands rotate with the generated gradient.
Next inspect red, green, and blue separately, followed by RGB Combined and Dark Gradient. Compare smooth with 256-step, then use coarser modes to learn the appearance of known quantization. Keep HDR state, monitor preset, GPU range, room light, and browser constant. If you change one setting, return to the same gradient before drawing a comparison.
Smooth vs Stepped Gradients
Smooth mode uses a browser canvas gradient across the available backing-store resolution. Its purpose is to request a continuous interpolation through the browser’s normal color pipeline. Stepped modes draw a fixed number of solid segments. At 256 steps, each nominal eight-bit level is represented across the ramp; 128, 64, and 32 steps deliberately merge progressively more levels. Screen size and direction determine how wide each segment appears.
A visible difference between Smooth and 256-step does not establish native panel bit depth. Browsers may interpolate internally, GPUs may dither, displays may process at a different precision, and operating systems can transform color. Conversely, a perfectly smooth-looking ramp does not prove a native 10-bit panel because spatial or temporal dithering can conceal steps. Use the modes as visual references rather than a bit-depth certification.
Why Grayscale and RGB Tests Are Useful
Grayscale exercises equal red, green, and blue values and makes luminance contouring and neutral color casts relatively easy to spot. Individual channel gradients can reveal that one channel transitions differently or exposes contours at a different point. RGB Combined divides the screen into three channel ramps so they can be observed in one state without claiming a colorimetric comparison.
Dark gradients are useful because games, films, and photographs often reveal banding in skies, fog, shadows, and subtle lighting. Near-black behavior is also strongly affected by tone mapping, limited/full range configuration, black equalizers, local dimming, OLED compensation, and compression. A channel-specific result is a clue about the chain, not proof that a subpixel or panel electronics component is defective.
Common Causes of Visible Banding
Source quantization is the simplest cause: too few encoded levels cover a long transition. Editing operations can stretch a narrow range and expose gaps. Video codecs discard information according to bitrate and content, while screenshots may be saved in a format or color space that changes the gradient. A browser then decodes and composites the content through its own graphics path.
Beyond the source, ICC profiles, GPU output depth, RGB range, chroma format, HDR tone mapping, driver settings, monitor picture modes, internal lookup tables, panel depth, and dithering can change visible contouring. Some monitors apply smoothing that hides bands but also removes texture. Because several stages produce similar patterns, the color banding test cannot name the origin by appearance alone. Controlled substitutions—another browser, cable path, display, or local source—help narrow it.
Color Banding vs Compression Artifacts
Compression artifacts often follow blocks, edges, or moving regions and may shimmer over time. Banding usually follows a tonal contour across an otherwise smooth area. A compressed image can contain both: quantized gradients plus blocks or mosquito noise. This locally generated test avoids downloaded image compression, making it useful when comparing against banding visible in streamed content.
If the local gradient is smooth but a video shows contours, investigate the video source, bitrate, player, and HDR mapping before blaming the panel. If both show similar fixed contours, compare another browser and display input. Screenshots do not necessarily capture output-stage processing, and photographs add camera quantization and exposure. Choose evidence from the stage you are actually trying to evaluate.
Who Should Use a Gradient Test?
Photographers, video editors, designers, game artists, display owners, and quality-assurance teams can use a monitor gradient test as a quick visual check. It is helpful after changing an ICC profile, GPU output mode, HDR setting, cable, display preset, or browser. It also teaches what intentional step reduction looks like, which can prevent a coarse source from being mistaken for a monitor fault.
The test is not a substitute for a calibrated reference workflow. Critical production needs controlled viewing, verified test material, instrumented calibration, and application-specific color management. General users should judge whether an effect appears in real content at a normal distance. Very close inspection can reveal pixel-scale dithering or segment edges that are invisible in ordinary use.
Browser Color-Test Limitations
A web page cannot conclusively read native panel depth, active GPU output bit depth, exact HDR pipeline precision, gamut coverage, internal monitor processing, or dithering strategy. Canvas output travels through the browser and operating system before reaching the display. Device-pixel-aware backing stores prevent avoidable low-resolution scaling, but they do not bypass those stages or guarantee one encoded canvas value maps directly to one emitted luminance.
Browser zoom, page scaling, accessibility magnification, screenshots, remote desktops, capture software, mixed-HDR monitor setups, and color profiles can change results. Repeat in the intended application path when the real problem occurs elsewhere. The test provides a known locally generated visual stimulus and clear controls; it does not provide a causal diagnosis or a universal pass threshold.
Related Display Tools
Use the monitor test when you also need black-level, white-saturation, gamma, sharpness, uniformity, checkerboard, and geometry patterns. Use the screen bleeding test for dark fullscreen edge inspection. Screen resolution reports browser-exposed dimensions and device pixel ratio, while the PPI calculator combines physical diagonal and pixel resolution into density, pitch, dimensions, and viewing-angle geometry.
For motion behavior, open the screen tearing or motion blur tests; for browser-observed cadence, use the refresh rate test. Keep each intent separate: a gradient test examines tonal smoothness, not refresh, response time, or physical density. The methodology documents local canvas generation and pipeline limitations, and the disclaimer explains why the observation cannot certify hardware.