QR QR Studio

design

QR code colours and contrast that still scan

Published 7 September 2026 · 2 min read

A scanner does not see colour. It turns the picture into shades of grey and decides, square by square, whether each one is dark or light. Every colour rule for QR codes comes from that one fact.

Rule 1: measure the brightness gap, not the hue

The number that matters is the contrast ratio, the same one web designers use for text. Black on white is 21 to 1. The contrast checker calculates it for any pair.

RatioVerdict
7 to 1 or moreExcellent. Scans in poor light, on gloss, on old phones
4.5 to 7Good for print and screens
3 to 4.5Marginal. Expect failures in dim rooms
Under 3Do not print it

Do this

Deep purple modules (#4B3FBF) on cream (#FFF8EE). Ratio about 8 to 1.

Not this

Coral modules (#FF7F50) on white. Ratio 2.5 to 1. Looks lively, fails in a café at night.

QR code encoding https://getqrstudio.app/scan?c=colours-1
Black on white, 21 to 1.
QR code encoding https://getqrstudio.app/scan?c=colours-2
Purple on cream, about 8 to 1. Fine.
QR code encoding https://getqrstudio.app/scan?c=colours-3
Coral on white, 2.5 to 1. Try it in dim light.

Rule 2: dark modules, light background

The specification assumes dark squares on a light background. Modern phone cameras, including every iPhone, will also read the inverse, but many dedicated scanners, older Android apps and some point-of-sale devices will not. If the code will only ever be scanned by phones you control, an inverted code is a choice. On a public poster it is a gamble. The inverted codes guide covers the exceptions.

Do this

A black code on a white tile placed on the dark brand background.

Not this

White modules straight onto the dark brand background, so the whole poster is one inverted code.

Rule 3: brand colours go on the modules, if they are dark enough

Most brand palettes have one colour that passes: the navy, the forest green, the deep red. Use that for the modules and keep the background white or near-white. If every brand colour is light, keep the code black and use the brand colour for a frame or a tile behind it.

Do this

Modules in the brand's dark teal (#0B5C5A), white background, brand orange in the frame text.

Not this

Modules in the brand orange (#F5A623) because it is the primary colour. Ratio 2 to 1.

Rule 4: gradients and patterns are fine until they are not

A gradient from navy to black is fine. A gradient from navy to sky blue fails where it goes light. Photographic fills fail wherever the photo has a light patch. Test the lightest point.

Common mistake

Approving the code on a bright screen. Screens add contrast. Print it and look at it under the light where it will live.

Rule 5: paper and lighting eat contrast

Glossy paper reflects the room. Coloured paper tints the background. Dim light and shadows narrow the gap further. Every one of these takes a chunk of your ratio, so start with more than you think you need.

Try it in QR Studio

QR Studio shows the contrast ratio as you pick colours and blocks export below 3 to 1 unless you confirm you know what you are doing.

Checklist

  • Contrast ratio of 4.5 to 1 or better, checked with the tool
  • Dark modules on a light background, or a deliberate and tested exception
  • Gradient’s lightest stop checked on its own
  • Tested printed, on the final paper, in the final lighting
  • Scannability tester run on the exported artwork

Try it yourself

Enter your brand colours and see the ratio, the verdict, and a live code you can scan with your phone.

Check your colours

Frequently asked questions

Can a QR code be any colour?

The modules can be any colour dark enough against the background. Navy, forest green, burgundy, charcoal and deep purple all scan as well as black. Yellow, orange, light grey and pastels do not.

Can the background be coloured?

Yes if it stays light. Cream, pale grey, pale blue and light yellow all work. The rule is the difference in brightness, not the colour.

Do gradients scan?

Only if every colour in the gradient passes on its own. Check the lightest stop against the background.

Why does my red-and-green code fail?

Red and green look different to you but have similar brightness. To a scanner in greyscale they are nearly the same shade.

Related reading

Make yours in QR Studio

Unlimited static codes free, no ads, no watermark. AI design, dynamic codes and print-ready export when you need them.

Download on the App Store