QR Code Colours, Contrast and Logos: Designing Codes That Scan

A branded QR code looks better on packaging and posters than plain black and white, and phones cope with far more styling than people expect. They do have limits, though, and most unreadable “designer” codes break the same few rules.

Contrast comes first

Scanners convert the image to light and dark and look for the pattern. What matters is the difference in brightness between the modules and the background, not the colours themselves. A dark navy on cream is fine; a mid-grey on a light grey often isn't, even though it looks clear on a bright screen.

• Use a dark foreground on a light background. Aim for a contrast ratio of at least 4:1; the higher the better.
• Check brightness, not hue: red and green of similar brightness can look distinct to you but nearly identical to a camera.
• Test printed colours, not just the screen. Inks, especially on uncoated paper, often print lighter and duller than they look in a design app.

The QR Code Generator warns when contrast is low as you pick colours, and the QR Validator measures the contrast in an uploaded image.

Light codes on dark backgrounds

An inverted code, with light modules on a dark background, is allowed by the QR code standard, but many scanners still don't read it, and others read it slowly. If a dark design needs a code, put a normal dark-on-light code inside a light panel instead.

Gradients and transparent backgrounds

• Gradients work if every part of the gradient is dark enough against the background. Check the lightest end, not the average.
• A transparent background makes the code take on whatever it's placed on. That's fine on plain light paper, but risky on photos, patterns or dark packaging.
• Keep the quiet zone (4 modules) clear and light, even when the code sits on a coloured design.

Rounded dots and custom corners

Rounded or dotted modules scan well because scanners sample the centre of each module. Custom corner shapes are also fine as long as the three finder patterns still look like a square within a square with a gap between them. Those are what scanners search for first.

Adding a logo

A logo in the middle of a QR code covers modules that carry data. The code still scans because error correction rebuilds the missing data, and that's all the logo is doing: using up robustness that would otherwise protect against glare, dirt and blur.

• Set error correction to H (the generator does this automatically when you add a logo).
• Keep the logo to roughly a fifth of the code's width. In our tests, a logo 22% wide left about half the error correction unused, which is a comfortable margin.
• Clear the modules behind the logo and give it a small light border rather than overlaying it on the pattern.
• Never place a logo over a finder pattern in the corners.

QR code error correction explained covers why the “30%” figure for level H doesn't mean a logo can cover 30% of the code.

Design checklist

After designing, upload the final image to the QR Validator. It reports contrast, quiet zone, module size and how much error correction the design is using. Then scan a printed proof, because the file can't show glare or ink spread.