QR Code Designer

Add colours, a logo, dot styles and a frame, and see straight away whether the code still scans.

By QRotto · Updated · 6 min read

Styling costs you reliability. This tool shows you how much

Every decoration you add to a QR code takes something away from its ability to be read. A logo covers modules. Low contrast makes the camera work harder. Dot shapes shrink each module slightly. None of that is a reason never to style a code, but it is a reason to know where the line is.

Most styling tools let you sail past that line and find out at the printers. This one decodes your styled code on every change and tells you straight away whether it still works, using the same method we used for our damage testing.

The check under the preview is the point of this tool. It is not a guess or a rule of thumb. We run a real decoder over the image you are looking at and report what comes back.

What the limits are, and where they come from

These are not numbers we copied from elsewhere. We measured them:

ChoiceWhat we foundWhat the tool does
Logo sizeLevel H survived 21% of the area covered, and failed above thatWarns past 20%, caps the slider at 30%
Error correction with a logoAnything below H fails quickly once modules are coveredForces H automatically when a logo is added
Inverted codesA light on dark code failed to decode at all in our testWarns you when the foreground is lighter than the background
ContrastLow contrast decodes in software but struggles with real camerasWarns below a ratio of 4 to 1
Corner markersCovering 0.08% of one corner killed the code outrightNever styles or covers the three corner patterns

That last row is why the finder patterns stay plain squares no matter which module style you pick. They are what the scanner uses to find the code at all, and our testing showed they have effectively no damage tolerance.

Getting a logo right

  1. Use a simple mark, not a full logo with text. Small text inside a QR code is unreadable anyway and wastes the area you are spending.
  2. Prefer a transparent PNG or a square mark. The tool places a background coloured pad behind it so the edges stay clean.
  3. Start at 12% and increase only if you need to. Smaller logos leave more error correction budget for print imperfections, which is where codes actually fail.
  4. Print larger than you would without a logo. You have spent the redundancy on decoration and have none left for a scuff or a fold.
Advertisement

Colour choices that survive contact with reality

The safe rule is dark modules on a light background. Within that, brand colours are usually fine if the dark side is genuinely dark. What breaks:

Frames and why they help more than styling does

If you want a code to get scanned more often, a frame with a short instruction does more than any amount of visual styling. An unlabelled code on a poster gets very few scans, because people do not scan things when they do not know what will happen.

"Scan for the menu" outperforms a beautifully styled unlabelled code, every time. The frame here adds that line without touching the code area.

Test the printed version, not just the preview

The check in this tool decodes a clean digital image, which is the most forgiving case. A phone camera pointed at printed paper in a dim room is a harder test.

So before a print run: print one at final size on the real stock, and scan it with an ordinary phone, at the real distance, at an angle. A styled code that passes that has earned its decoration. Our print sizing guide covers the numbers.

Common questions

Why does the tool force level H when I add a logo?

Because anything lower fails almost immediately once modules are covered. In our testing, level M managed 9% of its area covered while H managed 21%. With a logo you need every bit of that budget.

Why can I not style the three corner squares?

They are position markers, and the scanner uses them to locate the code before reading anything. We tested this: covering 0.08% of one corner, a sliver, killed a code that had shrugged off 21% of damage elsewhere. Styling them is a popular feature elsewhere and a bad idea.

Do dot and rounded styles reduce scannability?

Slightly, because each module ends up marginally smaller than a full square. At normal print sizes it rarely matters. At small sizes, use squares.

My code says it does not scan. What now?

In order: reduce the logo, raise the contrast, switch back to square modules, and check you have not inverted the colours. The check updates as you change each one, so you can find the specific culprit rather than guessing.

For a plain, maximally reliable code, the dedicated generators are simpler: URL, WiFi, vCard and the rest. Need many at once? The bulk generator does lists. And the scanner lets you verify any finished code, styled or not.

QRotto

QRotto builds free browser based QR code generators and writes the guides that go with them. Every generator is verified by decoding the codes it produces and confirming the output matches the input exactly. See our editorial standards.