How QR Code Scanning Works

Before customizing, it helps to understand what a QR scanner actually does. The camera converts the image to grayscale, then identifies dark and light regions to read the binary pattern. The three square finder patterns in the corners are what let the scanner locate and orient the code instantly.

This means two things for design:

  1. Contrast between modules matters more than actual color. The scanner doesn't care if your modules are navy blue or deep green — only that they're detectably darker than the background.
  2. The finder patterns must remain intact. Any design change that distorts or obscures the corner squares will break scanning entirely.

QR codes also include error correction at four levels (L, M, Q, H). At Level H, the code can reconstruct data even if up to 30% of modules are damaged or obscured. This is what makes logos in the center possible — but it's not unlimited.

Color Rules: Contrast is Everything

You can change colors freely as long as you maintain high contrast. The rule of thumb: the dark modules (foreground) must be clearly darker than the light modules (background).

The WCAG contrast ratio standard is a useful guide here. Aim for at least 4:1 contrast ratio between your module color and background color. For reference:

  • Black (#000000) on White (#ffffff) → 21:1 ✅ Maximum contrast
  • Dark Navy (#0a1628) on White → ~18:1 ✅ Very safe
  • Brand Blue (#1d4ed8) on White → ~8:1 ✅ Works well
  • Medium Gray (#888) on White → ~3.5:1 ⚠️ Risky on older phones
  • Yellow (#facc15) on White → ~1.3:1 ❌ Will fail

Background color

You can use a light-colored background instead of pure white. Light pastel colors (light yellow, light blue, light gray) are fine as long as they're clearly lighter than the module color. Avoid busy patterns or textures behind the code — these confuse the scanner's binarization step.

Never invert a QR code. Light modules on a dark background (e.g., white code on black) does not work with most phone cameras and QR apps. The scanning algorithm assumes dark-on-light by default.

Gradients

Gradients on the modules themselves are problematic — if part of the gradient is too light, those modules become unreadable. Gradients on the background are safer, provided the entire background area under the code remains lighter than the modules. In practice, it's best to keep the code region itself flat-colored.

Adding a Logo or Image

Adding a logo to the center of a QR code is the most popular customization. It works because of error correction — specifically, Level H error correction can recover from up to 30% data loss. When a logo covers part of the center, the scanner reconstructs the missing data from redundant information in other modules.

Safe logo size

Keep the logo within 20% of the total QR code area to stay well within the error correction budget. At 30% you're at the theoretical limit — any print imperfections, ink spread, or image compression will push you over the edge.

For a 200×200 pixel QR code: 20% → logo no larger than ~89×89 pixels (since 200² × 0.20 = 8000, √8000 ≈ 89).

Logo placement and contrast

  • Center the logo precisely — off-center logos may cover finder pattern edges
  • Add a white or light background behind the logo so the modules it covers are fully masked (not partially visible)
  • Use a logo with clear edges — feathered or semi-transparent logos leave ambiguous regions that the decoder may misread
  • Avoid logos that look like QR patterns — checker-board logos can confuse the scanner
Generate at a higher error correction level when adding a logo. Choose Level H (30% recovery) instead of the default Level M (15%) to give your logo the most recovery headroom.

Module Shapes and Finder Patterns

Standard QR modules are squares. Some tools let you round the corners of modules or change their shape to dots or diamonds. This can work — with caveats:

  • Rounded modules: Safe if the overall pattern remains clearly readable. Avoid making modules so round that adjacent modules blur together in print.
  • Dot modules: Work on high-resolution prints but can fail at small sizes where dots become indistinct.
  • Custom finder patterns: The three corner squares have strict requirements. Changing their shape or color significantly increases failure risk. Only do this if you can test extensively across many devices and lighting conditions.

As a rule: customize the data modules freely, but keep the finder patterns as close to standard as possible.

Do's and Don'ts at a Glance

Safe to do
  • Change module color (stay dark)
  • Use a light-colored background
  • Add a centered logo ≤ 20% area
  • Round module corners slightly
  • Add a text label below the code
Avoid these
  • Inverting colors (light on dark)
  • Low-contrast color combinations
  • Logos larger than 25% of area
  • Patterns/textures behind the code
  • Modifying the finder patterns

Always Test Before Printing

Even a QR code that looks good on screen can fail after printing, due to ink spread, paper absorption, or color shift in CMYK conversion. Follow this testing process before any print run:

  1. Scan the digital file on screen — at actual print size, with your phone camera
  2. Convert to CMYK if printing professionally and preview the color shift
  3. Print a single proof on the actual paper and with the actual printer
  4. Scan the proof with at least 3 different phones (iOS, Android flagship, Android budget)
  5. Test in different lighting — bright office light, dim light, direct sunlight
  6. Only then approve the full print run

If the customized design fails during testing, fall back step by step: increase contrast first, then reduce logo size, then simplify the background, and finally return to black-on-white if needed.