How to Design a QR Code That Always Scans

How QR scanners read a code

A QR scanner does not read color — it reads contrast. It looks for dark modules against a light background and uses the difference in luminosity to determine where the pattern starts and stops. This is why the core design rule is simple: maintain strong contrast between your modules (the dark dots) and your background (the light areas).

The three finder patterns (the three square corners) are particularly important. Scanners use them to detect the code's orientation and size before reading the data. If your design obscures or blends these corner squares, scanning will fail even if the rest of the code is fine.

Contrast: the non-negotiable rule

The minimum contrast ratio for reliable scanning is approximately 4:1 — the same standard used for accessible text (WCAG AA). At this ratio, most smartphone cameras can read the code in typical indoor lighting. For outdoor or high-glare environments, aim for 7:1 or higher.

Common failures:

• ✕Dark purple modules on a dark blue background (insufficient contrast)
• ✕Light grey modules on a white background (insufficient contrast)
• ✕Gradient that transitions from dark to very light — the light end fails to scan

Safe combinations: black on white, deep navy on white, dark violet on white or light lavender, dark green on light mint. The modules must always be darker than the background.

Using color and gradients

Color QR codes are completely fine — as long as contrast is maintained throughout the entire code. The safest approach is to keep the background white and use a colored foreground (modules). This gives you maximum flexibility with brand colors while ensuring reliability.

Gradients add visual sophistication. The key constraint: both the start color and the end color must maintain at least 4:1 contrast against the background. A gradient from deep violet (#5b21b6) to cobalt blue (#1d4ed8) against a white background works well. A gradient from the same violet to a light lavender (#e9d5ff) will fail at the light end.

Linear gradients (left-to-right or top-to-bottom) are generally safer than radial gradients, because you can predict which parts of the code will be which shade. Radial gradients centered on the middle of the code can inadvertently lighten the finder patterns in the corners.

Choosing a dot style

Standard QR codes use square modules. oh my qr offers six dot styles: Square, Rounded, Dots, Extra Rounded, Classy, and Classy Rounded. All six are valid and scan reliably — the choice is aesthetic.

• ▸Square — classic, professional, maximum scan reliability at very small sizes
• ▸Rounded — modern, approachable, excellent for consumer brands
• ▸Dots — distinctive, works well at medium to large sizes, not recommended for very small prints
• ▸Extra Rounded / Classy / Classy Rounded — premium feel, slightly more complex pattern, best at 4 cm or larger

Rule of thumb: if the final QR will be printed smaller than 3 cm, use Square or Rounded. For larger formats, any style works.

Adding a logo

QR codes are built with error correction — they can reconstruct lost data up to a certain percentage. Level H (high) correction allows up to 30% of the code to be obscured. oh my qr uses high error correction when a logo is added, meaning logos covering up to 30% of the QR area still scan correctly.

Practical logo sizing:

• ▸Under 20% of QR area: safe for all sizes and dot styles
• ▸20–25%: safe for standard use, test before printing
• ▸25–30%: maximum, test with multiple devices at the final print size

Logos work best when they are high-contrast against the QR background — a dark logo on a white QR background, or a white logo with a colored background block behind it. Transparent logos that blend into the QR pattern reduce scan reliability more than their area suggests.

Three colors to set

oh my qr lets you set three independent colors:

• ▸Modules — the dark dots that encode the data. Should always be the darkest element.
• ▸QR background — the light areas within the QR pattern itself. Should contrast strongly with the modules.
• ▸Background — the image background surrounding the QR. Can match your brand color. Does not affect scanning.

Testing before you print

Never skip testing. What looks readable on a 4K monitor may fail on a phone camera in dim lighting.

1. Download the PNG at the exact size you intend to print
2. Test with at least two phones — one iOS, one Android
3. Test in the lighting conditions where the code will actually be used (restaurant table lighting, outdoor glare)
4. Hold the phone at the distance a real user would scan from (arm's length for a table tent, 50–100 cm for a poster)
5. If it fails at any point, increase contrast or simplify the design before printing

PNG vs SVG for different uses

Use PNG for: web pages, email campaigns, social media posts, standard document sizes up to A4.

Use SVG for: any print job, especially large format (posters, banners, signage, packaging). SVG is a vector format — it scales to any physical size without the pixel degradation that causes scan failures at large print sizes. If your QR will ever be printed larger than about 10 cm, download the SVG.