QR code design and customisation

Colours, shapes, logos and frames, and the contrast and coverage limits past which a code stops scanning.

• Adding a logo to a QR code, safelyKeep the logo central, under about 20–25% of the code area, at error-correction level Q or H, on a solid light panel with two or three modules of…
• Choosing QR code colours that scanDecoders threshold on luminance, not hue, so the rule is a luminance difference of at least 40% between modules and background, dark on light. Apply the…
• Accessible QR code designAlt text, a visible URL fallback, reachable mounting height and generous sizing: the practices that keep QR codes usable for everyone.
• Alt text and screen readers for QR codesHow to write alt text for QR code images. State destination and action, never just "QR code", plus aria patterns and the clickable fallback screen readers need.
• Animated QR codesAnimation is safe when every frame decodes to the same payload on its own. What you can animate, what you cannot, and when motion helps or hurts scans.
• Artistic and AI-generated QR codesHow ControlNet-style art QR codes keep module luminance inside an image, why their failure rate is high, and when an art code is the right call.
• Brand colour QR codes that still scanA three-step workflow for putting a brand colour on a QR code: measure the hex against white, darken the shade if it fails, keep the eyes darkest.
• Custom QR code eye shapes: what survives detectionQR eyes can be square, rounded, circle, leaf or diamond. What the 1:1:3:1:1 detection ratio allows, and the risk order of the common variants.
• Designing QR codes for colourblind usersColour vision deficiency does not affect QR scanning: decoders read luminance, not hue. What matters is the colour-coded material around the code.
• Does "scan me" text increase scans: the honest answerNo rigorous public data shows how much CTA labels lift QR scan rates. What the reasoning supports, what vendors claim, and a test you can run yourself.
• Dot-style QR codes: how far circles can goDot modules are circles at 84% of the cell width, about 55% of the ink. Why that works, the density limit where it breaks, and why the eyes stay solid.
• Gradient QR codes that still scanA gradient QR code scans if both gradient stops keep a 40% luminance difference against the background. Linear vs radial, and how to verify it.
• Halftone QR codesHalftone QR codes subdivide each module 3×3 and keep the centre subcell true, so a photo shows in the texture while module centres still decode.
• Inverted QR codes: the card pattern for dark designsWhen a design demands a dark background, put a standard dark-on-light QR code on a light card rather than inverting it. How to size and style the card.
• Logo size limits by error-correction levelHow big a QR code logo can be at levels L, M, Q and H: the tolerance each level buys, the practical coverage budget, and why the ceilings lie.
• Minimum on-screen duration for a QR codeA primed viewer needs 8–12 seconds to unlock, aim, focus and decode. Show codes for at least 15–20 seconds, or keep them persistent in a corner.
• Multiple QR codes on one pageCamera apps latch onto one code at a time. Spacing of at least twice the quiet zone, a label on every code, and when to collapse the lot into one hub.
• Organic and fluid QR styles: controlled mergingOrganic QR styles join neighbouring modules into flowing shapes. Why joining along the grid is safe, where blob styles go wrong, and how to verify.
• Per-corner eye styling: three eyes, three looksQR finder detection checks each corner's ratio, not shape identity, so the three eyes can differ. The rules per corner, and where brand marks break it.
• Put a short URL next to every QR codeWhy every printed QR code should carry a short, readable URL underneath, who it rescues, what it should look like, and how to lay the pair out.
• Putting a QR code on videoSizing and placing a QR code burned into video: the 10:1 rule from couch distance, the percent-of-frame maths, and why the code must not move.
• QR code aspect ratio and paddingQR codes are square, full stop. Padding is the quiet zone (at least 4 modules per side, scaling with the code), and object-fit cover is how CSS breaks it.
• QR code contrast: the 40% minimum, measuredA QR code needs at least a 40% luminance difference between modules and background. How to compute it, and common colour pairs that pass or fail.
• QR code design best practices: seven rules rankedThe seven design rules that decide whether a styled QR code scans, ranked by how often breaking them kills codes, with the number behind each rule.
• QR code favicon and OG image tricksA QR code in a 1200×630 OG image scans at 300 px or more. A QR favicon cannot: 32 px is one pixel per module. The arithmetic, and when the trick is a gimmick.
• QR code frames and CTA labels, done safelyFrames and scan-me labels help when they name the destination and sit outside the quiet zone. Placement rules, sizes, and the label parameter in UseQR.
• QR code grids and sheetsProducing sheets of QR codes that survive the cutter, per-cell quiet zones, gutter maths for label geometry, and bulk generation that scales.
• QR code module shapes compared: square to organicSquare, rounded, dot, diamond, star, bar and organic QR modules compared by ink coverage and scan risk, with the geometry numbers behind each style.
• QR code on a busy background: diagnosis and the white-card ruleHow to tell that a busy background is what is breaking a QR code: the symptom pattern, a two-minute isolation test, and the white-card fix.
• QR code placement in a layoutWhere a QR code belongs on the page: the bottom-right convention, 10 mm clearance from folds and trim, and one code per visual zone.
• QR codes on a dark-mode websiteDark mode silently turns transparent QR codes into light-on-dark, which many scanners refuse. Give every code an explicit light card that ignores the theme.
• QR codes on photos and texturesPhotographic backgrounds destroy the local contrast QR decoding depends on. The worst-point rule, the backing card fix, and the dimming maths.
• Rounded vs square QR modules, when rounding costs youRounded modules keep about 91% of a square's ink and scan just as well, until small print sizes where corner radii shrink below printer resolution.
• Stable Diffusion QR codes: do they scan?Sometimes, and not reliably. Why diffusion-styled QR codes fail on local contrast, how to test one properly, and when the trade-off is worth making.
• Ten QR code design mistakesThe ten QR design mistakes that actually break scans, each with the number it violates and the fix, from inverted colours to never test-scanning.
• The QR code design checklistTwelve design checks in scan-saving order, from payload to printed proof: each with its number and a link to the page that explains it.
• Transparent background QR codes: the moving floorA transparent QR code inherits whatever sits behind it as its background, so contrast must be re-checked per placement. When bg=t helps and when it bites.
• Typography pairing for QR codesMatch the CTA label to the code: an x-height of 1.5–2 modules reads at the distance the code scans. Weights, placement and URL typography.
• Why light-on-dark QR codes failDecoders binarise expecting dark modules on a light background. Inverted support is inconsistent across scanners, so light-on-dark codes fail silently.