Color isn’t just a matter of taste
A QR code in your brand colors is tempting — and it’s also one of the most common causes of unreadable codes. The key point: a QR reader doesn’t see colors, it sees a luminance difference. The decoder converts the image to black and white by judging each pixel’s brightness; if the two tones are too close in luminance, the judgment becomes random and reading fails. “Color” is therefore an optics problem before being an aesthetic one.
The golden rule: dark on light, never the reverse
The standard and the decoder ecosystem assume dark modules on a light background. An inverted code — white modules on black — isn’t guaranteed: many decoders, especially older or faster ones, won’t even attempt it. If your medium is dark (black packaging, dark poster), the right solution is a light cartridge behind the code: a white or very light background that includes the quiet zone, with classic dark modules.
What the decoder does: binarization
To see why luminance beats hue, watch what a reader does: it binarizes the image. Every pixel is declared black or white against a brightness threshold — the algorithm used by fast decoders (the adaptive-binarizer family, including ZXing’s). Two colors your eye separates easily — a mid blue and a mid green — can produce nearly identical luminance: after binarization, modules and background merge and the pattern vanishes. The decoder has nothing left to read, no matter how “pretty” the image was.
The hard number: 4:1
FlashScan Pro computes the relative-luminance contrast ratio between your two colors — the same formula as WCAG text-accessibility criteria — and shows a warning below 4:1. The threshold isn’t arbitrary: scanners degrade quickly under ~3:1, and the extra margin compensates real conditions (low light, fading print, dirty screen). In practice:
- Safe: navy blue, dark green, burgundy, dark brown on white or cream — 8:1 to 15:1 ratios.
- Borderline: mid tones (bright blue, dark orange) on white — often around 3-4:1, test before committing.
- Avoid: yellow, light cyan, mid-gray, pastels on white — often under 3:1.
A few indicative pairs: #10131a on #ffffff (the generator’s default) exceeds 17:1; a royal blue #1e40af on white stays around 8:1; an orange #f97316 on white drops near 2.5:1 — rejected. The ratio is computed on relative luminance, not perception: test your two colors in the generator rather than judging by eye.
The classic traps
- Two colors that “look nice together” but sit close in luminance: a mid blue on a mid green slices poorly even though your eye tells them apart. Test the ratio, not the appearance.
- The code placed on a photo or gradient: background luminance varies under the modules — some zones pass, others don’t. Keep a uniform background under the entire pattern, quiet zone included.
- Four-color printing converging tones: two colors distinct on screen can converge in CMYK print. Always test on the final medium.
- A tinted quiet zone: the light band around the pattern must stay light and uniform — coloring it breaks detection as surely as cropping the margin.
When brand guidelines fight the rules
Your brand color is coral, mint, or gold — all luminance-lightweights. Three honest workarounds that don’t sacrifice the code:
- Use the darkest tone of the palette for the modules, even if it isn’t the “hero” color; brand recognition survives a navy QR code on coral surroundings better than an unscannable coral code.
- Keep the code neutral — black on white — and let the branding live in the frame, the caption, and the page around it. A well-designed neutral code beats a branded code nobody can scan.
- On dark packaging, use a light cartridge: a white rounded box containing the whole code, quiet zone included, keeps both the dark substrate and full readability.
Color in the pattern, not around it
One last often-forgotten rule: only the modules may take the brand color. The code’s background — quiet zone included — stays a uniform light color. Reversing the logic (a dark motif bleeding into the margin, or a tinted, varying background) makes the code’s boundary undetectable to the reader. If you want color “around,” put it in the page design, not in the code.
The method in four points
- Pick a dark foreground (your darkest brand color) and a light background — white preferably.
- Check the ratio: the generator displays it and warns below 4:1.
- If the code also carries a logo, remember that logo + level-H correction and colors compound the constraints — test even more.
- Print one copy and scan it on several devices, in normal and low light.
Going further
Contrast rules stack with sizing rules: print size for dimensions and quiet zone, error correction for the safety margin.