QR code colours, logos and contrast: how far can you go?

5 minute read · updated 2026-11-10

A QR code doesn't have to be black and white. It can match your brand, carry your logo and sit inside a frame that tells people what it is for. But every design choice takes something away from the scanner. This guide covers how much you can change before a code stops working, and why.

How a phone reads a code

The camera takes a picture, turns it into shades of grey and decides for each tiny square whether it is dark or light. To do that it needs a clear difference between the two. It also looks for the three large squares in the corners, called finder patterns, to work out where the code is and which way up it sits.

Almost every design rule follows from those two facts. Keep the difference between dark and light big, and keep the corner squares easy to find.

Contrast is what matters, not colour

The phone is effectively looking at brightness. A navy code on a cream background works well, because navy is much darker than cream. A red code on an orange background often fails, even though the colours look very different to us, because they are nearly the same brightness once the colour is removed.

A practical test: convert your design to greyscale in any image editor, or take a black-and-white photo of the print. If the code still looks clearly dark on light, it will scan. If it turns into two similar greys, change one of the colours.

Good pairs: dark navy, forest green, deep purple, charcoal or dark brown on white, cream or pale pastel.
Risky pairs: mid-blue on mid-green, red on orange, grey on grey, any colour on a busy photo.
Avoid: light yellow, pale pink or light grey as the code colour. They are close to white for the camera.

Gradients are fine as long as the lightest part of the code is still clearly darker than the darkest part of the background.

Keep the code darker than the background

Codes are designed to be dark on light. Many phone cameras can read inverted codes (light code on a dark background), but not all, and older scanner apps and shop scanners often can't. If your brand lives on a dark background, put the code on a light panel or inside a light frame rather than inverting it.

Logos and error correction

A logo in the middle covers some of the code. It still works because QR codes include spare information, called error correction, which lets a phone rebuild missing or damaged parts. There are four levels:

L can recover about 7% of the code.
M about 15%.
Q about 25%.
H about 30%.

With a logo, use the highest level and keep the logo well under that limit. A logo that covers around a fifth of the code's area is a sensible ceiling. That still leaves room for scratches, glare and dirt, which use up the same spare capacity.

Two more logo tips. Give the logo a plain background or a small border so it doesn't blend into the squares around it. And keep it in the centre: never cover the three corner squares, and avoid the smaller square near the bottom right on larger codes, which helps the phone correct for angle.

Higher error correction makes the code denser, with more, smaller squares. A long web address plus level H plus a logo can produce a code that is hard to read when printed small. If that happens, shorten the link or print the code larger.

Shapes and styles

Rounded dots, soft corners and custom corner squares are fine in moderation. Phones cope well with dots instead of squares, provided the dots are large enough to nearly touch. Very small, widely spaced dots can make the code read as noise.

Be more careful with the corner squares. They can be rounded or coloured differently, but they need to stay solid, clearly shaped and darker than the background. A corner square turned into a heart or a star looks charming and breaks scanning on a surprising number of phones.

Leave the quiet zone alone

Every QR code needs an empty margin around it, called the quiet zone. The standard asks for four squares' width on every side. Designers often crop it to make the code sit tight against a border or a block of text. That is one of the most common reasons a well-designed code scans slowly or not at all.

Frames and labels are fine outside the margin. "Scan for the menu" underneath the code helps people, as long as there is clear space between the words and the code.

Printing changes colours

A colour that looks dark on a bright screen can print lighter, especially on uncoated or recycled paper, where ink spreads and fades. Printers using CMYK may also shift a brand colour slightly. If your contrast was borderline on screen, it will be worse on paper.

Use a vector file (SVG or PDF) for print so edges stay sharp at any size. Print a test on the real stock, look at it in the light it will be scanned in, and scan it with two different phones before you order the full run.

A quick checklist

Code darker than background, with a clear difference in greyscale.
No photos, patterns or textures behind the code.
Logo in the centre, with high error correction, covering no more than about a fifth of the code.
Corner squares solid and recognisable.
Quiet zone of at least four squares on every side.
Tested on the real material with an iPhone and an Android phone.

Codeshed checks each QR code as you design it, decoding the image and showing green only when it reads back exactly. Treat that as the first test, not the last: the printed version is the one that has to work.