A plain QR code is ugly. There, I said it.
Black squares on white. Functional, sure. But you've spent years building a brand, picking the right teal, kerning the wordmark, getting the logo's curves just so. Then the QR code lands in the middle of your poster like a barcode from 1995.
It doesn't have to. You can put your logo in the center. You can tint the modules your brand color. You can drop the code onto a transparent background so it floats over a photograph. Done carefully, all of this works and scans fine. Done carelessly, it fails the first time someone tries to use it.
The Logo-in-Center Rule
This is the most common branded QR request, and the most common way to break a code.
The center of a QR code is the one place you can safely cover. The standard reserves that region as a "format information" area with built-in redundancy, which is why logos go there and not, say, over the corner finder patterns. But there's a hard limit.
Keep the logo under 20% of the code's total area. Smaller is safer. A logo that covers 30% will scan on a clean print under good light and fail on a smudged print under bad light. You won't know which until it's too late.
Pair the logo with high error correction. Level H tolerates 30% of the code being damaged or obscured. With a 20% logo and level H, you have a margin. With a 20% logo and level L (7% correction), you have no margin and a flaky code. Our QR code generator lets you set the error correction level explicitly; for branded codes, set it to H.
Coloring the Modules
The default is black on white because that's the maximum contrast, and QR scanners are contrast detectors at heart. You can deviate, but only so far.
The rule: the dark modules and the light background need a contrast ratio of at least 4.5:1. That's the same threshold as WCAG AA for body text, and it's a good proxy for "will a phone camera read this in a dim room."
Dark navy on cream works. Forest green on ivory works. Your brand teal on a slightly lighter teal works, if you check the ratio. Pale yellow on white does not work, no matter how on-brand it is. Light gray on white does not work. Avoid gradients across modules, because a gradient can drop local contrast below the threshold in one part of the code even if the average looks fine.
One subtlety: don't invert the finder patterns (the three big squares in the corners). Some "creative" branded codes swap the corner patterns to white-on-color. Many scanners then fail to find the code at all. Leave the finder patterns dark-on-light.
Transparent Backgrounds
A transparent-background QR code is a PNG (or SVG) with an alpha channel, so the code floats over whatever is behind it. This is great for placing a code over a photograph on a website or a brochure.
The catch is the same as coloring: contrast. If the photo behind the code is busy or light in places, the light "background" of the QR code (which is now transparent) no longer contrasts with the dark modules. The scanner sees dark-on-dark and fails.
Two fixes. First, add a subtle solid or semi-opaque backing just behind the code, even if the rest is transparent. A 15% white plate behind the modules restores contrast without killing the float-over-photo effect. Second, keep the dark modules truly dark and opaque, not semi-transparent.
For a transparent PNG, export with the alpha channel and test it over the actual background image you'll use, not over a checkerboard. A checkerboard in Photoshop tells you nothing about real-world contrast.
Rounded Modules and Other Stylization
You'll see stylized QR codes with rounded dot modules, dot-and-gap patterns, or modules that form a hidden image. These look striking. They also push scanners harder.
The safe path: stick to standard square modules for anything that must scan reliably, like packaging or a poster viewed from across a room. Use stylized modules for screens, where the backlight and the user's ability to re-aim compensate for the reduced scan robustness.
If you stylize, test on multiple devices. Older Android cameras struggle more than recent iPhones. A code that scans on your iPhone 15 in good light may fail on a three-year-old budget Android in the same light. That's your audience, like it or not.
A Real Example: The Event Poster
A local music festival wanted its QR code to look like part of the poster art. We put the festival's sunburst logo in the center at about 15% of the code area, tinted the modules the festival's deep orange, and sat the code on a transparent background over a dark navy band of the poster. Error correction at H.
It scanned. It scanned on every phone we tried, in the dim venue lobby where the posters hung. The trick was the constraints: 15% logo (not 25%), level H (not L), dark orange on light plate (not light orange on dark), and the finder patterns left alone.
Test Before You Print a Thousand
Branded codes are the place where "test on multiple phones" stops being optional. Print one copy at the final size. Scan it with an iPhone and an Android, ideally an older Android. Scan it in the lighting where it will actually live. If it scans in all three conditions, print the run. If it doesn't, dial back the branding (smaller logo, higher contrast, higher error correction) and try again.
For the underlying mechanics of why error correction and size matter, our QR code error correction guide is the reference.
The Short Version
Brand the code. Don't break the code. Logo under 20% of area, error correction at H, contrast above 4.5:1, finder patterns untouched, transparent backgrounds tested over the real photo. Then print one and scan it before you print a thousand.
