QR Code Contrast Checker - Free Online Tool
Enter your QR foreground and background colours and find out whether the contrast is high enough to scan reliably.
Find this tool useful? Save it for next time.
How to check QR code contrast
Pick or enter the hex colour for your QR module colour (the dark squares) and your background colour (the light areas). The tool calculates the contrast ratio instantly and shows whether the combination meets the 4.5:1 threshold recommended for reliable scanning. A live mini preview shows what the colour combination looks like as a QR pattern so you can judge the visual result directly.
If the foreground colour is lighter than the background, a warning appears suggesting you swap the colours. QR codes should always have the darker colour as the module colour to ensure the widest compatibility with scanner hardware and software.
Why contrast affects QR scan reliability
QR decoding relies on distinguishing dark modules from light background cells. Camera sensors and image processing algorithms measure the intensity difference between adjacent cells to identify the boundaries of each module. When contrast is low, the boundary signal is weak and can be overwhelmed by noise from print grain, screen glare, shadows, or slight camera motion blur.
Low contrast is one of the most common reasons branded QR codes fail in the field. Designers often use soft brand colours - warm greys, muted greens, light blues - without checking whether the luminance difference is sufficient. The result looks attractive on screen but fails on print or in dim lighting. This tool catches those issues before the design goes to production.
The 4.5:1 threshold explained
The contrast ratio is calculated using the WCAG 2.1 relative luminance formula. A ratio of 4.5:1 means the lighter colour is 4.5 times more luminous than the darker one, accounting for how the human visual system and camera sensors perceive brightness non-linearly. Black on white gives 21:1 - the maximum. Ratios below 3:1 are generally unsafe for printed QR codes.
Tips for branded QR codes
- Use your darkest brand colour as the module colour and your lightest as the background
- Navy, dark teal, and deep charcoal all work well as module colours on white
- Avoid light pastels, mid-tones, or any colour with similar luminance to the background
- If you must use a coloured background, ensure it is lighter than the module colour
- Always test a printed sample before committing to a large print run
Frequently asked questions
What contrast ratio does a QR code need to scan reliably?
The ISO 18004 standard does not mandate a specific contrast ratio, but practical experience and camera system requirements point to 4.5:1 as a safe minimum. This is the same threshold as the WCAG AA accessibility standard, which is a convenient benchmark. Ratios between 3:1 and 4.5:1 will scan under good conditions but may fail in low light, on glossy substrates, or with lower-quality cameras. Ratios below 3:1 should be avoided for any printed application.
Can I use a coloured QR code instead of black and white?
Yes, provided the contrast ratio between the module colour and the background colour meets the minimum threshold. Dark navy or dark teal modules on a white or light cream background are common branded uses that scan reliably. Avoid combinations with similar luminance values, such as dark green on black or light yellow on white, regardless of how visually distinct they may appear to the human eye.
What is the WCAG AA and AAA contrast standard?
WCAG (Web Content Accessibility Guidelines) defines AA as a contrast ratio of at least 4.5:1 for normal text and AAA as at least 7:1. These thresholds were developed for screen readability, not QR scanning, but they are a useful proxy. A QR code that passes WCAG AA is generally safe to print. Passing AAA is ideal and ensures reliability on lower-quality printers and in challenging lighting.
Why does the tool warn me when the foreground is lighter than the background?
QR codes are conventionally encoded as dark modules on a light background. The QR specification and most scanner implementations assume this orientation. While modern smartphones can decode inverted (light-on-dark) QR codes, legacy scanners, embedded readers in kiosks, and some point-of-sale systems may not. Swapping to the conventional orientation eliminates this risk.
Can I use a white background with a very dark image behind the QR?
The contrast checker evaluates only the two hex values you enter - the module colour and the background colour of the QR code itself. It does not evaluate how the QR sits within a larger design. If your QR has a white background but is placed on a dark design element, the white background still provides the contrast the scanner needs, as long as the QR module colour is dark.
Does background colour matter if I print on coloured paper?
Yes. If you print a black QR on yellow paper, the effective background colour is the yellow of the paper, not white. Enter the paper colour as the background in the checker. Coloured paper substrates often reduce contrast compared to white paper, so this check is important for non-standard print jobs.
Is the contrast ratio the same as luminance difference?
No. The contrast ratio used by this tool is the WCAG relative luminance ratio: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is that of the darker. Relative luminance is a perceptual measure that applies gamma correction to the raw RGB values, meaning it reflects how human vision (and camera sensors) actually perceive brightness differences rather than the raw numeric difference between colour values.
My design tool shows a different contrast ratio - why?
Some tools calculate contrast differently, for example using sRGB values without gamma correction, or using a different formula entirely. This tool uses the WCAG 2.1 relative luminance formula exactly as specified in the standard. Small differences in the final digits can occur due to rounding, but if there is a large discrepancy, the other tool may be using a non-standard calculation.
Related Tools
QR Print Size Checker
Enter your intended print size and the tool tells you whether your QR code is large enough to scan reliably.
QR Quiet Zone Checker
Upload your QR code image and verify that the required quiet zone (empty margin) is present on all sides.
QR Logo Safe-Area Checker
Check how much of your QR code a centre logo covers and whether the scan is still likely to succeed.