U11.04.3Too-thin lines vanish on low-contrast screens and projectorsdesign

A crisp one-pixel line in the design file can vanish entirely on a projector or a cheap screen

Aliases: line width · stroke weight

What it is

A crisp 1-pixel line in the design file may render as a broken ghost on a projector or blur into faint gray through anti-aliasing on a low-resolution screen. A line's visibility is the product of stroke width and contrast: both must hold, and when either is weakened (projection lowering contrast, scaling lowering pixel density), thin lines disappear first. What disappears is precisely the data itself—trend lines "refined" into hairlines are the chart's information core.

Why it happens

Thin-line disappearance is a rendering physics floor: a line needs to cover a perceivable pixel width with enough ink (contrast × width) to exist visually; a 1-px line that looks refined on a HiDPI design file maps to less than one physical pixel on a low-DPI projector, and anti-aliasing smears it into translucent gray. Low-vision users' discrimination of thin lines is further reduced—to them a hairline flickers in and out of existence. The design implication: data lines deserve a minimum weight floor (commonly from 2 px, key series heavier), reserving thin strokes for auxiliary elements like gridlines. Scaling is a second stress test: when a chart shrinks into a dashboard card or a document, line width shrinks proportionally, so width must be validated at the "smallest rendered size," not the largest design size. In dense multi-line charts, width allocation also carries hierarchy: the heaviest line belongs to the most important series (the same group's hierarchy thinking)—uniform weight in a crowded chart declares everything unimportant.

Where it stops holding

Line width trades off with information density: bolding every line in a dense multi-line chart blurs them into a mass, so a hierarchy strategy (bold the key series, thin and fade the secondary) beats uniform bolding. Width does not conflict with the position channel's reading (foundational knowledge: position and length carry the values)—width is only a visibility guarantee, and bolding does not alter position-reading precision. In touch contexts, line width intersects with touch targets (the same group's touch-target item): the hit area should be decoupled from the visual stroke—a visually 2-px line can carry an invisible 20-px hit band; the two are set independently.

Applying it

  • Set data lines to at least 2 px (2.5-3 px for key series); reserve 1 px and low contrast for gridlines and auxiliary strokes.
  • Validate at the smallest rendered size: shrink the chart to its smallest real use (dashboard card, mobile half-screen) and confirm the lines remain visible.
  • In dense multi-line charts, use hierarchical weights: key series bold, secondary series thin and faded, paired with highlight interactions.
  • Verification: view the chart on a projector or low-resolution external display; broken or vanished data lines mean the width floor is not met.

Related

  • Same group: U11.04.1 Chart marks need discernible contrast against the background · U11.04.2 Mark-vs-background contrast and adjacent-category contrast are two independent requirements · U11.04.4 In-chart text minimum size is judged by final rendered size, not the design file · U11.04.5 Interactive marks are also bounded by touch-target requirements
  • Nearby: U11.04.1 Chart marks need discernible contrast against the background · U2.03.3 Beyond a handful of lines, tracking becomes infeasible
  • Search terms: line width · stroke weight · chart legibility

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U11.04.3