QR Code Best Practices: Size, Color & Placement
Practical rules for designing QR codes that scan reliably every time, contrast, sizing, error correction, and testing.
7 min read
Last updated 2026-07-19
Luis Avila
QR Code Best Practices: Size, Color & Placement explains reliable QR code design and testing from the concepts that matter most to the decisions you make in practice. It focuses on how the technology works, where it fits, the tradeoffs to check, and how to avoid results that look correct but fail in a real workflow.
What will this guide cover?
- Start with the scan environment
- Size and scan distance
- Contrast, quiet zone, and color
- Logos and error correction
- Print example
- Testing before publication
- Common failure modes
Start with the scan environment
Design decisions should reflect where the code will be used. A code on a business card is scanned from a few centimetres away, while one on a poster may be several metres away. Lighting, glare, motion, surface curvature, and camera quality matter more than how attractive the code looks in a design editor.
Size and scan distance
As a practical starting point, make the code about one tenth of the expected scan distance. A code scanned from 50 cm should be roughly 5 cm wide. Dense codes containing long text need to be larger than simple codes containing short URLs because their modules are smaller.
Contrast, quiet zone, and color
Use a high-contrast foreground and background, usually dark on light. Preserve a blank quiet zone at least four modules wide around every edge. Avoid transparent backgrounds over photos, gradients across modules, and color combinations that have similar brightness even when their hues look different.
Logos and error correction
A small centered logo can work when the code uses sufficient error correction, but covering modules always reduces the safety margin. Do not cover position markers or place a large badge over the center without testing. Generate and test the exact final artwork rather than assuming a logo-safe template will work for every payload.
Print example
For a table menu, use a short HTTPS URL, generate a code at high resolution, place it on a matte surface, and include a written URL below it. Print one sample at final size and scan it from seated distance with multiple phones before producing the full batch.
Testing before publication
Test on Android and iOS, in bright and dim light, and from the expected angle. Check the exported file, the proof, and the final printed item because resizing or compression may alter edges. Re-test after any design change, even when the encoded value stays the same.
Common failure modes
Codes often fail because they are too small, cropped too tightly, printed with weak contrast, placed on reflective material, or linked to a page that is slow or not mobile-friendly. A successful scan is only the first step, the destination must also load quickly and explain what the user should do next.
Frequently Asked Questions
Dark modules on a plain light background provide the most reliable scanning. Avoid gradients, transparent backgrounds over busy images, and color pairs with similar brightness.
It is the blank border surrounding the code. Scanners use it to separate the code from nearby text and graphics. Keep at least four modules of uninterrupted space on every side.
As little as practical. Shorter content produces a less dense pattern that is easier to scan at smaller sizes and more tolerant of printing defects.
A short URL can improve scannability, but public shorteners introduce another dependency and may look suspicious. A short path on a domain you control is usually better for long-lived materials.
Test the exact exported or printed version, not only the preview. Use multiple Android and iOS devices, different camera distances, ordinary lighting, and the real surface or material.
Yes, but curvature and reflections can distort the module grid. Increase the physical size, use a matte finish when possible, and place the code on the flattest available area.
Provide a readable short URL, clear instructions, and another way to complete the action. A QR code should not be the only route to essential information or services.
Related Guides
QR Codes
What Is a QR Code? A Complete Beginner's Guide
What a QR code is, how it stores data, and how it differs from a regular barcode, explained in plain English.
6 min read QR CodesStatic vs Dynamic QR Codes: What's the Difference?
Static and dynamic QR codes look identical but behave very differently. Here's how to choose the right one.
5 min read