QR Codes: How They Work
& Best Practices
QR codes encode far more than URLs — from Wi-Fi credentials to contact cards. Understand the encoding, error correction, and design rules that make codes scannable every time.
How QR Codes Encode Data
A QR code is a two-dimensional matrix barcode — a grid of black and white squares called modules that encodes data both horizontally and vertically. Unlike the one-dimensional barcodes on retail packaging that store a dozen digits in a single row of varying-width bars, QR codes pack information into a square, giving them far higher capacity. The largest QR code version (version 40, 177×177 modules) can hold up to 4,296 alphanumeric characters or 7,089 numeric digits.
Denso Wave, a Toyota subsidiary, invented QR codes in 1994 to track vehicles and components through manufacturing. The name stands for Quick Response — the codes were designed to be decoded at high speed by industrial cameras on a production line. Crucially, Denso Wave chose not to exercise its patent rights on the QR code technology. This decision — releasing it to the public domain — is why QR codes are ubiquitous today. No licensing fees, no royalties, no permission needed. Anyone can implement the standard.
The Anatomy of a QR Code
Every QR code contains several fixed structural elements that a scanner uses to locate and interpret it, surrounding the actual data modules. The three large squares in the corners (and sometimes a fourth, smaller one) are position detection patterns. They tell the scanner where the code is, its orientation, and its size — regardless of rotation or perspective. The alternating black-and-white modules along the edges between them are timing patterns that establish the module grid spacing. The smaller squares scattered through the interior are alignment patterns that help the scanner correct for distortion when the code is printed on a curved surface or viewed at an oblique angle. The area around these structural elements is where your actual data lives, encoded according to the QR code specification.
Error Correction: Why QR Codes Still Work When Damaged
QR codes use Reed-Solomon error correction — the same algorithm that keeps your CDs playable with minor scratches and your satellite TV working through atmospheric interference. The encoder adds redundant data alongside your content. When parts of the code are obscured, smudged, or physically damaged, the decoder uses this redundancy to reconstruct the original information mathematically.
| Level | Recovery | When to Use |
|---|---|---|
| L (Low) | ~7% | Clean digital display, controlled lighting |
| M (Medium) | ~15% | General purpose — most generators default here |
| Q (Quartile) | ~25% | Printed materials, outdoor signage |
| H (High) | ~30% | Logo overlaid, harsh environments, industrial use |
Higher correction levels mean more redundant codewords and a physically denser code with more modules. The code must be larger to maintain the same module size, or the modules must be smaller (harder to scan from a distance). If you're overlaying a logo on your QR code — which obscures some modules — use level H and ensure the logo covers no more than 30% of the code area. If the code will only be displayed on a clean digital screen with controlled lighting, level L or M is sufficient and produces a simpler, easier-to-scan code.
What QR Codes Can Encode
QR codes support multiple data formats, each with a specific encoding scheme that scanners recognize and handle appropriately:
- Website URLs. The most common use case. Simply encode the URL — scanning opens it in the default browser. Always use HTTPS URLs. Some modern scanners flag or warn about HTTP URLs.
- Wi-Fi credentials. Format:
WIFI:S:<SSID>;T:<WPA|WEP|nopass>;P:<password>;;. Scanning connects to the network without typing the password. Print it on a card for your Airbnb, office lobby, or conference room. The SSID and password are stored in plaintext in the QR code, so anyone who can see the code can extract the credentials. - Contact information (vCard/MeCard). Encodes name, phone, email, organization, and address in vCard format. Scanning adds the contact directly to the phone's address book. Widely used on business cards and conference badges.
- Email.
mailto:hello@example.com?subject=Hello&body=...opens the email client with the address, subject, and body pre-filled. - Phone.
tel:+15551234567opens the phone dialer with the number pre-entered. Useful on business cards and service signage. - SMS.
SMSTO:+15551234567:Your message hereopens the messaging app with the recipient and text pre-filled. - Plain text. Any text up to the character limit. Used for coupon codes, serial numbers, event ticket identifiers, and boarding passes.
- Geolocation.
geo:40.7128,-74.0060opens the maps app centered on the specified coordinates.
Design and Scanning Considerations
Quiet zone. Every QR code requires a white border (the quiet zone) of at least four modules wide on all four sides. This border separates the code from its surroundings so the scanner can distinguish code modules from background elements. Many designers trim this border in graphics software, not realizing the code becomes unscannable. If you need a borderless look, make the quiet zone the same color as the background behind the code — the scanner sees contrast between code modules and quiet zone, regardless of what color the quiet zone is.
Size and distance. The ratio is roughly 10:1 — scanning distance divided by 10 equals the minimum code width. A phone scanning from 30 cm away needs a code at least 3 cm wide. A billboard scanned from 3 meters needs a code at least 30 cm. For digital screens, 200×200 pixels or larger scans reliably on modern phones. Don't go below 128×128 pixels.
Color and contrast. The scanner needs adequate contrast between dark and light modules — it's reading luminance differences, not color. Black on white is the safest choice. Dark navy on white works well. Light gray on white fails — the contrast is too low. Dark modules should be at least 50% darker than light modules. If using brand colors, test with a real phone under typical lighting conditions before printing. What looks fine on a calibrated design monitor in a bright office may be unreadable in a dimly lit restaurant.
Generate your own with our QR Code Generator. Customize the size and color, then download as a PNG. Everything runs in your browser.
QR Codes in Marketing and Product Design
QR codes on printed materials bridge physical and digital experiences. A restaurant menu with a QR code linking to an online ordering page. A conference badge with a QR code encoding the attendees contact info. A product package with a QR code linking to setup instructions. The key design decision: does the QR code stand alone or integrate into the visual design? Standalone codes (black on white, prominent, obvious) scan the most reliably. Integrated codes (styled with brand colors, overlaid with logos, embedded in images) look better but require higher error correction levels and more testing.
Always test QR codes in their final context. A code that scans perfectly on your design monitor may fail when printed on a curved coffee cup, displayed on a TV screen at a trade show booth, or viewed through a scratched phone camera lens. Test with multiple phone models (iOS and Android, old and new) under the actual lighting conditions where the code will be scanned. One unreadable QR code at a conference or on a product package undermines the entire purpose of including it.