QR Code Design Guide: Size, Colors, Logos, and Print Rules

A QR code that doesn't scan is worse than no QR code at all. You've wasted print budget, confused your audience, and lost whatever action you were hoping they'd take. The good news: QR codes are surprisingly forgiving. The bad news: designers break them in the same five or six ways, over and over.

This guide covers the technical rules that matter. Error correction, logo placement, color contrast, quiet zones, sizing for distance, print resolution, and accessibility. Follow these and your codes will scan reliably on every phone, in every lighting condition, at every distance you've planned for.

1. Error Correction and What It Means for Design

QR codes have built-in redundancy. The ISO/IEC 18004 specification defines four error correction levels, and each one determines how much of the code can be damaged (or covered) before scanning breaks.

• Level L (7%) recovers from 7% data loss. Smallest code size. Best for digital screens where damage isn't a concern.
• Level M (15%) is the default in most generators. Good general-purpose choice.
• Level Q (25%) handles moderate damage. Useful for codes printed on packaging that might get scuffed.
• Level H (30%) lets you cover or lose up to 30% of the code area. This is what you need if you're putting a logo on the code.

Here's the trade-off that catches people off guard. Higher error correction means more data modules (using Reed-Solomon error correction), which means the code gets denser (more tiny squares). A Version 10 code at Level H holds 174 bytes. The same Version 10 at Level L holds 424 bytes. That's 2.5x the capacity. So if you're encoding a long URL and using Level H for a logo, you might be forced into a larger version code, which can make the individual modules too small to scan.

2. Logo Placement: Where, How Big, and Why Center

Adding a brand logo to a QR code is extremely common. When done right, it works perfectly. When done wrong, you've printed thousands of unscannable stickers.

Always use center placement

The center of a QR code is the safest area to cover. The three finder patterns (the big squares in three corners) are at the edges. The timing patterns run between them. The alignment patterns sit in predictable positions. The center area has the highest density of regular data modules and the least structural information. That's where your logo goes.

Size limits for logos

The safe recommendation is 10 to 15% of the total QR code area. You'll see people say "up to 30% with Level H correction," and that's technically true. But 30% is the absolute maximum before the code fails, not a comfortable working target. Error correction doesn't just compensate for your logo. It also needs to handle any printing defects, dirt, lighting issues, or camera angle distortion at scan time.

• Safe: 10 to 15% of the total area. Reliable even with moderate print quality issues.
• Risky: 15 to 25%. Usually works on a clean digital screen. More likely to fail on a sun-bleached poster or a creased brochure.
• Dangerous: 25 to 30%. You're using nearly all your error correction budget on the logo alone. Any additional damage and the code is dead.

Always set error correction to Level H when adding a logo. No exceptions. If your generator doesn't let you choose the error correction level, switch to one that does.

3. Color Rules That Keep Codes Scannable

The default black-on-white QR code scans perfectly in almost any condition. The moment you introduce brand colors, you need to follow a few hard rules.

Dark foreground, light background. Always.

QR code scanners expect dark modules on a light background. Many phone cameras and older scanning apps will completely fail on inverted codes (light modules on a dark background). Some newer scanners handle it. Many don't. Don't gamble your entire campaign on scanner compatibility.

Minimum 4:1 contrast ratio

This matches WCAG 2.1 AA standards for large text and works reliably in most lighting. To test contrast, use any free contrast checker online. Enter your foreground and background colors and verify you hit at least 4:1.

Colors to avoid

• Red and green combinations. About 8% of men have red-green color blindness. Beyond accessibility, these combos often have poor contrast under fluorescent lighting.
• Yellow on white. Practically invisible to most cameras in bright conditions.
• Pastel foreground colors. They look faded in photos and rarely hit the 4:1 ratio.

Gradients

You can use gradient colors on QR code modules, but only if the contrast ratio stays above 4:1 at every point in the gradient. That means the lightest part of your foreground gradient still needs to be dark enough against the background. Test the weakest point of the gradient, not just the darkest part.

Finder patterns: keep them dark

Even if you're coloring the rest of the code, keep the three finder patterns black or very close to black. These are the first thing the scanner looks for. Making them a light or unusual color is the single fastest way to break scanning.

4. The Quiet Zone: Small Detail, Big Impact

The quiet zone is the blank margin around the QR code. It tells the scanner where the code ends and the rest of the design begins. Without it, the scanner can't find the code boundaries.

The ISO/IEC 18004 spec requires a 4-module minimum quiet zone around the entire code. For Micro QR codes, it's 2 modules. One "module" equals the width of one small square in the code.

This is the most common cause of scan failure in the real world. Designers push the QR code right up against text, borders, logos, or the edge of a card. The scanner sees those nearby elements as part of the code, misreads the boundaries, and fails.

5. Print Sizing: How Big Does the Code Need to Be?

This depends entirely on how far away the scanner will be. A QR code on a business card needs to work at arm's length. A QR code on a highway billboard needs to work from a car.

The distance rule

Divide the expected scanning distance by 10. That's your minimum QR code size.

Absolute minimums

• Overall code size: Never go below 2 cm x 2 cm (0.8 in) for close-range scanning.
• Individual module size: Each small square must be at least 0.33 mm across. Below that, printers can't reproduce the squares cleanly and cameras can't resolve them.

If you're encoding a long URL that forces a high-version code (lots of tiny modules), the minimum overall size goes up. This is another reason to use short URLs. Fewer characters means fewer modules, which means each module can be bigger at the same overall size.

6. DPI and File Formats for Print

Getting the QR code to the right resolution is just as important as getting the size right. A blurry code might scan on your screen but fail completely in print.

Resolution targets

• Print: 300 DPI minimum. This is standard for commercial printing. Some large-format printers work at 150 DPI, but 300 is the safe floor.
• Screen: 72 to 96 DPI is fine for websites, email, and presentations.

File format matters

Always export as vector (SVG, PDF, or EPS) for print. Vector files are mathematically defined shapes, not pixels. They scale to any size without losing quality. A vector QR code on a business card and a vector QR code on a billboard are the same file, just printed at different scales.

If you must use a raster format (PNG, JPEG), generate the code at the largest size you'll ever need and scale down. Scaling raster images up introduces blur and artifacts that can wreck scanning. Never take a 200px PNG and stretch it to fill a poster.

7. Common Mistakes That Break Scanning

If your QR code isn't scanning, it's almost certainly one of these six problems.

1. Quiet zone too small or missing. The most frequent offender. Other design elements are too close to the code. Add at least 4 modules of blank space on every side.
2. Inverted colors. Light modules on a dark background. Many scanners just won't read this. Flip it: dark modules, light background.
3. Too small for the scanning distance. A 2 cm code won't scan from across a room. Use the distance/10 rule from section 5.
4. Low contrast. The foreground and background colors are too similar. Check for a minimum 4:1 contrast ratio.
5. Finder patterns obscured. A logo, graphic, or design element is overlapping one of the three corner squares. Move it or shrink it.
6. Low-resolution raster image scaled up. A small PNG stretched to fill a large print. The blurred edges confuse scanners. Regenerate at the correct size or use a vector format.

8. Accessibility: QR Codes and Inclusive Design

QR codes are a purely visual medium. They're completely unusable for blind users, most low-vision users, and anyone whose phone camera is broken or missing. If you make a QR code the only way to access information, you've locked out a significant portion of your audience.

WCAG 2.1 compliance

Success Criterion 1.1.1 (Non-text Content) requires that all non-text content has a text alternative. A QR code is non-text content. Here's what that means in practice:

• Always include the URL as readable text near the QR code. Print it directly below or beside the code. This is the single most important accessibility step. Users who can't scan can still type the URL.
• Write meaningful alt text. On the web, the alt attribute on your QR code image should include the destination URL. Example: alt="QR code linking to https://example.com/menu"
• Never make the QR code the only access method. Every QR code on a poster, menu, flyer, or sign should have a text URL or NFC tap alternative next to it.
• Add scanning instructions. Not everyone knows what a QR code is or how to use one. A short line like "Scan this QR code with your phone camera" helps new users and older demographics.

Accessibility isn't just about compliance. It's about making sure every person who encounters your QR code can reach the destination, regardless of their abilities or their device. The cost is minimal: a few lines of text next to the code.

Quick Reference Checklist

Print this out and check it every time you create a QR code for production use:

• Error correction set to H if using a logo, M otherwise
• Logo centered, covering no more than 15% of the area
• Finder patterns, timing patterns, and alignment patterns fully visible
• Dark foreground on light background (not inverted)
• 4:1 minimum contrast ratio between foreground and background
• 4-module quiet zone on all sides
• Size follows the distance/10 rule
• Each module is at least 0.33 mm
• Vector format (SVG, PDF) for print, or PNG at 300+ DPI
• URL printed as readable text next to the code
• Alt text includes the destination URL
• Tested on 3+ phones before sending to print

Sources and Further Reading

• ISO/IEC 18004:2015 — The international standard for QR code symbology, defining error correction levels, module sizes, and quiet zone requirements.
• QR code — Wikipedia — Comprehensive overview of QR code structure, versions, encoding modes, and history.
• Reed-Solomon error correction — Wikipedia — The error correction algorithm used in QR codes.
• W3C WCAG 2.1 — Success Criterion 1.1.1 Non-text Content — The accessibility standard requiring text alternatives for QR codes and other non-text content.
• Color blindness — Wikipedia — Epidemiology data on red-green color vision deficiency relevant to QR code color choices.
• Denso Wave — QR Code Development Story — Background on QR code invention by the original creators.