Ten QR code design mistakes

The ten mistakes

Every one of these violates a specific, measurable rule, which is also why every one is fixable in minutes.

1. Inverted colours

Light modules on a dark background. The rule: polarity is dark on light; scanner support for the reverse is inconsistent, so an inverted code fails silently for a share of your audience. Fix: inverted QR codes.

2. Contrast below 40%

Grey on white, gold on cream, brand-blue on brand-teal. The rule: ≥ 40% luminance difference between modules and background. Hue is irrelevant; luminance decides. Fix: contrast ratio minimum.

3. A shaved quiet zone

Borders, text or artwork inside the code's margin. The rule: ≥ 4 modules of clear background on every side, scaling with the code. Fix: aspect and padding.

4. A logo past the budget

The rule: keep coverage under ~20% of the code area even at level H (30% damage tolerance), central, never touching the corner squares. Fix: logo size limits by error-correction level.

5. Too small for the distance

A 2 cm code on a poster read from 3 m. The rule: minimum width ≈ scan distance ÷ 10. Fix: the 10:1 distance rule, or just use the size calculator.

6. Stretched or cropped

object-fit: cover, independent width and height, layout tools "fitting" the image. The rule: a QR code is square, plus its quiet zone. Fix: aspect and padding.

7. An upscaled raster

A 200 px PNG enlarged onto A2. The rule: raster exports at 300 DPI at final size, or better, print from vector. Fixes: print from SVG and pixelated when enlarged.

8. A busy background

The code laid over photography or texture, so contrast varies across the grid and no single threshold works. Fix: a solid light panel behind the code, QR codes on busy backgrounds.

9. No label, no reason

A naked code with no destination or motive. Not a scanning failure, a scanning refusal: people do not scan what they cannot evaluate. Fix: frames and CTA labels.

10. Never test-scanned

The artwork shipped because it looked right. Rendering and decoding are different operations, and only decoding proves anything. Fix: the validator before handoff, and a real test protocol before printing.

The pattern behind all ten

Each mistake is a missing number: 40% contrast, 4 modules, 20% coverage, distance ÷ 10, 300 DPI. Designers rarely break rules they can measure. They break rules nobody stated. State them in the brief, and run the finished artwork through the ordered design checklist before anything is printed at volume.

FAQ

What is the most common QR code design mistake?

Insufficient contrast and shaved quiet zones compete for first place, with one aggravator common to both: the artwork was never test-scanned, so the mistake surfaced after printing. Decoding the final artwork catches nearly everything on this list.

What makes a QR code fail to scan?

Almost always a violated number: contrast under 40%, quiet zone under 4 modules, module size below the camera's resolving power at the real scanning distance, or structural damage such as a logo over a corner square.

Are styled QR codes a mistake?

Styling is not the mistake; unmeasured styling is. Coloured modules, shaped dots and central logos all scan when the contrast, quiet-zone and coverage numbers hold, and all fail when styling is applied by eye without verification.

How do I check a QR code design before printing?

Decode the final artwork with a validator, confirm the payload byte-for-byte, then scan a printed proof with at least two phones at the real viewing distance. A twelve-step pre-flight exists for exactly this handoff.