QR-Code Color and Contrast Guidelines

A client once sent me a QR code they were thrilled with. Soft lavender modules on a pale mint background, tuned to match their new packaging. It looked genuinely lovely on screen. It also refused to scan under the fluorescent lights of the shop where the packaging would actually sit, because to a camera those two gentle colors were nearly the same shade of grey. The design was beautiful and the code was useless, and those two facts had nothing to do with each other.

That is the tension at the heart of coloring a QR code. A scanner does not see turquoise or burgundy. It sees a grid of dark cells and light cells and tries to draw a hard line between them. What decides success is not the color name but the luminance gap - how much brighter the light parts are than the dark parts - and whether that gap survives printing, screens, lighting, and the whole surface of the code from corner to corner. Get that gap wrong and you end up with one of the most common reasons QR codes fail to scan.

Keep dark on light, and keep it solid

The dependable baseline has not changed and probably will not: dark modules on a light, solid background. It is what every scanner expects and what every scanner handles well. Reversed codes, with light modules on a dark field, do work on some readers, but support is uneven enough that they are a bad default for anything the public has to scan on the first try. When it has to work for a stranger holding an old phone in bad light, do not gamble on inverted polarity.

Solid matters as much as dark. Avoid transparent backgrounds floated over a photograph, because the effective background then changes underneath every module - light where the photo is bright, dark where it is not - and the contrast collapses in patches you cannot predict. It may look fine on your monitor and fall apart the moment it is printed on a busy label or shown on a different screen. Give the code its own quiet, uniform field.

Read the contrast warning for what it is

HighEndDIY estimates contrast from the colors you pick and flags anything below a conservative threshold. That warning is a genuinely useful early filter. It is not, however, a QR-specific certification, and it helps to understand why.

WCAG contrast ratios were written for readable interface content - text and meaningful graphics a human eye has to parse. QR scanning is a different problem with different variables: camera sensors, exposure, focus, print dot gain, ambient light, and error correction all play a part that a color-ratio formula never captures. So use the warning the right way round. Let it reject weak combinations early and cheaply, then confirm the survivors by scanning the actual printed or displayed result. The formula narrows your options; the real-world scan decides, and how to test a QR code before printing it covers that full process.

And do not forget the words around the code. Headings, the fallback URL, and the call to action are ordinary readable content, so they should meet the applicable text-contrast requirements on their own terms. A perfectly scannable code sitting beside pale grey instructions nobody can read is only half a design.

Brand color without breaking the code

The most common real-world conflict is a brand color that is simply too light to be a foreground. The fix is rarely to abandon the brand. Derive a darker shade of the same hue for the modules themselves, and let the brighter, more recognisable color live where it belongs - in the surrounding design, the heading, the border outside the quiet zone. The eye still reads the palette as yours; the camera gets the contrast it needs. The same “let the brand live around the code, not inside it” idea applies to marks and logos too; see how to add a logo without breaking a QR code.

Keep the modules a single flat foreground color, too. Gradients look sophisticated and quietly sabotage codes, because a gradient makes the modules at the pale end weaker than the ones at the dark end, and scanning reliability is only ever as good as its worst region. One solid dark color, evenly applied, beats a gorgeous gradient every time. File format matters here too; see PNG vs. SVG QR codes for which one keeps flat color and sharp module edges intact through printing.

Then there is production, which is where confident color values go to die. Metallic inks, foil stamping, spot varnish, and different screen technologies can all render the same numeric color unpredictably - a value that looks deep on your calibrated monitor can come back from the printer glossy and reflective enough to blind a scanner. Ask for a physical proof and judge it under the actual lighting the code will live in, not under your studio daylight lamp.

Do not lean on color to carry meaning

When two codes sit near each other doing different jobs, resist the urge to distinguish them by color alone. Roughly one in twelve men has some form of color vision deficiency, and “scan the green one for the menu, the red one for the bill” fails all of them and confuses everyone else in poor light. Label each code in plain text, give each a readable URL fallback, and leave enough physical spacing that nobody has to guess which square belongs to which action. Color can reinforce the distinction, but text has to make it, one thread of the wider topic covered in QR-code accessibility.

A worked example

A design studio’s signature turquoise looks crisp on white and trips the low-contrast warning immediately. The tempting fix is to drop a heavy drop-shadow behind every module to force separation, which makes the whole code muddy and worse. Instead, the designer picks a deep teal for the modules - same family, far more luminance - and reserves the bright turquoise for the heading and a border placed outside the quiet zone. The finished piece still reads unmistakably as the studio’s, and it scans on the first try across the phones they test. The brand survived intact; it just stopped trying to do a job that belonged to a darker shade.

Sources and further reading

• w3.org

Found something that should be corrected? Email help@HighEndDIY.com.