Custom-colored QR codes look professional and on-brand. But get the colors wrong and the code fails to scan entirely — which defeats the purpose. This guide explains the design rules that determine whether a colored QR code will scan reliably, and gives concrete color recommendations for common branding scenarios.

The Fundamental Rule: Contrast

QR code scanners work by detecting the contrast between dark modules (squares) and light background. The scanner needs to distinguish clearly between the two. The WCAG contrast ratio standard — originally designed for text accessibility — provides an excellent benchmark: aim for a contrast ratio of at least 4.5:1 between the foreground (modules) and background color.

You can check contrast ratios using free tools like WebAIM Contrast Checker or Colour Contrast Analyser. Enter your foreground and background hex codes and verify the contrast ratio.

Colors That Work Well

  • ▸Black on white — the classic, maximum contrast, never fails.
  • ▸Dark navy (#0a1628) on white — professional, high contrast.
  • ▸Dark green (#1a5c2e) on white — brand-friendly, scans reliably.
  • ▸Deep purple (#3d1a6e) on white — distinctive, good contrast.
  • ▸Dark red (#8b0000) on white — strong contrast, slightly risky at very small sizes.
  • ▸Dark modules on cream (#fdf6e3) — slightly softer than pure white, still reliable.
  • ▸White modules on black or very dark background — inverted QR codes work, but are less universally supported.

Colors to Avoid

  • ▸Light gray on white — insufficient contrast, high scan failure rate.
  • ▸Yellow on white — near-zero contrast.
  • ▸Light blue on white — very low contrast, common mistake.
  • ▸Pastel colors on white — all pastels are too light for reliable scanning.
  • ▸Red on green (or vice versa) — low luminance contrast even though they look different to humans; also inaccessible to colorblind users.
  • ▸Background lighter than the foreground modules — this is the correct orientation; never reverse it accidentally.
⚠️

Never use a background color that is darker than the foreground color. QR scanners expect dark modules on a lighter background. While some modern scanners handle inverted (white on dark) codes, many do not. Always put darker color on lighter background.

Brand Color QR Codes: How to Do It Right

To use your brand color in a QR code while ensuring reliability:

  1. 1Use your brand color as the foreground (modules) if it is dark enough.
  2. 2Keep the background white or very light — do not use a colored background unless it has high contrast with the foreground.
  3. 3Check the contrast ratio using WebAIM Contrast Checker — aim for ≥ 4.5:1.
  4. 4If your brand color is too light, darken it by 20–30% for the QR code specifically.
  5. 5Always test the printed result on multiple phones before finalizing.

Error Correction and Color Robustness

Our generator uses error correction level H (highest), which means the QR code can still be read even if up to 30% of the pattern is obscured or degraded. This provides a buffer for color choices that are slightly below ideal contrast, but it is not an excuse to use low-contrast colors intentionally. Always aim for the strongest contrast your design allows.