Keep the contrast working for you
Dark modules on a light background are a dependable starting point. A camera needs to distinguish the pattern from its surroundings, including under changing exposure and reflected light. Two attractive colors can still be too close in brightness.
The editor checks a minimum 4.5:1 contrast between the module colors and the background. This is a conservative design check, not a QR certification standard. Print conversion, glare, and camera processing can all change the result. Test the actual file and the final surface.
Use gradients sparingly
A gradient can give the code a distinct identity, but both ends should remain dark against the background. The generator checks both gradient colors. Avoid using a pale highlight that makes part of the pattern disappear.
Compare your result with the Classic preset. If the styled version is slower or less consistent to scan, use a simpler color treatment and carry the brand color in the surrounding artwork.
Preserve the finder patterns
The three large corner patterns help a reader recognize and orient the code. You can vary their shape, but they should remain clear, dark, and unobstructed. Do not place artwork over the corners or distort the square.
Rounded or dot patterns can work well at sufficient size. Very small prints have less room for those shapes, making a plain square-module design an easier choice to reproduce.
Add a small logo, then test it
A logo covers part of the QR pattern. The editor keeps the mark small and enables high (H) error correction when a logo is present. It accepts PNG, JPEG, or WebP files and normalizes them to a local raster image; SVG uploads are deliberately excluded.
The approximate “30%” recovery figure associated with H describes codeword error correction, not permission to cover 30% of the image. Where damage occurs matters. A small, simple mark centered away from the finder patterns is a better starting point than a large complex illustration.
In the generator’s “Add a logo” tab, upload an image or load a public HTTPS image URL. A remote host must allow the browser’s cross-origin request; if it blocks loading, upload a trusted local copy instead. A small favicon can look blurred when enlarged. Start with a clean, larger source image, simplify tiny lettering, and inspect the downloaded QR at its final size.
If the logo competes with the pattern, put it beside the code instead. The whole printed card can carry your brand without requiring the QR itself to do every visual job.
Respect the quiet zone
The empty border belongs to the code. Keep it separate from captions, icons, photographs, and frames. A transparent export still needs that clear area when you place it in another design.
JPEG and PDF exports have a solid background in this tool. Transparent PNG or SVG files should be placed on a flat light surface. A dark module pattern over a photograph is unpredictable even if part of the image looks light.
Finish with a real scanning check
- Download the final file, rather than relying only on the live preview.
- Check it on a second phone and with the reader your audience is likely to use.
- Try a sample at the actual printed or displayed size.
- Verify the resulting action, especially for Wi-Fi, SMS, vCards, and geo links.
- Keep a simple version ready if the branded design is unreliable.
Good QR design should make the intended action obvious. Label it honestly, keep it away from unrelated buttons or advertisements, and give users an alternative when scanning is inconvenient.
Try the design controls or read how to prepare your next print.