Design
Accessible QR code design
Accessible QR design means never making the code the only path: pair it with a visible short URL, give digital codes real alt text, mount physical codes 1.2 to 1.4 metres high within reach ranges, and size generously beyond the 10:1 rule. QR contrast is luminance-based, so codes meeting the 40-point rule are inherently colourblind-safe.
The principle: never the only path
A QR code is an accelerator, not a door. Some readers cannot scan it (no camera, a screen reader, low vision, a tremor, a phone in the other hand on a moving bus), and an accessible design gives every one of them another way to the same destination. That single principle generates most of the concrete practices below.
Print a human-readable fallback. A short, typeable URL beside the code serves screen-reader users (whose device reads the text aloud), anyone whose camera fails, and everyone who distrusts unlabelled codes. The pairing pattern (and why it also functions as a security courtesy) is detailed on QR code next to a short URL fallback.
Give digital codes real alt text. An image that says "QR code" tells a
screen-reader user nothing actionable. Describe the destination and name the fallback:
"QR code linking to the event programme, also at example.com/programme". UseQR's SVG
exports ship with role="img" and an ARIA label as a floor, but the meaningful
description belongs in your embedding markup: the full patterns are on
alt text and screen readers.
Physical placement, in numbers
- Mounting height: 1.2–1.4 m to the code's centre. This keeps the code inside standard wheelchair reach-range guidance (roughly 380–1220 mm for an unobstructed reach) at its lower bound while staying near standing eye line, workable for both standing and seated scanning without stretching or stooping.
- Approachable straight-on. A code above head height or behind a counter forces angled scans, which cost sharpness for everyone and disproportionately punish users who cannot reposition, as covered in the placement guide.
- Size beyond the minimum. The 10:1 distance rule is calibrated for typical eyes and steady hands. For public-facing codes, doubling it (a 5:1 ratio, so a code scanned from 1 m is 20 cm wide) buys margin for low vision, hand tremor and older cameras at the cost of a few centimetres of layout. The size calculator gives the baseline to double.
Design choices that cost nothing
Colour vision is already handled, if you follow the contrast rule. Decoders and human colour-deficient vision agree here: both depend on luminance, not hue. A code meeting the 40-point luminance rule is readable under every common colour-vision deficiency, because no hue distinction carries information. The corollary: never rely on hue alone in the surrounding design either: "scan the green code, not the red one" is an inaccessible instruction.
On screens, hold the code still and long. Codes in presentations or video need generous dwell time, the reasoning and numbers are on minimum on-screen duration, and codes in animations or carousels should have a static alternative.
Verify like everyone depends on it. Run final artwork through the validator; a marginal code that healthy-sighted, steady-handed testers can coax into scanning is precisely the code that excludes everyone else. Accessible margin and engineering margin are the same margin.
FAQ
How do I make a QR code accessible to blind users?
Provide the destination as text: descriptive alt text on digital codes ("QR code linking to the menu, also at example.com/menu") and a visible short URL beside printed ones. Screen readers announce the text; the code itself remains a convenience for sighted users.
What height should a QR code be mounted at?
Centre it 1.2 to 1.4 metres from the floor for walk-up placements. That range is scannable from a wheelchair and by standing adults alike, and it keeps the code within common reach-range guidance for public spaces.
Are QR codes colourblind-friendly?
Inherently, when properly designed: scanning depends on luminance difference, not hue, so any code meeting the 40-point contrast rule reads identically under colour-vision deficiencies. Problems only arise when surrounding instructions rely on hue alone.
What size QR code helps low-vision users?
Bigger than the standard minimum: double the 10:1 distance rule to roughly 5:1. A larger code presents more pixels per module to the camera, tolerating shake, distance misjudgement and imperfect focus that smaller codes punish.
Try it: free, no signup
Related
- QR code design best practices: seven rules ranked, The seven design rules that decide whether a styled QR code scans, ranked by how often breaking them kills codes, with the number behind each rule.
- Alt text and screen readers for QR codes, How to write alt text for QR code images. State destination and action, never just "QR code", plus aria patterns and the clickable fallback screen readers need.
- Put a short URL next to every QR code, Why every printed QR code should carry a short, readable URL underneath, who it rescues, what it should look like, and how to lay the pair out.
- Minimum on-screen duration for a QR code, A primed viewer needs 8–12 seconds to unlock, aim, focus and decode. Show codes for at least 15–20 seconds, or keep them persistent in a corner.