Discrete grey steps
Known requested code values create clear neighboring patches. The grayscale test makes missing visual separation easier to describe, especially when you note the step count and room conditions.
Tone separation from black to white
Grayscale Test
This grayscale test draws discrete grey patches, a smooth grayscale ramp, a uniform mid-grey field, and focused shadow or highlight steps. Use it to compare neighboring tones and broad panel areas while keeping browser zoom, display settings, room light, and viewing position consistent.
A repeatable viewing sequence
How to use the grayscale test
- Return to ordinary display settings. Use the resolution and scaling you normally expect, disable temporary accessibility filters, and set a comfortable brightness. Avoid changing controls halfway through the grayscale test.
- Begin with 16 discrete steps. Each patch should progress visually from the previous patch. Switch labels off after learning the direction so the text does not distract from faint boundaries.
- Compare 8, 32, and 64 steps. Finer steps demand more visual discrimination. If adjacent patches merge, record where it happens instead of treating the result as a panel bit-depth reading.
- Switch to the smooth ramp. Look for abrupt edges, color tint, or bands. Then rotate the grayscale ramp to see whether a vertical or horizontal panel pattern becomes more apparent.
- Finish with focused and uniform fields. Use near-black and near-white modes for the ends of the tone range, then scan the 50% field from a centered viewing position for broad shading or mura-like patches.
Four patterns, four questions
What each grayscale pattern isolates
Smooth tone ramp
A browser canvas interpolates continuously from one endpoint to the other. Repeated edges may be banding in the visible output, but they do not locate the cause within the rendering chain.
Uniform mid-grey
One neutral code value covers the field. It reduces image detail so broad tint, dirty-screen effect, vertical bands, or brightness changes can be compared across panel zones.
Range-focused steps
Shadow and highlight modes spend the available patches near an endpoint. They help inspect visual discrimination where full-range steps would be too widely spaced.
Describe before diagnosing
How to interpret merged, tinted, or uneven grey
| Observation | Useful cross-check | What not to conclude |
|---|---|---|
| Several dark patches appear identical | Repeat near-black steps in a dimmer room and review black-level settings. | Do not infer a specific physical contrast ratio or defective panel from one pass. |
| The smooth ramp has repeated hard bands | Compare another browser, SDR/HDR mode, GPU output setting, and the stepped reference. | A grayscale test cannot label the display as “8-bit” or “10-bit.” |
| Mid-grey has a colored patch | Stay centered, change viewing angle separately, and compare several grey levels. | Do not assign a Delta E value or color-accuracy grade by eye. |
| Fine patches merge only at small window sizes | Use fullscreen and 100% zoom; scaling can blend boundaries before display output. | Do not treat a scaled browser image as direct access to pixel electronics. |
Rendering notes
How this grayscale test creates its fields
The discrete renderer calculates evenly spaced integer RGB triplets between the selected endpoints and paints each canvas patch without image assets. The smooth grayscale test uses a canvas linear gradient. Orientation changes the axis, while fullscreen resizes the canvas to the visible field and accounts for the browser-reported device pixel ratio.
Those choices make the source pattern deterministic, not the final light output. Resampling, color profiles, temporal or spatial dithering, local contrast, panel drive, viewing angle, and ambient illumination remain outside the page’s control. Use the grayscale test as a careful visual comparison and use measurement equipment when numeric tone tracking is required.