QR Code Design and Best Practices

Size: the most commonly underestimated factor

More QR codes fail in the field because they're printed too small than for any other reason. The relationship between code size and scanning reliability is not linear — it degrades rapidly once you cross below the minimum threshold.

The basic rule: a QR code should be at least 1/10th the size of the maximum scanning distance. If someone will scan it from 30 cm away, the code should be at least 3 cm × 3 cm. From 1 meter away, at least 10 cm × 10 cm.

Practical minimums by use case:

• Business cards: 2 × 2 cm minimum, scanned at roughly 20 cm. Any smaller and you're gambling on your audience having a high-end camera and perfect lighting. 2.5 × 2.5 cm is more reliable.
• Print ads, flyers, brochures: 3 × 3 cm minimum for codes scanned at arm's length (50 cm). 4 × 4 cm if the ad will be on a small page or the QR code isn't a primary focal point.
• Restaurant menus (table use): 3 × 3 cm. Menus are typically held at reading distance (40–50 cm).
• Retail shelf tags: 2.5 × 2.5 cm at minimum, assuming close-range scanning. More if the tag is above eye level or at the back of a shelf.
• Outdoor signage, posters: Scale by distance. For a bus shelter ad viewed at 1–2 meters: 10–20 cm. For a building-side mural scanned from the street: 30–50 cm minimum.
• Product packaging: At least 2.5 × 2.5 cm. Package surfaces are often curved, which reduces effective contrast and increases distortion — print larger than you think you need.

These minimums assume good print quality and adequate contrast. In low-light environments or on glossy materials with glare, go larger.

Color and contrast

QR code scanners work by detecting the luminance difference between dark modules and light background. They don't care about hue — only about how different the two colors are in terms of brightness.

The minimum recommended contrast ratio is 4:1, which is the same threshold used in web accessibility standards (WCAG AA). In practice, for print use where lighting conditions vary, aim for 5:1 or higher.

What works reliably:

• Black modules on white background — always the safest choice
• Dark navy, dark green, dark burgundy, or charcoal on white
• Black or dark color on a light pastel background
• Dark modules on a very light brand color

What causes problems:

• Light foreground on dark background ("inverted" codes) — technically valid and scannable by most modern apps, but fails with older readers and some built-in camera apps. If you must use an inverted scheme, test thoroughly.
• Low-contrast combinations: gray on white, dark blue on dark gray, light green on white
• Gradient fills across the modules — some generators support this, but the variation in module density can confuse scanners
• Metallic inks and foil stamping — these create specular reflection that reads as overexposure on camera sensors
• Red on green, green on red — these appear identical to people with the most common form of color blindness (deuteranopia), and some scanner algorithms may also struggle

Adding a logo: the safe area

Placing a logo in the center of a QR code works because QR codes use error correction to reconstruct data lost to damage. At error correction level H (which QRGlyph uses), up to 30% of the code's data modules can be obscured and it will still scan. A center logo sits within that "damage budget."

Size limits: Keep the logo at or below 20–25% of the total QR code area (width × height). Going beyond 25% eats into the error correction reserve and risks scan failures, particularly on dense, high-data-volume codes. QRGlyph's Small preset (15%), Medium (20%), and Large (26%) are all within safe bounds for typical content lengths.

Logo design tips for center placement:

• Use a square or near-square logo. Tall or wide rectangular logos force you to use a smaller maximum width to stay within the area budget, which makes them less recognizable.
• Add a white or light-colored background behind the logo. A transparent-background PNG will place the logo's colors directly on top of the QR modules, which can create confusing patterns for scanners at the logo's edges. A solid background creates a clean boundary.
• Use a simplified version of your logo — fine detail at small sizes looks muddy when printed. The icon or mark version of your logo is better than the full lockup with text.
• Test on a printed copy, not just on screen. Screen rendering at small sizes can look fine while the printed version barely resolves the logo's details.

What you must never cover: The three finder patterns in the corners. Unlike data modules, finder patterns are not covered by error correction. Covering even a small portion of one will almost certainly make the code unscannable. A center logo is safe precisely because it avoids the corners — but always leave a generous margin around the finder patterns.

The quiet zone

Every QR code requires a "quiet zone" — a blank border of at least 4 modules wide on all sides. This white space is not decorative; it's structurally required. Scanners use the contrast boundary between the quiet zone and the first module row to detect where the code starts and ends.

Violating the quiet zone by placing other content too close to the edge of the code — a logo, a decorative border, text, or another image — is one of the most common reasons printed QR codes fail. Leave at least 4 module-widths of clear space around the code. When in doubt, more is better.

The "include quiet zone margin" option in QRGlyph embeds this white border directly in the downloaded image, making it easier to place the code in layouts without accidentally violating it.

PNG vs SVG: which to use and when

The PNG download from QRGlyph is 1024×1024 pixels at 96 dpi (the default screen resolution). For digital use — websites, emails, presentations, social media — this is generally sufficient. At print resolutions (300 dpi is standard), 1024 pixels corresponds to roughly 8.7 cm (3.4 inches), which covers most tabletop-distance use cases.

For anything larger, or for any professional print job, use the SVG download. SVG is a vector format — it describes the QR code as mathematical shapes rather than a pixel grid, so it scales to any size with perfect sharpness. A 1 cm business card code and a 1 meter sign can both be produced from the same SVG file with no quality loss.

Additional reasons to use SVG:

• Most professional print shops and sign-makers prefer or require vector files
• SVG files are significantly smaller in file size than high-resolution PNGs
• SVG can be opened and edited in Illustrator, Inkscape, or any vector editor to add additional design elements while preserving the code's integrity
• Laser cutting and vinyl cutting machines work directly with vector files

Testing before committing to print

Always test your QR code before ordering a large print run. Specifically:

• Test on a printed proof at the actual intended size, not just on screen. Screen rendering and print rendering differ, and problems only visible at print size will be invisible on screen.
• Test with multiple devices. The native camera app on a recent iPhone, a mid-range Android from 2–3 years ago, and an older Android if your audience might have one. Older camera modules with lower resolution sensors are less forgiving.
• Test in realistic lighting. If the code will appear in a dimly lit restaurant or on an outdoor sign with potential sun glare, test in similar conditions.
• Test at scanning distance. If the code is meant to be scanned from a poster at 1 meter, test by actually scanning from 1 meter away.
• Test after any finishing treatment. Lamination, varnish, and foil-stamping can all change how light reflects off the surface and affect scan reliability.

If any test fails, the most common fix is to increase the print size. If size can't change, try removing optional data to shorten the encoded content (shorter content = less dense code = easier to scan at small sizes).

Common mistakes summary

• Printing the code too small for the scanning distance
• Insufficient contrast between module color and background
• Placing content too close to the code (violating the quiet zone)
• A logo that's too large (over ~25% of code area)
• Covering a corner finder pattern with a logo or design element
• Using a raster PNG at large print sizes (use SVG instead)
• Not testing on a printed physical copy before a large print run
• Encoding a long dynamic URL when a short redirect would do

Try the QR code generator →