QR Code Colours and Custom Design

The science of colour in QR codes

QR code scanners work by detecting the contrast between dark modules and light background. Most smartphone cameras use luminance contrast — the difference in brightness between the dark and light areas — rather than colour contrast. This has specific implications for colour choices.

Colors that appear visually distinct but have similar luminance (brightness) values can fool the scanner. Red and green of similar brightness are a classic example: they look completely different to human eyes, but have similar luminance values, so such a pairing would have poor scan reliability even though it looks colourful.

The safest custom colour combinations: - Dark colour (any shade with luminance below 30%) on white or very pale background - Desaturated (muted) versions of brand colours work better than fully saturated versions - Navy, dark teal, dark forest green, dark purple, dark brown: all reliable module colours on white

Colors to avoid as module colours: - Bright red, bright orange: insufficient luminance contrast with many backgrounds, and older red-laser or infrared scanners cannot see red at all - Yellow: very low luminance contrast against white - Medium grey: marginal contrast, unreliable on mid-toned backgrounds - Any colour lighter than approximately 40% grey

Gradient and pattern modules

Some QR code generators allow gradient fills within modules or patterned backgrounds. These can produce visually striking codes but require careful testing.

Gradient modules: a gradient that transitions from a dark module colour to a lighter version can work if the darker portion of the gradient (at the module edges where contrast is measured) remains dark enough. Gradients that lighten toward white at module edges are problematic.

Patterned backgrounds: a subtle pattern or texture behind the QR code can work if the pattern's average luminance is light enough. Dark patterns behind the code create local contrast ambiguities that scanners struggle with.

Decorative module shapes: some generators allow the square modules to be replaced with circles, rounded squares, or other shapes. Circular or rounded modules scan reliably because the scanner identifies module centres rather than exact edges. Very complex shapes that alter the centre of mass of each module can cause orientation issues.

Logo placement and sizing

Adding a logo to the centre of a QR code is supported by the Reed-Solomon error correction built into the standard. At error correction level H, up to 30% of the code's data can be damaged or obscured and still reconstruct. A centred logo takes advantage of this.

Logo sizing: the logo should not exceed 20–25% of the total code area. At this size, recovery is reliable at error correction level H. Going larger — 30%, 35% — reduces reliability progressively. At 40% coverage, many scanners fail even at level H.

Calculating 20% of code area: if your QR code is 400×400 pixels, the total area is 160,000 pixels. 20% is 32,000 pixels, which corresponds to a logo of approximately 179×179 pixels maximum.

Background behind the logo: the logo should be placed on a white background circle or square (called a logo frame or padding). This prevents the logo from visually bleeding into surrounding modules. The white frame itself counts as part of the 20–25% coverage limit.

File format for logos: PNG with transparent background is ideal because the scanner reads through the transparent areas and encounters only the white frame and the logo itself. JPEG files add a white square regardless of the original image, which is fine functionally but affects the visual result.

The finder patterns and timing strips: never modify these

A QR code has three structural elements that scanner software uses to identify and orient the code: the three square finder patterns in three corners, and the alternating black-and-white timing strips running between them.

These elements must not be modified. Any change to the finder patterns — wrong colour, wrong proportions, decorative modification — prevents the scanner from identifying the code as a valid QR code. Timing strips with altered colours or patterns cause grid coordinate errors that produce incorrect data even if the scanner detects the code.

Many QR customisation tools protect these areas automatically. If you are editing QR code graphics manually in a design application, be aware of where these elements are and leave them unchanged.

Testing custom QR codes: the multi-device protocol

Custom QR codes require more thorough testing than standard black-and-white codes, because the modifications introduce variables that can affect specific scanner algorithms differently.

Test protocol for custom QR codes: 1. Test on three or more different devices: at minimum, one recent iPhone, one recent Android flagship, and one older or mid-range Android phone (representing typical users who may not have the latest hardware). 2. Test in three lighting conditions: bright natural light, typical indoor artificial light, and dim indoor light (candlelight-equivalent). 3. Test at the intended deployment size — print a physical copy and test it, not the screen display. 4. Test with the quiet zone exactly as it will appear in production. Sometimes design layouts trim the quiet zone.

If the code fails on any of these combinations, identify which is failing and adjust either the colour contrast, the logo size, or the quiet zone accordingly.

Brand consistency vs. scan reliability: finding the balance

The goal of QR code customisation is to increase scan rates by making codes more visually engaging and brand-consistent. But customisation that reduces reliability produces the opposite of the intended effect — users try to scan, the code fails, and the brand interaction is negative.

The safest approach to brand-consistent QR codes: 1. Use your darkest brand colour (or the darkest that still has strong luminance contrast with white) as the module colour. 2. Keep the background white or very light — a pale tinted version of a brand colour that remains near-white is fine. 3. Add a logo at 15–20% coverage with error correction level H. 4. Test on multiple devices before using on physical materials.

This produces a branded code that matches corporate visual standards, scans reliably across all modern devices, and creates a positive first impression.