QR Code Color Science: Why Your Custom-Colored QR Code Won't Scan
QR Codeโ views
Brands increasingly want QR codes that look good: custom colors, embedded logos, unique shapes. But over-designed QR codes often fail to scan. This is not luck โ it is a physical constraint of optical recognition. This article explains the scanner's perspective and identifies which designs are safe versus dangerous.
How Scanners "See" QR Codes
After a phone camera captures a QR code image, the decoder performs these steps:
Grayscale conversion: Convert the color image to grayscale
Binarization: Threshold algorithm converts grayscale to pure black/white (Otsu / adaptive threshold)
Localization: Find three Finder Patterns to determine position and rotation
Sampling: At grid intersections, determine if each module is "black" or "white"
Decoding: Reconstruct data per encoding rules, error correction repairs errors
The critical step is binarization. If the foreground and background colors do not differ enough in grayscale space, the decoder cannot distinguish modules correctly.
The Science of Color Contrast
"Good-looking" and "scannable" are two independent dimensions. Human color perception differs dramatically from the decoder's grayscale conversion:
Foreground
Background
Grayscale Gap
Scannable
Notes
Black #000
White #FFF
100%
โ Perfect
Standard, always reliable
Dark Blue #1a237e
White #FFF
~86%
โ Good
Dark foreground is safe
Red #e53935
White #FFF
~70%
โ Usable
Red has high grayscale but sufficient
Yellow #ffeb3b
White #FFF
~8%
โ Fails
Yellow grayscale close to white
Light Green #a5d6a7
White #FFF
~15%
โ Fails
Light foreground insufficient gap
White #FFF
Black #000
100%
โ Usable
Inverted works but not all scanners support
The Physical Limits of Logo Embedding
Embedding a logo is essentially intentionally corrupting data modules, relying on error correction to "repair" the damage. But correction capacity is finite:
ECC L (7%): Logo area must stay under 3% of code area (barely visible)
ECC M (15%): Logo area must stay under 7% (very small logo)
ECC Q (25%): Logo area must stay under 15% (small logo feasible)
ECC H (30%): Logo area must stay under 20-25% (recommended choice)
Note: Logo area refers to the percentage of obstructed modules, not pixel area. If the logo happens to cover alignment markers or format information zones, even a small logo will cause failure.
Safe Design Rules
Common Failure Cases & Fixes
Problem
Cause
Fix
Brand-colored QR won't scan
Foreground grayscale too light
Use darker brand color shade or dark FG + brand BG
