QR codes have built-in error correction. This is what makes custom QR code design possible. You can cover up to 30% of a QR code with a logo, change its colors, round its corners, and add gradient backgrounds, all without breaking scannability. But push past the error correction threshold and you have a pretty picture that doesn't scan.
Understanding error correction levels
QR codes support four error correction levels, defined by the Reed-Solomon algorithm:
- L (Low): 7% of data can be restored
- M (Medium): 15% of data can be restored
- Q (Quartile): 25% of data can be restored
- H (High): 30% of data can be restored
Higher error correction means larger QR codes (more modules needed to store the same data plus the redundancy). A URL encoded at level L might produce a 25x25 module QR code. The same URL at level H might require 29x29 modules.
For custom designs, always use level H. You want that 30% cushion because your logo, color changes, and shape modifications all count against it.
The color rules
QR scanners detect contrast between dark and light modules. The original spec uses black on white because that's maximum contrast. You can change the colors, but you must maintain sufficient contrast.
Rules that work:
- Dark foreground on light background (the standard pattern)
- Colored foreground (dark blue, dark green, dark red) on white
- Black foreground on light colored background
Rules that break:
- Light foreground on dark background (inverted). Some scanners handle this, many don't.
- Low-contrast combinations (grey on white, dark blue on dark green)
- Gradients that cross from dark to light within the data region
A safe guideline: maintain at least a 4:1 contrast ratio between the dark and light modules. The WCAG AA contrast ratio for text is 4.5:1, and the same principle applies to QR modules.
Logo placement
The center of a QR code is the safest place for a logo because QR codes have no alignment pattern there (the alignment patterns are near the corners and edges). A centered logo that covers up to 15-20% of the total area will scan reliably at error correction level H.
The logo should have a clean border (white padding) separating it from the surrounding QR modules. Without this border, the scanner might try to interpret the logo pixels as data modules, causing read errors.
Module shape customization
Standard QR modules are square. You can make them rounded (circular dots), diamond-shaped, or other geometric shapes without affecting scannability, as long as each module's center point remains in the correct position and the shape fills enough of the module's area to be detected.
The finder patterns (the three large squares in the corners) should generally remain recognizable as concentric squares. These are what scanners use to locate and orient the QR code. Altering their shape too dramatically can prevent detection entirely.
I built a QR code designer at zovo.one/free-tools/qr-code-designer that lets you customize colors, add logos, change module shapes, and adjust error correction. It validates scannability in real-time so you can push the design as far as possible without breaking functionality.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
Top comments (0)