The black-and-white standard QR isn't mandatory

A classic QR code is black on white, with square modules, no logo. In 2010 that was the only safe option. In 2026 scanners are robust enough for far more design freedom — if you know the five rules we go through here. A well-designed branded QR code is scanned more often than a generic one; a 2024 print-marketing study by the University of Zurich showed a 26% higher scan rate for branded QR codes with a logo.

For the fundamentals first, see the QR code generator post; here it's about design.

Lever 1 — color contrast

QR codes live on light-dark contrast. Rules of thumb:

  • At least 50% brightness difference between background and code modules. The WCAG contrast ratio helps as a proxy: over 7:1 is safe.
  • Dark code on a light background is more robust than inverted. Inverted QR (light code on a dark background) is possible, but 30–40% of smartphone scanners struggle with it.
  • Brand color as the code color: works if the color is dark enough. Tip: don't make black pure black (#000), but tint it subtly toward your brand black (e.g. #0a0a0f).
  • Gradient instead of solid: possible, but tricky. Some scanners can't handle it. With a gradient, still keep clear contrast to the background color.

Lever 2 — logo in the center

A logo in the QR center increases recognition and trust. The rule: the logo may cover at most 25% of the code area. More makes the code illegible, less isn't graphically worth it.

Prerequisite: error-correction level H (30%). With that the scanner can reconstruct the missing quarter.

import QRCode from "qrcode";
import { createCanvas } from "canvas";

const canvas = createCanvas(400, 400);
await QRCode.toCanvas(canvas, "https://scango.me/abc", {
  errorCorrectionLevel: "H",
  margin: 2,
  width: 400
});

// Insert logo centered (max. 100x100 px on a 400x400 code)
const ctx = canvas.getContext("2d");
const logo = await loadImage("logo.png");
ctx.drawImage(logo, 150, 150, 100, 100);

Logo shape: round or square — both work. Important: put the background behind the logo (ideally circular) back in the QR's background color, so the scanner sees a clear transition.

300 × 250 — Rectangle
Cookie-Banner ausstehend

Lever 3 — module shapes

Instead of square modules, many variations are possible in 2026:

  • Standard squares. Maximally compatible.
  • Round dots. Looks more modern, stays scannable when contrast is high.
  • Diamond modules. Trendy, but a 5% scan-rate loss.
  • Custom pattern. Assembled from your own vector shapes — for pro designs in high-end campaigns. Some scanners fail; only use with error correction H.

The library qr-code-styling supports all these variants directly in the browser. Platforms like ScanGo.me bring a UI with visual previews, so you can adjust the design without code knowledge.

Lever 4 — position-marker design

The three big corner squares (position markers) are a QR code's most important recognition feature. Modern, they can be:

  • Standard: square inside and out.
  • Rounded: rounded squares outside, normal dot inside.
  • Diamond: rotated inside.
  • Custom-branded: tinted in the brand color, or with a brand initial in the center.

Important: the outer squares (position markers) should at least keep their basic shape — otherwise the scanner won't recognize them as markers. You have leeway inside.

Lever 5 — frame and call to action

A QR code without explanation is often overlooked. Frames with a call to action measurably increase the scan rate. Examples:

  • "Scan for the menu"
  • "Scan now → 20% off"
  • "Wi-Fi access: scan here"

Complementary frames in the design: a subtle border, a brand banner at the bottom, an arrow to the code. Platforms like ScanGo.me bring standard frame templates.

300 × 250 — Rectangle
Cookie-Banner ausstehend

Quiet zone — the forgotten margin

Per ISO/IEC 18004, a QR code needs at least a 4-module-wide margin (quiet zone) clear all around. Violate that — place the code right at the image edge or next to text — and you risk scan errors. In practice: 4 modules ≈ about 5% of the code width. Calculate it when printing.

  • SVG instead of PNG. When printing on large posters, SVG scales losslessly.
  • Check CMYK conversion. Brand colors can look duller in CMYK — measure contrast beforehand.
  • No UV coating over QR codes. Reflections prevent scanning.
  • Size generously on fabric and packaging. Fabric distorts when worn, packaging gets deformed.
  • When printing on dark paper: a light QR code with an inverted color scheme — and test with several devices beforehand.

Animated QR codes

Since 2024, animated QR codes (typically as GIF or MP4) have appeared in marketing. On scan, the scanner decomposes several frames, which raises the recognition probability. Advantages: more artistically appealing, higher attention. Disadvantages: usable only in digital, not in print.

300 × 250 — Rectangle
Cookie-Banner ausstehend

Augmented reality QR codes

In 2025, QR codes appeared that trigger an AR effect after scanning — typically via WebXR or a platform-specific app. The condition: the scan endpoint (short link → landing page) must serve WebXR content. A pragmatic recommendation: build the landing page first, only then put the QR code in print.

Test checklist before printing

  1. Scan with three different smartphones (iOS, Android Stock, Android One UI).
  2. Scan with the native camera app (not just QR apps).
  3. Test from 30 cm, 1 m, and 3 m distance.
  4. Scan on a print proof (not just the screen).
  5. On dark or reflective surfaces, test under various lighting conditions.
  6. Backup plan: if the QR code ever fails, is a text URL visible next to it?

Common design mistakes

  • Logo too big. Over 25% makes the code illegible.
  • Gradients without enough contrast. Pretty gradient, bad scan.
  • Position markers designed beyond recognition. The three corner squares must stay clearly recognizable.
300 × 250 — Rectangle
Cookie-Banner ausstehend

Recommendation 2026

A high-quality designed QR code for a 2026 marketing campaign combines:

  • Brand color (instead of black).
  • Logo in the center (error correction H).
  • Optionally round modules for a more modern look.
  • Frame with a call to action.
  • Dynamic URL via ScanGo.me for tracking and later changes.
  • Tested multiple times before printing.

Sources

ISO/IEC 18004 — QR Code Spec · Denso Wave — QR Code Design Guide · qr-code-styling · ScanGo.me — Branded QR codes & short links · University of Zurich — Marketing Research · WCAG 2.2 — Contrast Guidelines.