Designing QR codes for colourblind users

Scanning is unaffected, by design

A QR decoder converts the camera frame to greyscale before it does anything else, then thresholds every module as dark or light. Hue never enters the pipeline. A code that meets the 40% luminance-difference rule scans identically for someone with protanopia, deuteranopia or complete monochromacy, because the decoder is, in effect, entirely colourblind itself.

So the common worry ("will our red brand code exclude colourblind customers?") has a clean answer. If the code scans for anyone, it scans for everyone. The real accessibility problems live in the material around the code.

The numbers

Red–green colour vision deficiency affects roughly 1 in 12 men (8%) and 1 in 200 women (0.5%). Deuteranomaly, a shifted sensitivity to green, is the most common form. Protanopia matters most for designers: it reduces sensitivity to red light, so reds appear markedly darker than they do to typical viewers. A red call-to-action on a black background can collapse into near-invisibility for a protanope, while the QR code beside it scans perfectly.

Where colour does exclude people

• Red-versus-green framing. "Scan the green code to order, the red one for WiFi" is unreadable guidance for the largest group of colourblind users.
• Colour-only legends. A poster with four codes keyed to coloured dots fails the same way. If the colours are the only differentiator, the legend carries no information.
• Red text on dark backgrounds. Because red darkens under protanopia, a red "Scan me" label on charcoal can sit below the same 40% luminance threshold the code itself must clear.
• Status colours. Green-means-valid, red-means-expired coding around coupon or ticket codes needs a second channel, a word or an icon.

Four rules that cost nothing

1. Distinguish codes by label and position, never by colour alone. Put a short text label under each one: see multiple QR codes on one page.
2. Never use red and green as the distinguishing pair for anything a user must tell apart.
3. Keep CTA labels dark-on-light, like the code. Sizing and weight guidance is in typography pairing.
4. Hold the 40% contrast floor everywhere. High luminance contrast is the one measure that helps every form of colour deficiency and low vision at once.

Note that colour vision deficiency is not the whole of accessibility: users with low vision or screen readers need different provisions, covered in accessible QR code design and alt text for QR codes.

The greyscale test

Preview the whole layout in greyscale: print it in black and white or apply a desaturation filter. If every code is still identifiable and every label still legible, colourblind users will manage, because you have removed hue as a carrier of meaning entirely. For the code itself, the validator reports the actual luminance contrast of your colour pair, which is the number that decides whether anyone can scan it.

FAQ

Can colourblind people scan QR codes?

Yes, without any difficulty. Decoders convert the image to greyscale and threshold on luminance, so hue plays no part in scanning. Any code with at least a 40% luminance difference between modules and background scans the same for all colour vision types.

What colours should I avoid in a QR code for colourblind users?

For scanning, the same rules as for everyone: dark modules on a light background with at least 40% luminance difference. For the surrounding design, avoid red-versus-green as the only way to tell codes or states apart, and avoid red labels on dark backgrounds.

Does a red QR code work for colourblind users?

A dark red code on white scans fine, the decoder only sees luminance. The caution is salience, not scanning: to protanopes red appears darker, so red accents on dark backgrounds lose visibility even though the code itself remains readable.

How do I test a design for colour blindness?

View the layout in greyscale. If codes are distinguishable and labels legible with hue removed, no form of colour vision deficiency will break the design. Simulation filters for protanopia and deuteranopia in browser dev tools are a useful second check.