QR code design: contrast, quiet zone and logos

A QR code is a machine-readable pattern first and a design element second — every choice you make about colour, contrast, logos and framing either helps a camera find and decode the pattern or gets in its way.

Contrast comes first

A QR scanner works by distinguishing dark modules from light background across the whole code, including the finder patterns in three corners. The standard, safest configuration is dark modules on a light background. Many phone camera apps and dedicated scanner apps assume this polarity by default and struggle or fail outright with an inverted, light-on-dark code, because their thresholding logic expects dark-on-light.

As a practical target, aim for a contrast ratio of at least 4.5:1 between the foreground and background colours — the same ratio the Web Content Accessibility Guidelines use for text, and a reasonable proxy for what a camera sensor needs in mixed lighting. Higher is better; pure black on pure white is the reference case and works everywhere.

Never place a code directly over a photograph or a gradient without a solid, uniform plate behind it. Photos introduce local contrast variation that confuses the scanner's edge detection even if the average brightness looks fine to the eye.

The quiet zone is not optional whitespace

The ISO/IEC 18004 standard specifies a quiet zone of at least four modules of empty space around the entire code. Scanners use that border to detect where the code starts and stops; without it, adjacent text, borders or busy backgrounds can be misread as part of the pattern.

This margin gets eaten more often than designers expect: bleed settings that crop a design at the trim line, folds on a brochure that land across the code, die-cut edges on packaging, or simply placing the code too close to the edge of a label. Always check the quiet zone against the final trimmed, folded or die-cut artwork, not the flat digital file.

• Leave at least 4 modules of plain background on all four sides
• Check the margin after bleed, trim and fold, not before
• Keep the code away from perforations, die-cuts and spine folds
• Avoid placing text or logos inside the quiet zone, even small ones

Finder, alignment and timing patterns: hands off

Three large square patterns in the top-left, top-right and bottom-left corners let the scanner find the code and determine its orientation. Smaller alignment patterns (present in larger QR versions) correct for perspective distortion, and a pair of alternating timing patterns between the finder squares let the scanner count modules accurately across the grid.

These structural elements can be restyled cosmetically — rounded corners on the finder squares, a custom eye shape — but their position, size and dark/light sequence must stay intact. Redesigning them beyond safe cosmetic limits, or covering any part of them with a logo, routinely breaks scanning even when the rest of the code looks fine.

Adding a logo without breaking the code

QR codes tolerate a logo in the centre because Reed-Solomon error correction can reconstruct data even when part of the pattern is obscured. Centre placement is the only safe location — it stays clear of the three corner finder patterns.

Keep the logo conservative: as a rule of thumb, stay under roughly 10% of the total code area, and pair any logo with a higher error correction level (Q or H) so there is enough redundancy to survive the obstruction. A larger logo on a low error correction level is the most common reason a branded code fails to scan.

Rounded modules and custom eyes

Rounding the corners of individual data modules or swapping the finder pattern's square eyes for circles is generally safe because scanners tolerate moderate shape deviation as long as the dark/light pattern and relative proportions stay recognisable. What breaks decoding is disconnecting modules that should read as one continuous block, adding decorative gaps between modules, or shrinking the finder pattern's dark core so much that it no longer registers as a solid square-like region.

Gradient fills across the data modules themselves are riskier than a solid colour, because they reduce local contrast between adjacent modules. If you use a gradient, keep it subtle and re-test at the darkest and lightest points of the gradient separately.

Colour choices that hold up in print

Low-contrast pastel combinations — light grey on white, pale blue on pale yellow — are a common source of scan failures because they fall below any workable contrast ratio even though they look fine on a calibrated screen. Red-on-black is another combination worth avoiding: some camera sensors and older scanner hardware read red channels poorly under certain lighting, reducing effective contrast even though the colours look distinct to a human eye.

Screen colours (RGB) and print colours (CMYK) do not match one-to-one, and conversion can shift a colour's actual luminance enough to erode contrast that looked safe on screen. When a job uses spot colours (e.g. Pantone), check the printed proof, not the digital swatch, before finalising the file.

The frame and call-to-action label

A QR code with no label asks people to guess what scanning it will do, and many will not bother. A short, imperative caption next to the code — 'Scan for the menu', 'Scan to join WiFi', 'Scan for directions' — tells the viewer exactly what they get, which is why an unlabelled code is effectively a wasted opportunity even when it scans flawlessly.

Keep the label short, place it directly beside or below the code, and match its urgency to the context: transactional language for a menu or coupon, informational language for a WiFi or contact code.

Accessibility: never rely on the code alone

Always print a human-readable fallback next to the code — the full URL or, more practically, a short link — so anyone who cannot or does not want to scan can still reach the destination by typing it in. On the web, give the code image proper alt text describing what scanning it does, not a generic 'QR code' label.

• Print the short link or destination name below or beside the code
• Use descriptive alt text on web-embedded QR images
• Keep the printed size proportional to expected scan distance

Test before you commit to print

A QR code that scans on your own phone under office lighting from 20 centimetres away tells you very little about how it will perform in the field. Test the actual final artwork, not a screen preview, and test it the way real users will encounter it.

1. Test on at least two different phones with different camera quality
2. Test in worst-case lighting: harsh sunlight glare and dim indoor light
3. Test at the real expected scan distance, not close up
4. Test a printed proof on the actual substrate, not a screen or a home inkjet draft