Use strong contrast: dark code, light background
Phone cameras find a QR code by the difference between its dark modules and the light space around them. The stronger that difference, the faster and more reliable the scan. Black on white is the safest choice, but any dark color on a light background works well.
Brand colors are fine as long as the code stays clearly darker than its background. Deep blue, dark green or burgundy on white or cream scan reliably. Pale yellow, light grey or pastel codes often fail, especially in dim light.
Avoid inverted codes
A light code on a dark background looks stylish, but some scanner apps and older phones can't read it. If your design is dark, place the code on a light panel instead.
Be careful with gradients and images
A gradient is fine when both ends stay dark. Don't place the code on top of a photo or pattern – busy backgrounds confuse the camera.
Keep the quiet zone clear
The quiet zone is the empty margin around the code. It tells the camera where the code starts and ends. The QR standard calls for a margin of four modules – four of the small squares – on every side.
Designers often crop this margin to save space, or place text and lines right up against the code. Both make scanning slower or impossible. If you add a frame, keep light space between the frame and the code itself.
Choose the right size for the scanning distance
Size depends on how far away people will be when they scan. A common rule of thumb: the code should be at least one tenth of the scanning distance wide. A poster read from two metres needs a code of about 20 cm; a business card read from arm's length can use 2–2.5 cm.
The amount of data matters too. A long URL creates more, smaller modules, so the code needs to be printed larger to stay readable. Short links keep the pattern simple. Our print size calculator works out the size for your distance, and the QR code size guide covers print formats in detail.
- Business cards and labels: at least 2 × 2 cm (0.8 in).
- Table cards and flyers: about 3–4 cm (1.2–1.6 in).
- Posters, windows and signs: scale with the distance, and go larger if people scan while walking.
Error correction and logos
QR codes store extra recovery data, so they still scan when part of the code is dirty, damaged or covered by a logo. Higher levels recover more but make the pattern denser.
| Level | Recovers up to | Good for |
|---|---|---|
| L (low) | about 7% | Screens and clean indoor prints with lots of data |
| M (medium) | about 15% | Most everyday prints |
| Q (quartile) | about 25% | Outdoor use, rough surfaces, small logos |
| H (high) | about 30% | Codes with a logo in the middle |
Adding a logo without breaking the code
A logo makes a code recognisable and can make people more willing to scan. It also covers part of the pattern, which the code has to recover through error correction. That is why a logo should always be paired with a high correction level.
Keep the logo small and centred – as a rough guide, well under a quarter of the code's area. Never cover the three large squares in the corners, which the camera uses to locate the code. Give the logo a light background so its edges don't merge with the modules. Read more about designing a QR code with a logo.
Add a clear call to action next to the code
A code on its own doesn't say why anyone should scan it. A short line next to it does: “Scan to see the menu”, “Scan for the size guide”, “Scan to join our Wi-Fi”. It sets expectations, and people are more willing to scan when they know what they will get.
Keep the call to action short, start it with a verb and describe the benefit, not the technology. A frame with the text built in keeps the message attached to the code, even when the code is resized or moved in a layout.
Place codes where scanning is easy
-
At a comfortable height
Between waist and eye level for signs. Codes near the floor or high on a wall get skipped.
-
On flat surfaces
Strongly curved bottles or cups distort the pattern. Put the code on the flattest part, or print it smaller along the curve.
-
Away from glare
Glossy lamination and glass reflect light. Matte finishes scan better under shop lights and sunshine.
-
Where people pause
Queues, tables, waiting areas and counters work. Codes on fast-moving vehicles or passing billboards rarely get scanned.
-
Where there is signal
The destination still has to load. In basements or underground areas, consider offering Wi-Fi next to the code.
Send people to a mobile-friendly page
Every scan ends on a phone, so the page behind the code has to work on a small screen. A desktop site that needs pinching and zooming wastes the effort it took to get the scan.
Link to the exact page that matches the call to action, not your home page. Keep it fast: large images and pop-ups slow the first impression. If the goal is a form, a download or a booking, put it at the top of the page.
Test on real devices before printing
Testing costs a few minutes. Reprinting costs much more.
-
Use several phones
Scan with at least one iPhone and one Android phone, using the built-in camera app.
-
Test the printed proof
Scan a print at the final size and on the final material, not just the file on your monitor.
-
Try real conditions
Scan from the expected distance, at an angle and in the lighting where the code will hang.
-
Follow the whole journey
Check that the page loads quickly on mobile data and that the link, form or download works.
Use the right file format for print
For print, use a vector format such as SVG or PDF. Vector files stay sharp at any size, so the edges of each module remain crisp on a poster as well as on a label. PNG and JPG are fine for screens, emails and quick office prints.
Never stretch a code in one direction only, and don't scale a small PNG up for a large banner – blurred edges make scanning slower. If a printer or designer places the code for you, send the vector file and ask for a proof.
Track results with UTM parameters
If you want to know what scanners do on your website, add UTM parameters to the destination link. They tell your web analytics tool where the visit came from – for example utm_source=poster, utm_medium=qr and utm_campaign=spring-sale.
Use a different utm_content value for each placement, such as “window” and “counter”, to compare them. Our free UTM builder assembles the link for you. For a full walkthrough, see how to track QR code scans.
Use dynamic codes for anything printed
A static QR code stores the destination itself. If the page moves or the offer ends, the printed code is out of date. A dynamic QR code stores a short link instead, so you can change where it points after printing.
Dynamic codes also produce shorter patterns, because the short link is shorter than most full URLs. That makes them easier to scan at small sizes. And because each scan passes through the short link, you can count scans without any extra setup.
Design a code that fits your brand
Choose colors, module and eye styles, add your logo and a frame with your call to action, then download PNG, SVG, JPG or PDF.