Back to Blog
Guides

QR Code Design That Still Scans: The Four Limits Every Brand Hits

Aug 24, 20268 min read
QR Code Design That Still Scans: The Four Limits Every Brand Hits

Every brand hits the same wall with QR codes. The code goes to a designer, the designer makes it match the brand, and somewhere between the brand colour and the logo in the middle it stops being a QR code and becomes a picture of one. The failure is quiet: it scans on the designer's phone, in good light, from six inches, off a retina display. Then it goes to print at 2cm on matte stock under a shop light, and it doesn't.

There are only four things you can push, and each one breaks in its own way. Here is where each boundary actually sits.

1. Contrast — the one that breaks most often

A scanner does not see your colours. It converts the image to light and dark and looks for a grid. So the only thing that matters is the luminance gap between the module colour and the background — not whether the two colours look different to you. Two colours can be visually miles apart and nearly identical in luminance, and a mid-tone brand palette on white is exactly that trap.

We know because we shipped it. In August 2026 an audit of this site's own one-tap gradient presets measured them against a white background and found three of the four produced codes unlikely to survive print:

  • Sunset (orange → pink) — worst stop 2.80:1
  • Ocean (blue → cyan) — 2.43:1
  • Lime (green → lime) — 1.98:1
  • Grape (violet → pink) — 4.60:1, marginal rather than failing

Those were ordinary mid-tone palette colours. They look like brand colours because they are brand colours. The fix was not to abandon the identity — it was to take the same four colour families down into their darker range, which brought the worst stop on each to 7.31, 8.72, 8.98 and 7.13 to one. Same warm, same blue, same green, same purple. Codes that read.

The rule of thumb we settled on, and now enforce in the builder: 7:1 or better is safe, 3:1 to 7:1 is a gamble, below 3:1 treat as broken. If your brand colour cannot clear that against your background, use a darker shade of it for the modules. Nobody has ever noticed that a QR code was Pantone-accurate. Everybody notices one that will not scan.

The polarity trap nobody mentions

Light modules on a dark background — an "inverted" code — is the single most requested QR design change and the one most likely to fail. Most decoders assume dark-on-light, and plenty of phone cameras will not attempt the inversion. A high contrast ratio does not rescue this: white-on-black is 21:1 and still fails on a meaningful share of real devices.

If your layout is dark, put the code in a light panel. That panel is doing a job.

2. The logo in the middle — how big is too big

QR codes carry Reed–Solomon error correction, and the standard defines four levels. Roughly, each can recover this share of the code's data if it is damaged or obscured:

  • L — about 7%
  • M — about 15% (the default in most tools, including this one)
  • Q — about 25%
  • H — about 30%

The obvious conclusion is that level H lets you cover 30% of the code with a logo. That conclusion is wrong, and it is the most common way a branded code goes bad.

Two reasons. First, the percentage is a budget for total damage, and you are spending it before the code leaves your screen — ink spread, a fold, a scuff, a bad camera angle and glare all draw on the same budget. Spend the whole thing on a logo and there is nothing left for the real world. Second, a centred logo removes a solid contiguous block, which is harder to recover from than the same number of scattered modules.

In practice: keep a centre logo under about a fifth of the code's width, raise error correction one level when you add it, and leave the three corner finder patterns and the timing lines between them completely alone. Those are how the scanner locates and orients the grid. A logo that clips a corner square does not degrade the code — it stops it being a code.

Raising the level is not free either: more correction means more modules for the same content, which means a denser code, which means each module is physically smaller at the same printed size. Which brings us to the part everyone skips.

3. Module shape — safe, up to a point

Rounded modules, dots, and styled corner eyes are the least dangerous thing on this list, which is why they are worth reaching for first. The scanner samples the centre of each module cell, so a shape that keeps its mass in the middle of the cell reads fine.

Where it goes wrong is at the extremes. Small circular "dot" modules shrink the mass in each cell, so the code needs more physical size or more contrast to hold up — and dots plus a marginal colour plus a small print is three thin margins stacked. And a heavily restyled corner eye can stop looking like a finder pattern to the decoder, which is the one part of the pattern that is not error-corrected at all.

You can preview all of this before you commit: the QR Design Studio renders the styled code live, and the builder shows a contrast reading as you change colours rather than after you have downloaded the file.

4. Quiet zone — the margin that is part of the code

The blank border around a QR code is not whitespace, it is a component. The standard specifies a clear margin four modules wide on every side, and the decoder uses it to find where the grid stops. Crowd it and the code gets less reliable at exactly the distances that matter.

This is the most common layout mistake, because in a layout tool the code is a rectangular image and butting other elements against its edge looks tidy. It also survives testing on a screen — where the code is large and the camera is close — and fails on a business card.

Give the code its own clear space. Do not run a border right up to it, do not sit body copy against it, do not place it over a photograph or a gradient background. If you need it on an image, put it in a solid light box.

Size, and why it is a design decision

Physical size interacts with everything above. The more you put in a code, the more modules it has; the more modules, the smaller each one is at a fixed print size; the smaller each module, the less abuse it tolerates.

That gives you a lever most people miss: shorten the destination URL and the code gets simpler, and a simpler code survives being small, being styled, and being printed badly. A long link with tracking parameters produces a dense code that fights every other decision on this page. This is one of the practical arguments for a dynamic code — the short redirect URL is what gets encoded, so the pattern stays coarse no matter how ugly the real destination is.

And whatever size you choose, the distance matters more than the dimension. A code on a poster read from across a room needs to be far larger than the same code on a table tent read at arm's length.

The check that takes two minutes

Before anything goes to print:

  • Print it at final size on the actual stock, or at minimum on plain paper at the exact dimensions. Do not test on a screen.
  • Scan it with the worst phone you can find, not your own. Old camera, cracked lens, whatever is in the office drawer.
  • Scan it badly — at an angle, from the far end of the room, under a warm bulb, with a reflection across it.
  • Scan it with a plain camera app, not a dedicated QR reader. Dedicated readers are far more forgiving than the built-in camera almost everyone actually uses.

If it fails any of those, the fix is nearly always the same and nearly always the boring one: darker modules, smaller logo, more margin.

What this comes down to

A QR code is a piece of machine-readable print, and it has tolerances the way any piece of print does. Contrast is the tightest, the logo is the most over-spent, the quiet zone is the most often ignored, and shape is the freest — which is why shape is where a brand should spend most of its budget.

The reason we can be specific about the first one is that we got it wrong on our own presets, measured it, and fixed it. A tool that hands you a one-tap style which produces an unscannable code is not offering a styling choice; it is shipping a defect.

→ Open the QR Design Studio and see the contrast reading live

Ready to create beautiful QR codes?

Make your own in 30 seconds — no signup required to try.