QR code colors that still scan

Scanners read contrast, not color

A scanner does not see red or blue. It reduces the image to greyscale and looks for a light-dark difference between the modules and the background. Any color pair works if the luminance gap is wide enough, and any pair fails if it is not — including pairs that look strikingly different to your eye.

The useful measure is contrast ratio, the same one used for web accessibility. Black on white is 21:1. For print, aim for 7:1 or better and treat anything under 4:1 as a code that will fail somewhere: a dim room, a cheap camera, a worn label, a phone held at an angle.

Keep the code darker than the background

Dark modules on a light background is what every decoder expects. It is what the specification describes, and it is what hardware scanners, older phones and in-app scanners assume before they try anything clever.

Inverted codes — light modules on a dark background — do work on many modern phones. The iOS camera and Google Lens usually handle them. But a lot of in-app scanners, older Android handsets and almost every dedicated laser or imager scanner will not invert, so an inverted code silently loses you a slice of your audience with no error message and no way to know.

If the design really needs a dark surface, do not invert. Print a light plate behind the code — a white or cream panel with the full quiet zone inside it — and keep the modules dark. It looks deliberate and it scans everywhere.

Safe and risky color pairings

Contrast ratios below are approximate and calculated the WCAG way, code color against background color. Anything in the safe band has margin left for bad light and cheap cameras.

Why red is the repeat offender

Red carries very little luminance for how loud it looks. Pure red on black measures around 5:1 on paper but collapses in practice, because the camera's red channel is the noisiest one and warm indoor lighting shifts white balance further against it. Dark red on black lands near 2:1 and simply does not decode.

The same trap catches yellow and orange from the other end. They read as bright to the eye, so designers pair them with white, where the luminance gap is almost nothing. Yellow on white is about 1.4:1 — a code you can see clearly and a scanner cannot read at all.

The finder patterns are not decoration

The three large squares in the corners are the finder patterns, and a smaller alignment square sits near the bottom right on all but the smallest codes. The scanner uses them to locate the code, work out its orientation, and correct for angle before it reads a single data module.

They must stay the darkest, highest-contrast part of the image. Tinting them a lighter accent color, filling them with a gradient, outlining them with a thin stroke, or letting a logo or photograph overlap them are all reliable ways to build a code that looks great and scans intermittently.

Restyling their shape is a different matter and it is fine. Rounded or circular finder patterns keep the same light-dark relationship while changing the outline, which is why style options exist. Changing their contrast is the thing to avoid.

Gradients, photos and transparency

A gradient across the modules is safe only if every stop in it clears your contrast floor against the background. A gradient running from deep navy to pale sky blue will scan at one end of the code and fail at the other, which is worse than failing outright because it passes your first test.

• Keep gradients inside a narrow, dark range — for example #1E1B4B to #4338CA, never navy to white.
• Apply gradients to the modules only. Leave the background a single flat, light color.
• Never lay a code directly over a photograph. Put it on a solid light plate with the whole quiet zone inside that plate.
• Avoid semi-transparent codes over video or imagery. The background moves and the contrast goes with it.

Using brand colors without breaking the scan

Most palettes contain something dark enough to work. Take the darkest color in the brand, check it against white, and if it clears 7:1 you can build the entire code from it and still be on brand.

If the brand color is light or mid-tone, spend it somewhere other than the modules: as the background behind a near-black code, as the frame or panel around it, as the call-to-action text underneath, or as the logo in the center. The code itself stays dark and everything around it carries the brand.

A center logo adds its own constraint. Keep it under roughly 20 to 25 percent of the code area and raise error correction to Q (about 25 percent recovery) or H (about 30 percent) so the covered modules can be reconstructed.

How to check before you print

Three checks catch nearly everything, and all of them take less time than a reprint.

• Run the two hex values through any WCAG contrast checker. Under 4:1, change something. Between 4:1 and 7:1, test hard before committing.
• Screenshot the code and desaturate it to greyscale. If the modules and background blur together in grey, that is exactly what the scanner gets.
• Print at final size on the final stock and scan with three phones, at the real distance, in the real lighting — including one in-app scanner, which is stricter than the native camera.