QR Code Design Best Practices: Make Codes People Actually Scan

Why Design Matters for QR Codes

QR codes are machine-read, not human-read. This means their design requirements are fundamentally different from other graphic elements. What looks visually appealing to a human eye can be completely unreadable to a smartphone camera sensor. The camera needs to identify a very specific set of patterns — finder patterns, timing patterns, and data modules — against a reliably contrasting background.

The good news is that QR codes include built-in error correction (Reed-Solomon algorithm) that allows for a certain degree of creative customization without sacrificing functionality. Understanding where the flexibility exists — and where it doesn't — is the key to designing beautiful, scannable QR codes.

Rule 1: Contrast is Non-Negotiable

The single most important design rule for a scannable QR code is sufficient contrast between the foreground (the dark modules) and the background (the light area). The camera sensor needs a clear, unambiguous distinction between "dark" and "light" pixels to decode the matrix.

The Safe Approach

Black modules on a white background is the gold standard. It offers maximum contrast and will work on literally any scanning device, in any lighting condition. If you need to match a brand color, black-on-white is always a safe starting point.

Using Brand Colors

You can use your brand colors for the QR code foreground, provided you follow these rules:

• The foreground color must be significantly darker than the background. Test the contrast ratio — aim for at least 4:1 (WCAG AA level).
• Never use a light foreground on a dark background without extensive testing on multiple device types.
• Avoid similar hues for foreground and background (e.g., dark blue on navy). The camera sees hue differently than the human eye.
• Colors like yellow, light orange, and light green are risky as foreground colors — they may appear low-contrast to camera sensors even if they look vivid to humans.

Rule 2: Size and the 10:1 Scanning Rule

QR codes have a minimum printable size, below which the individual data modules become too small for camera sensors to resolve. The standard minimum is 2cm × 2cm (approximately 0.8 × 0.8 inches) for close-range scanning (a user holding their phone 15–25cm from the code).

For larger-scale deployments — posters, banners, billboards — use the 10:1 distance rule: divide the maximum expected scanning distance by 10 to get the minimum code size.

Rule 3: The Quiet Zone is Sacred

Every QR code specification requires a "quiet zone" — an unobstructed area of empty white space around all four sides of the code. The ISO/IEC 18004 standard specifies this zone as a minimum of 4 module-widths. A module is the smallest square element in the QR code grid.

Violating the quiet zone is one of the most common causes of scan failure in deployed QR codes. Placing text, images, or decorative borders flush against the edge of a QR code causes scanners to mis-identify the boundaries of the code, leading to failed reads.

When designing a QR code for a badge, label, or card, always ensure the quiet zone is preserved. If you're tight on space, shrink the card — don't shrink the quiet zone.

Rule 4: Error Correction and Logo Embedding

QR codes use Reed-Solomon error correction, which allows the code to remain scannable even if a portion of the data modules is obscured. There are four error correction levels:

• Level L (Low): 7% of the code can be damaged
• Level M (Medium): 15% — the default for most use cases
• Level Q (Quartile): 25% — useful when moderate damage is expected
• Level H (High): 30% — essential when embedding a logo

When you embed a logo in the center of a QR code, you're intentionally damaging up to 30% of the data area. This is why Logo QR codes always require Error Correction Level H. The logo must stay within the recoverable zone — typically no larger than 30% of the total code area. Exceeding this threshold will result in scan failure regardless of the error correction level.

Rule 5: File Format Matters

The file format you export your QR code in has a significant impact on quality. Always export as SVG or PNG:

• SVG (recommended for print): A vector format that scales to any size without any loss of quality. Perfect for any print use case, from a business card to a billboard.
• PNG (recommended for digital use): A lossless raster format. No compression artifacts. Suitable for web display, email, or anywhere a fixed resolution is acceptable.
• Avoid JPEG: JPEG compression introduces artifacts into the pixel data of the QR code, blurring the sharp edges of the modules and causing scan failures.

The Complete Do's and Don'ts