QR-Codes erklärt: wie der Wunschlisten-Code funktioniert

Wer bei “QR-Code” an japanische Auto-Fabriken denkt, liegt richtig. Das Format wurde 1994 bei Denso Wave entwickelt, einem Tochterunternehmen von Toyota, um in der Logistik mehr Daten pro Code unterzubringen als Strichcodes erlauben. Heute trifft man QR-Codes auf jeder Pizza-Speisekarte, in jedem Impfpass und auf jedem Bahnticket. Auf weihnachtswunschliste-online.de wird er dafür benutzt, eine Wunschliste so zu teilen, dass Grosseltern sie mit der Smartphone-Kamera scannen können ohne tippen zu müssen.

Wie ein QR-Code aufgebaut ist

Ein QR-Code besteht aus mehreren Funktionsbereichen die jeweils einen festen Zweck haben. Die drei großen Quadrate in den Ecken sind die Finder Patterns, sie helfen der Kamera, Position und Rotation des Codes zu erkennen. Daneben gibt es Alignment Patterns (kleinere Quadrate), Timing Patterns (gestrichelte Linien zwischen den Findern) und das eigentliche Daten-Feld in dem die Information steckt.

Der Daten-Bereich wird modular adressiert: jedes schwarze oder weisse Quadrat ist ein “Modul” und kodiert ein Bit. Bei einem QR-Code Version 1 sind das 21x21 Module, bei Version 40 sind es 177x177. Je grösser die Version, desto mehr Daten passen rein.

<rect class="finder" x="340" y="30" width="50" height="50"/>
<rect class="box" x="350" y="40" width="30" height="30" stroke="#fff"/>
<rect class="finder" x="360" y="50" width="10" height="10"/>

<rect class="finder" x="210" y="160" width="50" height="50"/>
<rect class="box" x="220" y="170" width="30" height="30" stroke="#fff"/>
<rect class="finder" x="230" y="180" width="10" height="10"/>

<rect class="timing" x="265" y="85" width="5" height="100"/>
<rect class="timing" x="335" y="85" width="5" height="100"/>
<rect class="timing" x="265" y="85" width="70" height="5"/>
<rect class="timing" x="265" y="185" width="70" height="5"/>
<rect class="data" x="280" y="100" width="40" height="80"/>

<line x1="60" y1="55" x2="208" y2="55" stroke="#c41e3a" stroke-width="1" stroke-dasharray="4 3"/>
<text class="label" x="58" y="50" text-anchor="end">Finder Pattern (3x)</text>
<line x1="60" y1="135" x2="265" y2="135" stroke="#d97706" stroke-width="1" stroke-dasharray="4 3"/>
<text class="label" x="58" y="130" text-anchor="end">Timing Pattern</text>
<line x1="60" y1="200" x2="280" y2="140" stroke="#0f172a" stroke-width="1" stroke-dasharray="4 3"/>
<text class="label" x="58" y="205" text-anchor="end">Daten-Bereich</text>
<line x1="540" y1="120" x2="402" y2="120" stroke="#c41e3a" stroke-width="1" stroke-dasharray="4 3"/>
<text class="label" x="542" y="115" text-anchor="start">Format-Info</text>

Reed-Solomon Fehlerkorrektur

Die wirkliche Magie steckt nicht im Layout sondern in der Fehlerkorrektur. Reed-Solomon-Codes, entwickelt 1960 von Irving Reed und Gustave Solomon am MIT, fügen redundante Daten hinzu, mit denen Fehler nachträglich rekonstruiert werden können. Wenn ein Teil des Codes verschmutzt, abgerissen oder unscharf ist, kann der Decoder die fehlenden Bits aus den intakten Bits zurückrechnen.

Vier Korrektur-Level sind im QR-Standard definiert:

Auf weihnachtswunschliste-online.de wird Level M verwendet. Das ist der vernünftige Mittelweg zwischen Code-Grösse und Robustheit. Der Code bleibt scannbar wenn er auf Druckerpapier oder Smartphone-Display gezeigt wird, ohne unnötig dichter zu werden.

Brand-Farben und Kontrast

QR-Codes müssen nicht schwarz auf weiß sein. Die Spezifikation erlaubt beliebige Farben, solange der Kontrast hoch genug ist. Praktisch sollte das Verhältnis mindestens 4:1 sein, sonst kommen ältere Smartphone-Kameras durcheinander.

Auf dieser Site wird dunkles Weihnachts-Rot (#9b1629) auf weissem Hintergrund (#ffffff) verwendet. Das ergibt einen Kontrast von etwa 8:1 und scannt zuverlässig auch unter schlechtem Licht.

Was nicht funktioniert: helle Farben (Hellblau, Pastellgrün) auf weiß. Was auch nicht funktioniert: invertierte Codes (heller Code auf dunklem Hintergrund), viele Apps erwarten konventionell dunkler-auf-heller und steigen aus.

Daten-Kapazität in der Praxis

Theoretisch passen bei Version 40 und Level L bis zu 4296 alphanumerische Zeichen in einen QR-Code. Praktisch:

• bis ca. 100 Zeichen: angenehm scannbar, kleiner Code
• 100–500 Zeichen: gut scannbar, mittlere Code-Grösse
• 500–1500 Zeichen: scannbar mit guter Kamera, dichter Code
• über 1500 Zeichen: oft nur noch mit dedizierten Scanner-Apps zuverlässig

Der Share-Link einer Wunschliste mit zehn Einträgen ist typischerweise 800–1500 Zeichen lang. Das funktioniert gut, kann aber bei sehr langen Notizen oder vielen Wünschen an die Grenze stossen. In dem Fall warnt das Tool und empfiehlt, lange Notizen oder URLs zu kürzen.

Was die Library macht

Auf weihnachtswunschliste-online.de kommt die Open-Source-Bibliothek qrcode von Vincenzo Castelli zum Einsatz. Sie läuft komplett im Browser, kein Server-Render-Schritt. Der Output ist ein PNG als Data-URL, das direkt in ein <img>-Element eingebunden werden kann.

Konfiguration:

QRCode.toDataURL(shareUrl, {
  width: 256,
  margin: 1,
  errorCorrectionLevel: 'M',
  color: { dark: '#9b1629', light: '#ffffff' }
});

Der Margin-Wert von 1 entspricht einem Modul-Rand und ist das Minimum nach Spezifikation. Manche Scanner-Apps brauchen mehr Margin (zwei oder vier Module) um zuverlässig zu erkennen.

Worauf es wirklich ankommt

Ein QR-Code ist ein robustes Daten-Format das seit 30 Jahren stabil ist, eine eingebaute Fehlerkorrektur hat und auf praktisch jedem Smartphone funktioniert. Für eine Wunschliste reicht eine moderate Code-Grösse mit Level M und Brand-Farben mit hohem Kontrast. Wer Codes über 1500 Zeichen einsetzen will, sollte vorher auf einem älteren Smartphone testen ob der Code noch scannbar ist.