QR code design best practices: seven rules ranked

Seven rules, ranked by kill rate

Almost every styled QR code that fails in the wild breaks one of seven rules. They are ranked here by how often violating them is the actual cause of a dead code, not by how often designers worry about them: the two orders are nearly opposite.

#	Rule	The number	Break it and
1	Dark modules on a light background	≥ 40% luminance difference	the code is unreadable everywhere
2	Quiet zone	≥ 4 modules, all four sides	detection fails intermittently
3	Size for distance	width ≥ distance ÷ 10	scans in hand, fails on the wall
4	Leave the three eyes findable	1:1:3:1:1 ratio intact	the scanner never locates the code
5	Logo inside the budget	≤ ~20% coverage at EC H	works on screen, dies in print
6	Style without starving modules	≥ ~60% ink per module, never merged	fails at small sizes
7	Verify the final artwork	decode the actual export	all of the above ship unnoticed

Contrast and polarity (rules 1)

Decoders threshold on luminance, not hue, so any brand colour works if it is dark enough: the working minimum is a 40-point luminance difference against the background, and the safe target is above 60. Put the colour on the modules and leave the background white; light-on-dark codes fail on a meaningful share of scanners because inversion support is inconsistent.

Space and size (rules 2–3)

The quiet zone is four clear modules on every side: frames, text and page edges all count as violations. Size follows the 10:1 rule: a code read from 2 m needs to be at least 20 cm wide. The size calculator does the arithmetic for any distance, and close-range print has a hard floor of 2 × 2 cm.

Structure (rule 4)

The three corner squares are how a scanner finds the code before error correction does anything. Restyle them with intent (rounded, circle and leaf variants survive because they keep the 1:1:3:1:1 scanline ratio), but never cover them, fade them, or open the ring. Custom eye shapes explains which variants carry which risk.

Logos and module styling (rules 5–6)

A centred logo is spent error-correction budget: keep it near 20% coverage at level H and give it a clear panel. Module restyling is safe when every module keeps roughly 60% of its ink and no neighbouring modules merge: the shape comparison ranks square, rounded, dot, bar and organic styles by that margin.

Verify (rule 7)

Rules 1–6 fail silently: the artwork looks fine and simply does not scan. The fix is mechanical: run the finished export through the validator, which renders the code and reads it back with a real decoder, before anything goes to print. UseQR does this automatically on every download, but re-check after any edit in a design tool.

FAQ

What is the most common QR code design mistake?

Insufficient contrast, usually from colouring the background instead of the modules or using a light brand colour like yellow or orange for the modules. It kills more codes than logos, styling and sizing errors combined, and it fails on every scanner rather than just some.

Can I style every part of a QR code?

You can restyle module shapes, eye shapes, and colours freely within the contrast and fill limits. The parts you must not alter are structural: the three finder squares' proportions, the timing lines, and the four-module quiet zone around the whole symbol.

How much of a QR code can a logo cover?

About 20% of the area at error-correction level H, placed centrally on a clear panel. At the default level M, keep it under about 10%. The theoretical ceilings are higher, but print damage and camera angle draw on the same budget.

How do I check a designed QR code still scans?

Decode the final exported file, not the on-screen preview. A validator that rasterises and reads the artwork back catches contrast, logo and styling failures in seconds, and testing a printed proof under poor light catches the rest.