QR code contrast checker
Choose a color for the code and one for the background. The checker gives the contrast ratio, says whether the pair scans, and shows a QR code in those colors.
Examples
Result
Scans well
10.9:1
- Contrast: at least 4.5:1, good.
- Dark code on a light background, as scanners expect.
How the check works
A phone camera tells the dark modules from the light ones by their brightness, not their hue. Red on green can look loud to us and still be almost the same brightness to a camera.
The checker measures brightness with the WCAG 2 contrast formula, from 1:1 (the same color) to 21:1 (black on white). There is no contrast number in the QR code standard, so we use the thresholds of the Pretty QR print test: 4.5:1 or more passes, 3:1 to 4.5:1 is risky, and under 3:1 fails.
It also checks the direction. Scanners expect dark modules on a light background. Light modules on a dark background, an inverted code, are read by many current phones but not by all scanners.
Questions
- What contrast does a QR code need?
- At least 4.5:1 between the code color and the background, measured with the WCAG 2 formula. 3:1 to 4.5:1 often works in good light but fails more often in a dim room or on glossy paper.
- Can a QR code be any color?
- Almost. Use a dark color for the code and a light one for the background, with enough contrast. Navy, dark green, burgundy, and dark purple work well; yellow, light grey, and pastel codes usually do not.
- Do inverted QR codes (white on black) scan?
- Many current phone cameras read them, but some scanner apps and older phones do not. If you need light on dark for the design, test it with several phones before you print.
- What about gradients?
- Check the lightest color of the gradient against the background. The weakest part of the code decides whether it scans.
- Does a transparent background work?
- Only if what is behind it is light. The camera sees the paper, the wall, or the photo under the code, so check the code color against that.