How to design a custom QR code that still scans

Colors: dark on light, with real contrast

A scanner reads the difference between dark and light modules, so keep the pattern dark and the background light. Deep brand colors like navy, forest green, burgundy or charcoal work well on white or cream. Yellow, light grey, sky blue and pastels usually fail.

A useful test: if that color would be hard to read as small text on that background, it's too light for a code. The generator flags low contrast before you download.

You can give the corner squares a different color from the pattern, which is a nice way to add an accent. Keep that color dark too. A transparent background is fine when whatever ends up behind the code is plain and light.

Inverted codes

Light on dark looks sharp on a black poster, and many newer phones read it. Plenty of older phones and scanner apps don't. The generator warns you when colors are inverted. If you go ahead anyway, test on as many phones as you can find, and accept that some people won't get through.

Dot and corner styles

The pattern can use square, rounded, dot or diamond modules. The corner squares come in square, rounded and circle styles, for both the outer frame and the center. All of them scan well at normal sizes, because the scanner samples the middle of each module rather than its edges.

Dots and diamonds leave more white space between modules, which makes the code read as if it were smaller. On a business card or label, stick with square or rounded. Keep the corner squares solid and dark whatever style you pick, since they're how the phone finds the code.

Adding a logo

A logo covers some of the pattern, and error correction rebuilds what's hidden. Our generator switches to the highest level, H, which recovers about 30% damage, as soon as you add one. You can upload PNG, JPG, SVG or WebP up to 2 MB and adjust the size with a slider.

Keep the logo under about a quarter of the code's width. Use a simple mark instead of a full wordmark, and give it a plain backing so its edges don't blend into the modules. High error correction also makes the code denser, so a code with a logo needs a little more print size. The QR code basics guide explains how error correction works.

What breaks scanning

• Low contrast between pattern and background.
• Inverted colors on older phones.
• Busy backgrounds, like photos or textures, showing through or behind the code.
• A cropped or crowded quiet zone, the clear margin around the edge.
• A logo pushed too large, or one that covers a corner square.
• Stretching the code into a rectangle in a design tool.

Test before it ships

Print the design at final size and scan it with an iPhone and an Android phone, from where people will actually stand. A frame with a short label is worth adding while you're at it. Then open the generator, start with your brand color on white, add your logo and scan it before you change anything else.