colour & contrast

Best QR code colours and contrast (and which ones break scanning)

You can colour a QR code — but scanners read brightness, not hue. The safe dark-on-light rule, the traps that break scanning, and the palette that always works.

You can absolutely give a QR code your brand colour — plenty of them work. But the thing a scanner actually cares about isn’t colour at all: it’s contrast, and specifically brightness. Get that right and you can tint a code freely; get it wrong and it quietly stops scanning, however nice it looks. Here’s the rule, the traps, and the palette that always works.

Scanners see brightness, not colour

A phone doesn’t read your code in colour. It captures the image, converts it to greyscale, then decides each square is either “dark” or “light” by its brightness (luminance) alone. Hue is thrown away before the code is ever decoded. So a coloured code works only as far as its “dark” colour is genuinely darker than its “light” one. If the two are close in brightness, the phone can’t tell the squares apart, and it fails.

That one fact explains every rule below.

The safe rule: dark on light

Dark modules on a light background. Classic black-on-white is the maximum-contrast baseline, and every camera — and the QR standard itself — is built to expect it. For a bit of brand personality, a very dark colour on white (dark navy or near-black is the popular choice) keeps the contrast high while adding a tint. The target is always a genuinely dark colour against a genuinely pale background, never two mid-tones.

The trap: colours that look different but aren’t

Because the phone judges brightness, two colours can look obviously different to your eye yet map to nearly the same grey — and fail. Red on green is the classic example; a mid-blue on mid-grey is another. They read as “different colours” to you and “the same shade” to the scanner.

• Red and orange modules are risky. Their real contrast is usually lower than it looks on screen, and some scanners’ lighting washes them out further.
• Pale modules are worse. Yellow, light green or any pastel is too bright — the phone reads it as “light” and the pattern vanishes.

Pick your dark colour by how dark it is, not by whether it “looks different” from the background.

Don’t invert it

A light code on a dark background (an inverted or “negative” code) is a gamble. Some modern scanners — recent iPhone cameras especially — will spot an inverted code, flip it, and read it anyway. Plenty won’t: many Android cameras, older phones and some scanner apps assume dark-on-light and simply fail. For anything that has to work for strangers, don’t invert. If you need a dark look, put a normal dark-on-light code inside a light-coloured box rather than inverting the code itself.

About that “contrast ratio” number

You’ll see blogs quote a required contrast ratio — 4.5:1, 7:1, and so on. Be a little wary: there is no official QR contrast-ratio spec. Those figures are borrowed from web-accessibility rules for text and applied as rules of thumb; the QR standard grades contrast as a brightness difference, not a ratio.

So don’t treat any “X:1” as law. The honest guidance is simpler: black-on-white is effectively maximum, stay well clear of anything borderline, and if you want a number to sanity-check against, treat roughly 3:1 against white as a rough floor — more is safer — and know it’s a rule of thumb, not a standard. (It’s the same rough floor we use in why won’t my QR code scan?.)

Keep the background and margin clean

• Plain, pale background. A photo or busy pattern behind the code adds competing edges and uneven brightness that throw the scanner off. Keep whatever sits behind the squares plain and light.
• Leave the quiet zone the same light colour. The blank margin around the code (about four squares wide) is how the scanner finds the code’s edges — don’t colour it dark or fill it with a pattern.

Gradients and error correction won’t save a weak palette

A gradient on the modules is only safe if even its lightest point stays clearly darker than the background everywhere — in practice that means dark-to-dark (say, dark blue into dark purple). Solid, uniform dark is the most reliable.

And don’t reach for high error correction to rescue low contrast: that recovers missing or damaged squares (a scratch, an overlaid logo), not a whole code the scanner can’t separate from its background. Cranking it up just makes the grid denser — smaller squares — which usually makes a marginal code worse, not better. There’s more on that trade-off in what makes a good QR code.

Always test on two phones

Because inversion support, camera quality and lighting all vary, a coloured code that scans on your phone can fail on someone else’s. Before any print run, test on at least one iPhone and one Android, at the real print size and in the real lighting — the same care you’d give the size you print it at.

Colour it safely at dottr

dottr keeps the background white and the quiet zone clear for you, lets you pick the code colour, and warns you the moment the colour is too pale to scan reliably — its check flags anything under about 3:1 against white. You get a live preview to eyeball before you export, too. It’s free, runs entirely in your browser, and nothing you type ever leaves your device.