QR code generator: QR codes for text, URL, vCard and Wi-Fi
QR code generator with capacity chips. Bytes, version, EC level and WCAG contrast in one view. Four modes (text, URL, vCard, Wi-Fi). Local, no account.
Stick a QR code on the menu and suddenly nobody types the Wi-Fi password by hand. The generator below builds the code locally in your browser - your content never leaves the page. Four modes are built in: plain text, a link (URL, email, or phone), a contact card (vCard) and Wi-Fi credentials. The payload is encoded as UTF-8 in byte mode. Three explainer views sit under the code: anatomy breaks the code into its six building blocks, the damage test shows live how much wear it can take, and read order animates the scan path from the bottom-right up to the top-left.
Anatomy of your QR code
Click any region in the code, or any card below - matching pixels light up.
https://toolflux.app
Anatomy of your QR code
A QR code looks like a random pixel cloud, but it's six clearly separated regions. Tap any one of them in the annotated code and it lights up - and so does the matching paragraph here.
- Corner markers (finder patterns). The three thick squares in the corners. They tell the scanner: here is a code, this side is up. Without them nothing happens.
- Alignment dots (alignment patterns). Smaller squares deeper inside the code. They keep it readable when the camera looks at the paper from an angle. Tiny codes (version 1) have none; from version 2 onwards a few appear.
- Timing line (timing pattern). The alternating black-white line between the corner markers. It tells the scanner how big one module is - a ruler hidden inside the code.
- Format band (format information). The modules right next to the corner markers. They encode the EC level and the mask pattern, otherwise the scanner wouldn't know how to decode the rest.
- Content + backup (data + error correction). Your actual data plus error-correction data. If part of the code gets dirty or creased, the scanner can rebuild missing pieces from that. How much correction is possible depends on the chosen level.
- Quiet zone. The white border around everything. Without that gap the scanner can't find the code - never paste it edge-to-edge against dark paper.
Error correction: how much damage should the code absorb?
QR codes are deliberately redundant. Some modules do not carry your payload directly but error-correction data. The scanner can often use that to recover from damage. The L, M, Q and H percentages are rough correction figures - not a free area you can safely cover with a logo or sticker.
| Preset | Error correction | Good for |
|---|---|---|
| Screen | 7 % | Web, apps, short online links - low risk, lots of room for data |
| Standard | 15 % | Solid default, the one to start with |
| 25 % | Flyers, posters, labels - tolerates reflections and creases | |
| Outdoor / logo | 30 % | Stickers, signage, or when you want extra damage tolerance |
The choice translates straight into capacity. In this generator, which encodes payloads as UTF-8 in byte mode, the practical ceiling at version 40 is roughly 2.95 KB on "Screen" and 1.27 KB on "Outdoor / logo". The capacity chip in the explainer view shows the ratio live - you see immediately whether switching from Outdoor to Standard buys you room.
Damage test: how much wear does the code really take?
The percentages in the table above are spec values from ISO/IEC 18004 - theory. The second tab in the explainer view turns it into a hands-on test: drag the slider and the generator destroys randomly chosen data pixels, then runs the damaged code through a QR decoder in your browser (jsQR). Green badge: still scans. Red: gone.
Empirical breaking points from the live decoder:
| Stability | Breaks at | Spec percent |
|---|---|---|
| Screen | ~1.5 % | 7 % |
| Standard | ~2.5 % | 15 % |
| ~4 % | 25 % | |
| Outdoor / logo | ~6 % | 30 % |
That's well below the headline numbers. The reason sits in the granularity: Reed-Solomon works on codeword level (8-bit blocks), not pixel level. A single destroyed pixel typically wipes out a whole codeword - and that costs one full unit of correction budget. The percentages count codewords, not damage area.
Practical use: if you plan to drop a logo in the centre or partially cover the code, test it here before printing. If the slider goes red in the single-digit-percent range at your chosen level, switch one level higher.
When does the capacity warning fire?
When your payload does not fit the largest possible QR version (Version 40) at your chosen level, the yellow warning card pops up. Two quick fixes:
- Lower the level. Switching to "Screen" buys noticeably more room. The jump is biggest from H down to L.
- Shorten the URL. Long links with tracking parameters are usually the real culprit - the URL encoder shows what those parameters actually cost.
Most common triggers: long Wi-Fi passphrases, vCards with a full address, or URLs full of UTM codes.
Which colours work?
Dark foreground on a light background. Rule of thumb: ratio at least 4.5:1 (WCAG-AA threshold). Black on white returns 21:1 - the maximum. The Toolflux brand blue on light beige runs around 7.5:1 - solid. Inverted codes can work, but they are worth testing in the real scan setup. Mid-grey on mid-grey fails the moment the light dims.
The contrast chip in the anatomy view shows the live ratio and turns red when you drop below the threshold. Print tip: avoid gradients on the foreground colour - most scanners clip mid-tones to pure black or white anyway.
Which module shape?
Three variants on offer: classic squares, rounded squares, or dots. Visual difference only - same content underneath. The three corner markers stay square (with slightly rounded edges in "dots" mode) so scanners still find the code reliably. For logos on business cards and posters, "rounded" has settled in as the sweet spot between modern look and scanner reliability.
Read order: how a scanner actually walks your code
The third tab animates the scan path as a comet sweeping across the code. A scanner does not read modules row-by-row like text - it follows a zigzag from the bottom-right up to the top-left, in pairs of two columns at a time. Reserved areas (corner markers, alignment dots, timing line, format band, version info on larger codes) are skipped, and column 6 is jumped over because of the timing line. The path itself is straight out of ISO/IEC 18004 §7.7.3.
Eight contiguous modules along that path make one codeword. The colour coding splits data codewords (your content plus mode and length headers) from EC codewords (the Reed-Solomon backup). For longer payloads the spec splits codewords across multiple blocks and interleaves them - hover any byte and you see the scattered places it lives. No tidy "data here, backup there".
That interleaving is the trick behind error correction. A patch of damage spreads across multiple blocks instead of wiping out a single block completely. Without that scatter, the damage test above would look much worse.
Frequently Asked Questions
How do I create a QR code for free?
Pick a mode above (text, URL, vCard, Wi-Fi), type the content and the QR code appears instantly. Download as SVG when you print, or as PNG for screens. The generator runs fully in your browser - no server, no account, no watermarks.
Which error-correction level do I need?
L (about 7 % recovery) is fine for screens, M (about 15 %) is the solid default, Q (about 25 %) and H (about 30 %) make sense for print and outdoor. Higher levels tolerate more damage, but less data fits.
How much data fits in a QR code?
This generator encodes payloads as UTF-8 in byte mode. At version 40, the practical ceiling is roughly 2.95 KB at level L and 1.27 KB at H. A short URL takes 20-40 bytes, and a vCard with name, phone and email runs 80-150 bytes. If your content overflows, the capacity warning fires.
How does a vCard QR code work?
The vCard mode assembles a text payload in RFC-2426 format (BEGIN:VCARD ... END:VCARD) that many current camera apps offer as a contact. Fields: name, organisation, phone, email, website. Special characters are backslash-escaped.
How do I share Wi-Fi credentials as a QR code?
Pick Wi-Fi mode, fill in SSID, password and security. The code follows the WIFI:T:WPA;S:<ssid>;P:<password>;H:false;; scheme. Many current iPhones and Android devices offer to join the network straight from the camera app, but support still varies by device and app.
Which colours are readable for QR codes?
Dark foreground on a light background, contrast ratio at least 4.5:1 (WCAG AA). The tool above shows the ratio live and warns when you drop below. Inverted codes are worth testing in the target medium.
What is a QR code version?
A QR code version (1-40) sets the module count: version 1 is 21x21 modules, version 40 is 177x177. More data = higher version. The generator auto-selects the smallest version that fits your payload in this generator.
How much damage does a QR code really survive?
The spec promises 7 / 15 / 25 / 30 % recovery per stability level. In practice the code breaks earlier: Screen drops out around ~1.5 % destroyed data pixels, Standard around ~2.5 %, Print around ~4 %, Outdoor / logo around ~6 %. The damage-test tab under the code runs that live with the jsQR decoder. Why the lower numbers? Reed-Solomon works on codeword level (8 bits), and a single destroyed pixel typically wipes out a whole codeword.