And how to avoid making your users squint, fumble, or give up entirely.
QR codes have become ubiquitous — embedded in restaurant menus, printed on packaging, projected onto conference stages, and yes, slapped onto websites with varying degrees of success. What started as a Japanese automotive industry tracking tool has become a universal bridge between the physical and digital worlds. Yet despite their simplicity, the way we integrate QR codes into web design is riddled with avoidable mistakes that undermine their entire purpose.
Here’s a thorough look at where designers and developers go wrong — and how to get it right.
1. Making Them Too Small
This is the most common and most damaging mistake. A QR code that cannot be reliably scanned is not a design element — it’s decorative noise.
The minimum scannable size depends on viewing distance. A general rule: the code should be at least 1 cm × 1 cm per meter of expected scanning distance. On a web page viewed on a desktop monitor, a user might be 50–80 cm away, scanning from their phone. That means your QR code needs to be large enough that their phone camera can resolve the individual modules clearly.
Practical guideline for web use:
| Context | Minimum Size |
|---|---|
| Desktop screen (user scans with phone) | 150 × 150 px |
| Mobile screen (user scans with same device — rare but possible) | 100 × 100 px |
| Print or large display | 3 cm × 3 cm minimum |
If you’ve ever watched someone pinch-zoom into a QR code on a webpage to scan it, the code was too small.
2. Insufficient Contrast and Color Inversion
QR codes are binary — dark modules on a light background. When you start inverting this relationship (light modules on dark backgrounds, or worse, dark-on-dark or light-on-light), scanning reliability plummets.
The rule is simple: maintain a minimum contrast ratio of 4:1 between the foreground and background of the QR code itself. Black on white is the gold standard for a reason — every scanner expects it.
Common contrast mistakes include:
- Placing a dark QR code on a dark hero image without a container
- Using brand colors that lack sufficient contrast (e.g., navy blue on medium gray)
- Applying semi-transparent overlays that wash out the code
If your brand palette demands unconventional colors, place the QR code inside a white container with generous padding. The container can live within your design system; the code itself should stay legible.
3. Over-Customizing the Code
QR codes have built-in error correction, which means you can swap some pixels for a logo or round the modules slightly. But there is a threshold, and designers regularly cross it.
The four error correction levels are:
| Level | Recovery Capacity |
|---|---|
| L (Low) | ~7% |
| M (Medium) | ~15% |
| Q (Quartile) | ~25% |
| H (High) | ~30% |
If you plan to embed a logo or significantly modify the appearance, you must use level H and keep the logo within the center 30% of the code. Even then, test relentlessly. A beautiful, branded QR code that fails to scan is a failed design.
Common over-customization errors:
- Replacing too many modules with logos or icons
- Using non-square module shapes that confuse scanners
- Applying gradients across the code
- Embedding the QR code within an abstract illustration
When in doubt, choose function over flair. The code is a utility, not a poster.
4. Ignoring Mobile Context and Ergonomics
A website that places a QR code in its footer, below the fold, or in a corner is asking users to make an awkward physical gesture — holding their phone up to their laptop screen, scrolling first, angling awkwardly.
Where QR codes make sense on a webpage:
- As a prominent element above the fold, when the intent is cross-device transition (e.g., "Scan to continue on mobile")
- In a modal or overlay triggered by a clear CTA
- Adjacent to content that has a logical mobile companion (a download, a map, a saved session)
Where they do not make sense:
- Buried at the bottom of a long page
- Mixed in with footer links where they compete for attention
- On a page that is already optimized for mobile (why would a user scan from their phone to open… their phone?)
Context matters more than placement guidelines. Ask: What action does scanning this code enable, and is scanning the most natural way to trigger it on this device?
5. No Fallback for Non-Scanner Users
Not everyone has a QR scanner handy. Some users have older phones. Some are browsing from a tablet with no easy camera access. Some simply prefer to tap.
Every QR code on a webpage should be accompanied by:
- The destination URL displayed as plain text (or a short link)
- A clickable hyperlink
- A brief explanation of what scanning will do
This is both a usability and an accessibility consideration. Screen readers cannot interpret QR codes. A visually impaired user needs a text alternative — and so does anyone whose scanner isn’t cooperating.
[QR Code]
Scan to open the mobile version of this page
Or visit: example.com/mobile6. Not Testing Across Devices and Conditions
A QR code that scans perfectly on your iPhone 15 Pro in a well-lit office may fail on a budget Android phone in a dimly lit restaurant.
Test your QR codes with:
- Multiple phone models (iPhone and Android, current and older)
- Varying lighting conditions (bright, dim, harsh shadows)
- Different scanning apps (native camera apps vary in capability)
- At the actual display size and resolution your users will encounter
If the code appears on a website, scan it from a monitor, not from a file preview. Display scaling, anti-aliasing, and image compression all introduce subtle artifacts that can break scanning.
This is not a theoretical concern. I have seen QR codes that passed internal review but failed in production because the CDN applied lossy compression that softened the module edges.
7. Encoding Too Much Data
A QR code’s density increases with the amount of data it encodes. A URL with 20 characters produces a clean, sparse code. A URL with tracking parameters, UTM tags, and a long path string produces a dense, complex code that is harder to scan — especially at smaller sizes.
Solution: Use a short URL or URL shortener for the encoded data. Keep the visual QR code clean and sparse, and let the redirect handle the complexity server-side.
Rough data-to-complexity relationship:
| Data Length | Code Complexity |
|---|---|
| Under 50 characters | Clean, easily scannable |
| 50–100 characters | Moderate density |
| 100–200 characters | Dense; larger display size needed |
| Over 200 characters | Consider a shortener |
8. Assuming One QR Code Fits All Contexts
A QR code printed on a billboard, displayed on a monitor, embedded in an email, and projected on a conference screen are four different design problems with four different solutions.
For web specifically, remember:
- Your users are already holding a device with a camera and a browser
- They may be on mobile (scanning a screen they’re already looking at is pointless)
- The screen has lighting that may produce glare on their phone camera
- The resolution and anti-aliasing of the display affect module clarity
Design for the medium. A QR code in an email signature should be small but high-contrast. A QR code on a conference presentation slide should be enormous and static — never animated or transitioning, as it needs to remain scannable for an extended period.
9. Treating QR Codes as a Design Requirement Rather Than a User Need
This is the meta-mistake behind most of the above. QR codes are a means of transportation — they move a user from one context to another. If that transition does not serve the user, the code is friction, not a feature.
Before placing a QR code on your webpage, ask:
- What does the user gain by scanning this? If the answer is "access to the same content they’re already viewing," remove it.
- Is scanning easier than clicking? On a desktop-to-mobile transition, often yes. On a mobile-to-mobile action, almost never.
- Does the code have a clear call to action? A bare QR code with no label invites confusion. A QR code labeled "Scan to download your ticket" invites action.
The Bottom Line
QR codes are among the simplest technologies we deploy in web design, and that simplicity is deceptive. The mistakes are not technical failures of the QR format itself — they are failures of empathy, testing, and context. We forget that a human being has to point a camera at this thing, that lighting varies, that not everyone has the latest phone, and that a beautiful code that doesn’t scan serves no one.
Design the QR code for the person scanning it, not for the layout it sits in. Make it large enough, contrast it sharply, keep the data lean, test it obsessively, and always — always — provide a text alternative.
If you follow those principles, your QR codes will be among the few that actually work.
Free Password GeneratorAll-in-One Calculator
Compress Your Images for Free
Create your public booking link, manage availability, staff, and appointments.
Stay connected everywhere with the right eSIM at the right price.