QR Contrast & Accessibility Checker
Measure color contrast the same way WCAG evaluates text and UI: relative luminance and contrast ratio. Compare hex colors for your QR modules and quiet zone, or upload a QR image for a quick luminance split estimate—ideal before print, packaging, and brand-colored codes.
Contrast ratio
21:1
- ✓ WCAG AA — large text / UI (≥ 3:1)
- ✓ WCAG AA — normal text (≥ 4.5:1)
- ✓ WCAG AAA — large text (≥ 4.5:1)
- ✓ WCAG AAA — normal text (≥ 7:1)
For QR codes, many teams aim for at least ~4.5:1 between the dark modules and the light quiet zone so cameras can binarize the image reliably. This tool uses the same sRGB luminance pipeline as WCAG—pair it with physical print tests.
Why contrast matters for scannable QR codes
QR decoders turn your image into black-and-white modules. If foreground and background are too similar in luminance, the binarization step misclassifies pixels—especially under shadows, glossy laminate, or tinted glass.
WCAG contrast ratios were designed for text and user interface components, but the same luminance model is widely used as a sanity check for two-color QR designs. Use the hex tab for precise brand colors; use the image tab on exports from your design tool or a phone photo of a proof.
Design practices that keep contrast strong
Prefer dark modules on light quiet zones
Black or near-black on white or off-white remains the most forgiving combination across phones and lighting.
Test brand palettes early
Navy on gray, yellow on white, and pastel-on-pastel pairs often fail WCAG even when they look fine on a laptop screen.
Protect the quiet zone
Patterns, photos, or gradients that bleed into the margin reduce effective contrast at module edges. Keep a clean border around the symbol.
Proof on real material
Glossy ink, UV coating, and kraft stock change perceived contrast. Re-scan after print, not only on screen.
When to run a contrast check
- Before locking brand-colored QR artwork for packaging or retail displays
- After swapping template backgrounds (e.g. light mode → dark mode landing page tie-in)
- When scan rates drop and you suspect low light or reflective surfaces
- Before accessibility reviews for campaigns that claim inclusive design
Frequently asked questions
Is this the same as WCAG for web text?
We use the same relative luminance and contrast ratio formulas defined in WCAG 2.x for sRGB colors. QR scanning also depends on module size, focus, distortion, and camera exposure—so treat pass/fail here as one signal among several, not the whole story.
What contrast ratio should a QR code have?
There is no separate WCAG criterion named “QR codes,” but teams often treat 4.5:1 as a practical minimum between module color and background for marketing print, and higher when possible. Your validator and field tests remain authoritative.
Why does my uploaded image show a different ratio than my hex values?
Compression, anti-aliasing, shadows, and JPEG noise change pixel values. The image mode estimates contrast from rendered pixels, not from your design spec.
Can I use this for gradient or image backgrounds?
Hex mode tests two solid colors. If the background varies, test the worst-case area (lowest contrast patch) or simplify the quiet zone to a flat color behind the symbol.
Does passing WCAG mean every scanner will read my code?
No. WCAG contrast is about human-perceivable luminance difference. Scanners add their own thresholds, error correction, and autofocus behavior—use our QR Code Validator and real-device tests for the final sign-off.
Is my image uploaded to your servers?
No. Analysis runs in your browser; we do not store your files for this tool.
Next step: full QR validation
Upload your QR to decode content, check practical scan feedback, and review size guidance in one place.