The Business Case for Accessible QR Codes
Accessibility isn't a nice-to-have; it's good business. Accessible sites convert better, rank higher in search engines, and reduce liability under WCAG (Web Content Accessibility Guidelines) and laws like the ADA and AODA. A visually impaired person who can't scan your QR code is a lost customer. Design for accessibility and you capture more of the market.
QR Code Design for Low Vision Users
Size and Contrast
Low vision users struggle with small QR codes and poor contrast. Follow these guidelines:
- Minimum size: 2.5 cm (1 inch) square for standard viewing distance. If the viewing distance is greater (e.g., a billboard), scale proportionally.
- High contrast: Use pure black (RGB 0,0,0) for the code modules and pure white (RGB 255,255,255) for the background. Avoid light greys, pastels, or weak contrast ratios.
- Quiet zone: Maintain a clear border (at least 4 modules wide) around the code. This improves scannability for all users, especially those with tremors or vision issues.
- Avoid overlays: Don't place text or decorative elements directly over the QR code. Place CTAs and descriptions below, not on top.
color Choice for color Blind Users
If you're customising QR code colors, avoid combinations that color blind users can't distinguish:
- Red-green contrast: About 8% of men have red-green color blindness. Avoid red modules on a green background (or vice versa).
- Blue-yellow: Less common but still relevant. Blue and yellow have better contrast and are safer choices.
- Safe approach: Black on white, dark blue on light grey, or dark green on white work for all color blind variants.
Destination Page Accessibility (WCAG 2.1)
A scannable QR code is only the beginning. The destination must be accessible or you've wasted the scan.
Heading Hierarchy
Use proper H1, H2, H3 tags, not styled divs. Screen readers rely on heading hierarchy to navigate pages. One H1 per page, followed by logical H2 and H3 tags, allows users to scan content structure without reading everything.
Alt Text for Images
Every image needs descriptive alt text. "Click here" doesn't work; "25% off spring collection-limited time" does. Keep alt text concise but informative. If an image is purely decorative, mark it as such (alt="") so screen readers skip it.
Form Accessibility
Many QR codes link to sign-up or checkout forms. Ensure:
- Every form field has a visible label, not just a placeholder.
- Error messages are clear and linked to the problematic field.
- Required fields are marked with an asterisk or "required" text, not just visual cues.
- Tab order is logical (left to right, top to bottom).
color Contrast Ratios
Text color must have sufficient contrast against the background. WCAG 2.1 AA requires at least 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Use a contrast checker tool before launch.
Keyboard Navigation
All interactive elements must be accessible via keyboard, not just mouse. Users with motor disabilities rely on keyboard navigation. Test your QR code destination by using only the Tab key and arrow keys-can you complete the intended action?
Video and Audio Captions
If your QR code links to a video, include captions for deaf and hard-of-hearing users. For audio content, provide transcripts. Captions also improve engagement for users watching in noisy environments.
Plain Language
Use simple, clear language. Avoid jargon, complex sentences, and ambiguous instructions. A visually impaired person using a screen reader needs to quickly understand the page. Clear, concise writing helps everyone.
Testing for Accessibility
Manual Testing
Test your QR code on actual devices with different vision capabilities. Zoom in on the code from various distances. Print it and view it under different lighting. Ask users with visual impairments to test and provide feedback.
Screen Reader Testing
Use free tools like NVDA (Windows) or VoiceOver (Mac/iOS) to experience your destination page as a blind user would. Listen for logical flow, clear navigation, and readable content.
Automated Testing
Tools like Axe, WAVE, and Lighthouse automatically flag accessibility issues. Run these on your QR code destination before launch. They're not comprehensive but catch obvious errors quickly.
Legal Considerations
The ADA, AODA, EN 301 549, and other laws require digital accessibility. If your QR code is part of an advertisement or customer-facing material, courts have ruled that the destination must be accessible. Non-compliance can result in lawsuits and fines. Accessibility is a legal requirement, not optional.
Frequently Asked Questions
Can I use a coloured QR code if it's large and high-contrast?
Yes. A large, high-contrast coloured QR code is scannable. However, avoid problematic color combinations (red-green, light greys) and always test on actual devices. When in doubt, black on white is the safest choice.
Do I need to provide a text alternative next to the QR code?
Ideally, yes. Print the URL or a shortened URL below the QR code. Some visually impaired users can't scan but can type a URL. Others prefer the simplicity of a QR code. Offering both options is inclusive.
How do I test if my destination page is accessible?
Use automated tools (Axe, WAVE, Lighthouse) for a quick baseline, then manually test with a screen reader. Ask friends or colleagues with disabilities to test and provide feedback. Real user testing is always more revealing than automated tools.
What's the minimum contrast ratio for QR codes?
Most QR code readers can handle 3:1 contrast ratio, but 4.5:1 or higher is safer for users with low vision. Pure black on pure white (21:1) is ideal but not always practical for branded designs.
Should I avoid custom QR code shapes or logos?
Custom shapes and logos are fine if they're subtle (less than 20% of the code area) and the code is otherwise high-contrast and large. However, simple, unadorned black-and-white codes are most scannable and accessible. Test any customisation thoroughly.