QR Code Design: Adding Colors and Logos Safely

Custom QR Codes Need Careful Design

Plain black-and-white QR codes work reliably, but they look generic. Adding brand colors, gradients, and logos makes QR codes visually appealing and on-brand. The challenge is maintaining scannability while customizing the design.

Every visual modification you make to a QR code reduces its tolerance for damage, distortion, and scanning difficulty. Understanding the tradeoffs helps you create codes that look good and scan reliably.

Error Correction: Your Design Budget

QR codes use Reed-Solomon error correction, which allows the code to be read even when part of it is damaged or obscured. There are four levels:

When you add a logo or modify colors, you consume some of the error correction capacity. Always use level H (30%) when placing a logo in the center of the code. The 30% redundancy gives you room for the logo while maintaining scannability.

Working with Colors

Foreground and Background

QR code readers detect the contrast between dark modules (foreground) and light modules (background). As long as the foreground is significantly darker than the background, you can use non-black colors.

/* Safe QR code color combinations */
--safe-1: { fg: #1a365d, bg: #ffffff };  /* Dark blue on white */
--safe-2: { fg: #2d3748, bg: #f7fafc };  /* Dark gray on light gray */
--safe-3: { fg: #9b2c2c, bg: #ffffff };  /* Dark red on white */

Contrast Requirements

• Minimum contrast ratio: 4.5:1 between foreground and background
• Test with a contrast checker before finalizing colors
• Avoid light foreground colors — even on dark backgrounds, light-on-dark QR codes scan less reliably

Gradients

Gradients work for the foreground but must go from dark to dark. A gradient from blue to purple scans fine. A gradient from yellow to red fails — the lighter end lacks contrast.

✅ Dark gradient: #1a365d → #553c9a (both dark enough)
❌ Light gradient: #fbd38d → #e53e3e (yellow too light)

What Not to Do

• Invert the QR code (white modules on black background) — many scanners fail
• Remove the quiet zone — the blank margin around the code is required for scanning
• Use patterned backgrounds — noise interferes with module detection

Adding Logos

The Safe Zone

A logo covers modules in the center of the QR code. The center is the safest position because QR code data is interleaved across the entire matrix — no single region stores all the data.

Rule of thumb: the logo should cover no more than 20-30% of the total QR code area when using error correction level H.

QR code total area:  100×100 px
Maximum logo area:   30×30 px (9% of area — conservative)
Maximum logo area:   40×40 px (16% of area — aggressive but viable with H correction)

Logo Placement Steps

1. Generate the QR code at error correction level H
2. Export as SVG or high-resolution PNG
3. Place the logo in the center with a white background padding
4. Leave at least 2 module-widths of clear space around the logo
5. Test scan with at least 3 different devices and apps

Logo Background

Add a white or background-colored rectangle behind the logo to create a clean boundary between the logo and the QR modules:

<div class="qr-container" style="position: relative; display: inline-block;">
  <img src="qr-code.svg" alt="QR Code" />
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
              background: white; padding: 8px; border-radius: 4px;">
    <img src="logo.svg" alt="Brand" style="width: 60px; height: 60px;" />
  </div>
</div>

Finder Patterns: Do Not Modify

The three large squares in the corners are finder patterns. Scanners use them to locate and orient the QR code. Never modify, recolor, or overlay these patterns. Any change to finder patterns dramatically decreases scan reliability.

┌─────┐           ┌─────┐
│ ▪▪▪ │           │ ▪▪▪ │
│ ▪ ▪ │   ...     │ ▪ ▪ │
│ ▪▪▪ │           │ ▪▪▪ │
└─────┘           └─────┘

                ┌─────┐
                │ ▪▪▪ │
                │ ▪ ▪ │   ← These three corner
                │ ▪▪▪ │     patterns must stay intact
                └─────┘

Testing Your Custom QR Code

If your custom code fails any test, reduce the logo size or simplify the colors and try again.

Key Takeaways

• Use error correction level H (30%) when adding logos or significant color changes
• Maintain at least 4.5:1 contrast ratio between foreground and background
• Never modify the finder patterns in the three corners
• Logo should cover no more than 20-30% of the QR code area
• Always add a white background behind the logo for clean boundaries
• Test with multiple devices, lighting conditions, and distances

Try It Yourself

Create custom QR codes with colors and logos using our free QR Code Generator. Choose error correction level, customize foreground and background colors, and download in PNG or SVG — all processing happens locally in your browser.

Try the QR Code Generator →