Design
QR codes on photos and textures
A photo or texture behind a QR code varies in brightness module to module, so contrast must hold at the worst point — the darkest patch of the image behind the code must stay at least 40 luminance points above the modules. The reliable fix is a solid light backing card containing the full quiet zone.
Contrast is local, and photos vary locally
The 40-point contrast rule is easy to reason about against a solid background: one background luminance, one comparison. A photograph replaces that single number with hundreds — sky here, shadow there — and a decoder needs the dark/light decision to hold everywhere in the symbol. Decoders threshold adaptively in local regions, which helps with gradual lighting changes but cannot manufacture contrast that is not there: a module sitting on a shadowed patch of the photo has whatever difference that patch allows.
So the rule generalises to a worst-point rule: with dark modules, find the darkest patch of the image inside the code's footprint (including the quiet zone) and measure your module colour against that. If the darkest patch is a 35%-luminance shadow and your modules are 10%, the code's weakest region has 25 points and the code will fail there — regardless of how crisp it looks over the bright half. The symptom set this produces — scans from some angles, on some phones, at some distances — is catalogued on the busy background diagnosis page.
Fixes, in order of reliability
1. A solid backing card. Place the code on an opaque light panel over the photo: code, plus 4 modules of quiet zone, plus a module or two of margin. This restores a single-number background and is the only fix that is unconditionally safe. It is the same card pattern used on dark designs, and it costs a few percent of the photo's area.
2. Dim or blur the region behind the code. If the design cannot tolerate a card,
push the photo itself toward a valid background. The maths is workable: a white
overlay at opacity p lifts a patch of luminance L to L + p·(100 − L). Even a
pure-black patch (L = 0) under a 60% white overlay becomes 60% luminance — giving
near-black modules a 50-point margin, since 60 − 10 = 50. A 40% overlay lifts black
only to 40%, leaving ~30 points against 10% modules: not enough. So as a working
number, dim with at least 60% white (or blur and dim) across the code plus quiet
zone. Blurring alone rearranges light and dark without removing the dark — blur helps
texture noise, dimming fixes luminance.
3. Reposition. Sometimes the honest fix is moving the code to the sky, a wall, or any naturally light, low-variance region of the image — then verifying the worst point there.
Do not fix it by lightening the photo's modules-side instead — light modules on the photo's dark regions creates the polarity problem on top of the contrast one. And avoid the transparent-background export straight onto a photo; that is this entire page's failure mode in one click.
Verify the composition, not the code
The exported code was fine; the composition is the artefact under test. Screenshot or flatten the final artwork, decode it with the scanner, and confirm with the validator. For print, photograph a proof under ordinary room light — shadows in the photo plus shadows in the room stack against the same margin.
FAQ
Can you put a QR code directly on a photo?
Only when every patch of the photo behind the code is light enough — at least 40 luminance points above the module colour at the darkest point. In practice most photographs fail this somewhere, which is why a solid backing card is the standard solution.
How much do I need to dim a photo behind a QR code?
Enough that the darkest patch clears the 40-point rule. A white overlay at 60% opacity lifts even pure black to 60% luminance, which gives dark modules a comfortable margin — 40% overlays generally are not enough on dark images.
Why does my QR code on an image scan sometimes but not always?
Because contrast fails only in part of the symbol. Whether a scan succeeds then depends on lighting, angle and which decoder is trying — the classic signature of local contrast failure rather than a broken code.
Is blurring the background enough?
Usually not by itself. Blur removes texture detail but preserves average darkness, so a dark region stays dark. Combine blur with dimming, or use a solid card, and decode the final composition to confirm.
Try it — free, no signup
Related
- QR code design best practices — seven rules ranked — The 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 on a busy background — diagnosis and the white-card rule — How 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.
- Transparent background QR codes — the moving floor — A 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.
- QR code contrast — the 40% minimum, measured — A 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.