RunTheTests
/

Colour Banding / Gradient Test

See whether your display renders a gradient smoothly or breaks it into visible bands.

Looking across the whole ramp — is it a smooth blend or does it step?

How this test works

The gradient is written pixel by pixel into a canvas rather than drawn as a CSS gradient, and that choice is the whole test. Browsers dither CSS gradients to make them look smooth, which hides exactly the quantisation being looked for — a CSS ramp can appear perfectly smooth on a panel that bands badly. Writing an exact 8-bit value into every column removes that help, so the only thing that can quantise the ramp is the display itself. Separate grey, red, green and blue ramps are offered because banding is often worse on one channel, most commonly blue.

What the results mean

Smooth
No visible stepping. Either a 10-bit path or an 8-bit panel with good dithering.
Faint stepping
The expected result for 8-bit. Not a fault — it is the arithmetic of 256 levels spread across a wide ramp.
Obvious bands
Usually fewer than 8 real bits reaching the panel: a 6-bit display simulating 8-bit, or a driver sending reduced depth.
Reported colour depth
What the browser claims for the signal path. 24-bit means 8 bits per channel, the standard desktop configuration.

Common problems and fixes

Banding is much worse on the blue ramp
Common and expected. The eye resolves less detail in blue, but panels also frequently allocate their weakest dithering there, so blue is where 6-bit panels give themselves away.
It bands on my laptop but not my monitor
Most likely the laptop panel is 6-bit plus frame-rate control, which is very common at almost every price point. No setting changes it.
It got worse after I turned on night mode
Colour filters quantise the image a second time, on top of whatever the panel does. Turn the filter off before judging the display.

Frequently asked questions

What is 6-bit plus FRC?

A panel with only 64 levels per channel that alternates rapidly between two adjacent levels to simulate the ones in between. It reports as 8-bit everywhere in software, and on slow gradients like this one the simulation becomes visible as banding.

Why not use a CSS gradient?

Because browsers dither them. That dithering is helpful in real designs and fatal in a test — it can make a badly banding panel look perfect. Writing exact values into a canvas removes the browser from the equation.

Is some banding normal?

Yes. Faint stepping on a full-width 8-bit ramp is a property of having 256 levels, not a defect. Distinct bands you can see without looking for them are the signal that something in the path is below 8 bits.

More in Device