# Transparent background QR codes — the moving floor

> A transparent-background QR code makes whatever ends up behind it the real background, so the 40-point contrast rule must be re-checked against each placement — a dark web theme or dark paper silently inverts the code. Use transparency for clean compositing onto light surfaces, and verify a screenshot of the final context.

Source: https://useqr.app/docs/design/transparent-background-qr-codes · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## Transparency deletes your safety margin

A normal QR export carries its own background — usually white — so its contrast is a
fixed property of the file. Set the background transparent and that property leaves the
file: **the page, poster, slide or paper behind the code becomes the background**, and
the [40-point contrast rule](/docs/design/qr-code-contrast-ratio-minimum) is now
evaluated against something the file no longer controls.

In UseQR this is `bg=t` — try [a transparent code](/url?bg=t) — and it is genuinely
useful: the code composites cleanly onto letterheads, light brand washes and printed
stock without a white box stamped over the design. The four-module quiet zone travels with
the export as empty pixels, so spacing stays correct. What travels with
*you* is the responsibility to check every placement.

## The three traps, with numbers

**Dark surfaces.** Near-black modules on a dark ground is an unreadable pair, and on
websites the trap is dynamic: a transparent PNG that reads perfectly in light mode
sits invisible on `#0f172a` when the user's theme flips — luminance 9% against 9%, a
0-point difference. The fixes are on
[QR codes in a dark-mode website](/docs/design/qr-code-in-a-dark-mode-website); the
short version is to give the code its own light card rather than trusting the page,
the same [card pattern](/docs/design/inverted-qr-codes) used on dark print designs.

**Mid-tone and textured surfaces.** Kraft paper around `#b08d57` has a luminance near
**57%** — black modules pass with a 57-point difference, but a dark brown brand ink at
30% luminance leaves only 27 points and fails. Photographs and textures are worse
because the background varies module to module; that maths lives on
[QR codes on photos and textures](/docs/design/qr-codes-on-photos-and-textures).

**Formats without alpha.** JPEG has no transparency: exporting or re-saving flattens
the code onto a default ground — sometimes black, producing an accidentally
[inverted code](/docs/design/why-light-on-dark-qr-codes-fail). Keep transparent codes
in PNG or SVG end to end, and mind the conversion pitfalls in
[WebP and AVIF issues](/docs/troubleshooting/qr-code-in-webp-and-avif-issues).

## The per-placement verification loop

Because the file alone can no longer prove itself, verify the *composition*:

1. Place the code in the real context — the web page in both themes, the print layout
   on the actual stock colour.
2. Screenshot or photograph that context and decode it, and run the underlying code
   through the [validator](/validate).
3. Re-check after any redesign behind the code. A background colour tweak elsewhere in
   the layout can kill a transparent code that has worked for months.

If a placement fails, do not reach for lighter modules — put a solid light panel
behind the code (locally un-transparent) and keep the dark-on-light polarity that every
scanner supports.

## FAQ

### Do transparent background QR codes scan?

Yes, exactly as well as the surface behind them allows. The code has no background of
its own, so the contrast rule applies between the modules and whatever each placement
puts behind them — a light surface works, a dark or busy one fails.

### Why does my transparent QR code not scan on my website?

Most often dark mode: the page background flips dark and the dark modules vanish
against it. Test both themes, and either give the code a solid light card or serve a
theme-appropriate variant.

### Which file format should a transparent QR code use?

SVG for print and scalability, PNG for general screen use — both carry alpha. Avoid
JPEG entirely; it has no transparency and flattening can place the code on an
unreadable ground.

### Does the quiet zone still exist with a transparent background?

Yes — it is exported as clear space around the modules. But since it is transparent,
whatever is behind it must be uniform and light; a busy design showing through the
quiet zone breaks detection as surely as cropping it.

## Try it

- https://useqr.app/url
- https://useqr.app/validate
- https://useqr.app/scan