Gridlines must stay weaker than data elements

What it is

Gridlines are background infrastructure for reading: their job is to help the eye carry data points to the axis, nothing more. Once a grid's visual strength (colour depth, line weight) approaches or exceeds the data marks', figure-ground inverts — readers see the grid first while the data drowns in the lattice, and thin lines, small points, and low-contrast marks get chopped into segments by the grid. Subduing the grid is not aesthetic taste but duty ordering: data elements are the chart's information body, the grid is scaffolding, and scaffolding must not outshine the building.

Why it happens

The visual system assigns attention priority by contrast: dark heavy grids compete for the same attention weight as data lines, and the grid's count (dozens of lines) vastly exceeds the data's (a few series), so in aggregate the scaffolding overwhelms the body. Every subduing technique lowers contrast: light grey over pure black, hairlines over heavy strokes, dashed or dotted over solid, and where needed, single-direction grids only. Backgrounds work the same way — dark grids on dark backgrounds are layout suicide. A grid's benefit comes from being "available but unseen": present when the eye needs a reference, retreating into texture when scanning data — a balance that holds only when it is markedly weaker than the data.

Where it stops holding

Subduing has a floor: a grid indistinguishable from the background has lost its referential function (roughly 10–15% luminance difference is the empirical usable floor). Scatterplots and point-heavy charts depend on grids more than line charts (points are scattered, with no continuous line to follow); heatmaps usually drop grids entirely (cell boundaries supply the structure). Minimal styles (no grid, no axis) stand only on self-sufficient data — direct labelling carries the readout (next leaf) — otherwise readability is being traded for style. Print and screen render greys differently; calibrate subduction per medium.

Applying it

• Grid spec: light grey (60–75% of background luminance), 0.5–1px hairlines, solid or fine dashes; at least one contrast class below the data strokes.
• Template default: single-direction grids (horizontal for line charts, vertical for bars); full grids reserved for scatterplots needing two-way registration.
• Verification: squint test or greyscale screenshot — what appears first, data or grid? Grid first means under-subdued; invisible grid means overdone.

Related

• Same group: U3.05.1 Tick density should match the precision readers need · U3.05.3 Direct labelling can replace gridlines and legends
• Nearby: U1.14.1 Non-data elements consume attention while carrying no information · U1.14.2 Over-pruning damages readability
• Search terms: gridlines · visual hierarchy · figure ground · chart furniture