QR code design best practices

Contrast comes first

Scanners distinguish modules by light versus dark. The single most important rule: keep strong contrast between the dots and the background. Dark dots on a light background is the gold standard. Anything that narrows that gap — pale dots, a busy background, a gradient through the data — risks failure.

Color choices

You can color a code, but follow the rules:

• Keep dots darker than the background, with a clear luminance difference — not just a hue difference. Two colors of similar brightness confuse scanners even if they look distinct to the eye.
• Avoid low-contrast pairings like yellow on white or navy on black.
• Use solid color, not gradients, across the data modules.
• Mind print color shifts — a color that's crisp on screen can muddy in CMYK printing.

Respect the quiet zone

Leave a clear margin of about 4 modules around the whole code. Don't let text, borders, or imagery intrude. A missing quiet zone is a leading cause of "but it looked fine" scan failures. See sizes and print resolution for sizing alongside the margin.

Adding a logo

A centered logo is the most popular customization, and it works because of error correction:

• Raise the error-correction level to H (~30% recovery) so the code tolerates the covered modules.
• Keep the logo small — cover no more than roughly 20–30% of the area, centered, away from the corner finder patterns.
• Never cover a finder pattern; the scanner can't locate the code without them.
• Test after adding it — error correction has limits.

Custom module shapes and frames

Rounded dots, custom corner "eyes," and framing ("Scan me") can look polished, but each departure from crisp squares costs a little readability. Use restraint, maintain contrast and module clarity, and a call-to-action frame genuinely helps people know to scan. The codes from this generator use sharp square modules for maximum reliability.

Frames and calls to action

People won't scan a code they don't notice or understand. A simple frame with a short instruction measurably improves scan rates:

• Add a clear prompt. "Scan for the menu" or "Scan to pay" tells people both what to do and what they'll get.
• Give it room. Surround the code with whitespace so it reads as an interactive element, not background decoration.
• Keep the frame outside the quiet zone. Decoration must never intrude on the 4-module margin around the pattern.
• Match the context. A code on a moving bus or a TV ad needs to be larger and on screen longer than one on a handheld flyer.

On contrast specifically, aim for a clear luminance gap — think dark navy or black on white, not mid-grey on light-grey. If you're unsure whether a color pair has enough difference, convert it to greyscale in your head: if the dots and background look similar in grey, a scanner will struggle too.

Always test before you commit

The non-negotiable step: scan your finished code with multiple phones (at least one iPhone and one Android), at the real size and distance, and on the actual printed material — not just the screen. A code that scans on your design monitor can fail on matte stock under shop lighting. Catching that before a print run saves the whole batch.

Frequently asked questions