QR Code Colors: How to Customise Without Losing Scannability

How QR Scanners Actually Work

To understand QR code color rules, it helps to know what a scanner is actually doing. A QR scanner (whether it's a dedicated device or a smartphone camera) captures the code as an image and then processes it to find the finder patterns (the three square markers in three corners), establish the grid orientation, and read each module (the small squares that make up the pattern) as either "on" (dark) or "off" (light).

The critical word is "dark" and "light," not "black" and "white." The scanner works by detecting the luminance contrast between the foreground modules and the background. It doesn't care that your foreground is #003366 (dark navy) rather than #000000 (black). What it cares about is whether the foreground is sufficiently darker than the background for the algorithm to reliably distinguish one from the other.

This is good news for designers, because it means a wide range of color combinations are technically viable. It's also the source of most QR code color mistakes, because people assume any color change is safe as long as it "looks different enough" to the human eye, but the camera algorithm doesn't always agree.

The Minimum Contrast Rule

The core rule for QR code colors is simple: the foreground (dark modules) must be significantly darker than the background (light modules). The QR code specification doesn't prescribe an exact ratio, but in practice, a luminance contrast ratio of at least 4:1 is the widely cited threshold for reliable scanning across different lighting conditions and camera qualities.

For reference, pure black (#000000) on pure white (#ffffff) gives a contrast ratio of 21:1, the maximum possible. This is why standard QR codes are so universally reliable. As you introduce color, that ratio drops, and you need to be mindful of how far it drops.

You can check the contrast ratio of any two colors using a WCAG contrast checker (the same tools used for web accessibility). Enter your foreground and background hex codes and the tool gives you the exact ratio. Aim for 4:1 as a minimum; 7:1 or higher gives you a comfortable safety margin across diverse scanning conditions.

Why Inverted QR Codes Often Fail

An inverted QR code (light modules on a dark background) might look striking, but it fails to scan more often than not. The reason is that QR scanners are designed with the expectation that dark modules sit on a light background. Most scanning algorithms begin by looking for dark finder patterns against a light field. When this is reversed, the algorithm struggles to locate the code at all.

Some modern smartphone cameras and high-end scanners can handle inverted codes, but many cannot, particularly older devices and dedicated barcode scanners. For any QR code intended for public use, where you cannot control the device being used to scan, inverted color schemes are a significant reliability risk. The general advice is to avoid them entirely unless you have tested extensively across a wide range of devices and can confirm reliable scanning.

If you want a dark-background aesthetic for your design, the safer approach is to use a dark-but-not-inverted combination: very dark foreground modules on a moderately dark (but still distinctly lighter) background. Dark charcoal on a medium grey, for instance, maintains the correct dark-on-light relationship while giving a darker overall feel. But test carefully, as the margin for error is narrow.

Safe color Combinations

The following combinations are reliably scannable because they maintain strong luminance contrast with the correct dark-on-light orientation:

• Dark navy blue (#003366) on white or cream: a professional, frequently used combination for corporate materials
• Dark forest green (#1a5c2a) on white: works well for environmental, food, and lifestyle brands
• Deep burgundy (#6b1a2a) on white or light grey: elegant and distinctive for premium or hospitality brands
• Dark brown (#3b1a00) on white or cream: appropriate for craft, food, and heritage brand aesthetics
• Black on light yellow or light blue: the dark foreground on a light (not white) background maintains good contrast
• Dark purple (#3a006f) on white: distinctive and readable, used effectively in tech and creative brand contexts

The common thread: the foreground color always has a low luminance value (dark), and the background always has a high luminance value (light). The specific hues matter less than this fundamental relationship.

Unsafe color Combinations to Avoid

These combinations fail frequently and should be avoided:

• Yellow on white. Yellow has high luminance: it's a light color, not a dark one. Yellow modules on a white background have almost no contrast and will fail to scan.
• Red on green (or green on red). Even though these colors look different to human eyes, they have similar luminance values. A scanner operating in greyscale (which is how most process the image) sees very little contrast between them. This combination also fails for users with red-green color blindness.
• Light blue on white. Similar luminance, insufficient contrast. The code may scan inconsistently depending on lighting.
• Orange on yellow. Both are high-luminance colors. The contrast is low and scanning is unreliable.
• Any pastel foreground on a white or light background. Pastels are by definition desaturated and light. They lack the darkness required to create sufficient contrast with a white background.
• Two colors of similar darkness. For example, dark red modules on a dark blue background: both have low luminance, so there's insufficient contrast between them even though they're different colors to the human eye.

The Problem with Gradient Backgrounds

Gradient backgrounds are a popular design choice, but they introduce a specific QR code problem: the contrast ratio changes across the code. A gradient that starts light and ends dark means the foreground modules at one end have good contrast while the modules at the other end have poor or reversed contrast. The result is partial scanning failures: the algorithm reads part of the code correctly and fails on the rest.

If you want to use a gradient in the broader design, keep the QR code itself in a solid-color zone. Give it a plain white or light-coloured bounding box that sits within the gradient design but provides the code with a consistent, high-contrast background. This is a common and effective solution used in polished branded materials.

Similarly, avoid placing a QR code directly on top of a photograph or textured background. The varying tones of an image create unpredictable contrast across the code modules, resulting in unreliable scanning. Always use a solid, high-contrast background for the code itself, even if that means a white rectangle within a more complex design.

Matching Brand colors: A Practical Approach

For brands that want a QR code that looks unmistakably on-brand, the approach is to identify the darkest colors in your palette and test them as the foreground against a white or light-coloured background. Most brand guidelines include at least one dark anchor color, such as a deep version of the primary hue or a neutral like navy, charcoal, or dark brown, that works well.

If your brand is built around lighter colors (a pastel palette, for instance), the most pragmatic solution is to use a dark neutral (very dark grey or black) as the QR foreground and your brand's lightest color as the background. This keeps the code on-brand through background color while ensuring the foreground retains sufficient darkness.

You can also add a logo to the center of the QR code. QR codes include error correction at four levels (L, M, Q, H), with the highest level (H) allowing up to 30% of the code to be obscured while remaining fully scannable. A logo placed in the center at roughly 20-25% of the total code area sits comfortably within this tolerance. Use the highest error correction level (H) when you intend to add a logo.

Testing Across Lighting Conditions

A QR code that scans perfectly at your desk may behave differently in the real world. Outdoor use in direct sunlight, under fluorescent office lighting, in dim restaurant settings, or photographed through a window all change how a camera processes the image. Before finalising any QR code for print or display, test it across a range of conditions:

1. Indoor bright light (office or home)
2. Outdoor daylight (sunny and overcast)
3. Dim indoor light (restaurant or event setting)
4. On a printed surface (not just a screen), as ink and paper affect color and contrast differently than a monitor
5. From the expected scanning distance: a yard sign viewed from two metres, a flyer held at arm's length, a screen in a presentation from the back of the room

Test with multiple devices too. An iPhone flagship camera will scan under more adverse conditions than an older Android mid-range. Your code needs to work for all of them, not just the best camera in the room.

Frequently Asked Questions

Can I use white modules on a coloured background?

Technically this maintains a dark-on-light relationship as long as the background is sufficiently dark, but it's essentially an inverted code (light modules, dark background), which scanner algorithms often struggle with. It's safer to use dark modules on a light or white background in all cases.

Why does my coloured QR code work on my phone but fail on others?

Different camera sensors and scanning algorithms have different contrast sensitivity thresholds. A high-end phone camera with a fast, intelligent scanner may read a low-contrast code that an older or lower-spec device cannot. Always test your code on multiple devices and assume the worst-case scanning environment.

Does adding a logo to the center really not break the code?

As long as the logo covers no more than about 25% of the total code area and you have generated the code with high error correction (level H), the built-in redundancy in the QR standard handles the obscured modules. The scanner reconstructs the missing data using the error correction information. This is a well-established and reliable technique when done correctly.

What's the safest QR code color if I want something other than black?

Dark navy blue on a white background is the most commonly recommended alternative to standard black. It has very high contrast, looks professional across print and digital contexts, and is widely supported by all scanning algorithms. It's a reliable starting point for branded QR code design.

Is there a tool to check if my QR code colors are safe before printing?

Use a WCAG contrast ratio checker (search "contrast ratio checker") to verify that your foreground and background hex codes produce a ratio of at least 4:1 - ideally 7:1 or higher. Then generate your code and test it by scanning the on-screen version before sending anything to print. Physical print testing is the final step, as colors shift between screen and print, so what looks fine on screen may have lower contrast once printed.