Accessibility & Contrast Guidelines
This page provides practical guidance to ensure QR codes scan reliably across print and digital placements. Follow these recommendations during design, export, and pre-flight testing.
Size and viewing distance
• Minimum size — As a rule of thumb, make the code at least one-tenth of the expected viewing distance.
Examples: handheld/arm’s-length ≈ 0.8–1.2 in (20–30 mm); countertop ≈ 1.5–2 in (38–50 mm); posters/walls ≈ ≥ 1/10 of viewing distance.
• Larger is safer — Increase size when the surface is textured, the viewer is moving, or lighting is variable.
Quiet zone (clear margin)
• Keep a clean border — Maintain an empty margin around the code equal to at least four modules (the smallest square in the code) on all sides.
• Match the background — The quiet zone should use the same light background as the code’s interior; do not place text, logos, frames, or artwork inside this margin.
Contrast and color
• High contrast — Use a dark code on a light background. Avoid low-contrast brand pairings (for example, mid-gray on light gray).
• Solid shapes — Keep modules solid and crisp. Avoid gradients, drop shadows, outlines, or effects that soften edges.
• Reversed/light codes — If you must place a light code on a dark background, test extensively; ensure the quiet zone remains light and unobstructed.
Print considerations
• Materials — Prefer matte or uncoated stocks; glossy finishes can create glare. If using glossy materials, increase size and test in realistic lighting.
• Production quality — Use vector (SVG) for print when possible. If raster is required, export at sufficient pixel density (commonly 300 dpi at final size).
• Curved or textured surfaces — Increase size and test on the actual substrate (bottles, corrugate, fabric).
Digital considerations
• Pixels and scaling — Serve assets at or above displayed size. Avoid CSS or layout scaling that blurs edges. Provide higher-density assets for HiDPI screens when needed.
• Backgrounds — Place codes on stable, light backgrounds. Avoid moving imagery or patterns behind the code or within the quiet zone.
• Dark mode — If the surrounding UI can switch themes, ensure the code and its quiet zone remain high-contrast in both states.
Placement and context
• Viewing angle — Favor flat, front-facing placement. If angled, increase size to compensate.
• Crowding — Keep sufficient space from other barcodes, dense patterns, or competing elements that could confuse autofocus.
• Call to action — Provide a short instruction (for example, “Scan for details”) near the code so users understand the purpose.
Testing checklist
• Final size, real media — Test on the actual print/digital artifact at 100% scale.
• Multiple devices — Scan with recent iOS and Android devices, native camera apps, and common QR readers.
• Lighting and distance — Test in bright, dim, and mixed lighting at expected viewing distances.
• Network and destination — Confirm the destination loads quickly over Wi-Fi and cellular and that UTM parameters (if used) are present and tracked in GA4 Real-Time.
Troubleshooting
• Blurry edges or slow focus — Increase physical size, re-export at higher resolution (PNG/JPG) or switch to SVG for print.
• Low scan rate — Improve contrast, enlarge the quiet zone, and reduce visual clutter around the code.
• Glare or reflections — Use matte materials, relocate the code, or increase size to compensate.
• Unexpected attribution — Verify that the final URL contains a single, correct set of UTM parameters and that redirects preserve them.