A standard black-and-white QR code is functional, but boring. Customization can help it fit your branding and increase engagement. However, any change affects readability. This article explains how to customize a QR code without compromising scanning reliability. Create a QR code with the QR Generator on reChecker. For business use cases and code types, see QR Codes for Business.
Balancing Design and Readability
QR codes contain redundancy (Reed–Solomon error correction). Up to 30% of the modules can be damaged or changed while the code remains readable. This leaves room for design, but it is not unlimited. Test every experiment by scanning the code.
Principles:
- Test — with multiple devices and in different lighting conditions
- Maintain contrast — the difference between dark and light areas must be sufficient
- Leave the corner markers untouched — they are critical for orientation
- Use a high error correction level — H (30%) allows more freedom to make changes
QR Code Structure
The three corner markers (finder patterns) are squares in the corners. They allow the decoder to determine orientation and scale. The alignment pattern in the center is used for large codes. The data region is the rest of the matrix. When customizing, do not alter the finder patterns or the quiet zone (white border).
Error Correction Levels
| Level | Recovery | Use |
|---|---|---|
| L | 7% | Minimal changes |
| M | 15% | Standard, light customization |
| Q | 25% | Logo in the center |
| H | 30% | Maximum customization |
For codes with a logo or color customization, choose level H. It increases the matrix density, which can reduce readability when printed at a small size. Test the final result.
Colors
Inversion
A white QR code on a dark background works just like a black one on a light background. The key is to maintain contrast: dark modules must be clearly distinguishable from light ones. The recommended contrast ratio is at least 4:1.
Brand Colors
Replacing black with a brand color (blue, green, red) usually does not affect recognition. Cameras process contrast, not absolute colors. Avoid:
- Light colors for dark modules (low contrast against white)
- Dark colors for light modules
- Color pairs with similar brightness
Gradients
Gradients are risky: a transition from dark to light can blur module boundaries. If you use one, keep it subtle and test it on different devices.
Logo in the Center
The central area of a QR code is less critical for decoding. A logo covering up to 25–30% of the code area usually does not interfere at level H. Recommendations:
- Size — no more than 30% of the code size
- Background — white or light, with contrast against the modules
- Shape — square or circle, without thin lines
- Position — centered, without covering the corner markers
Poorly readable codes are often caused by an oversized logo or low contrast.
Module Shapes
Standard modules are squares. Alternatives:
Rounded Corners
Modules with rounded corners look softer. Moderate rounding preserves readability. Excessive rounding can cause adjacent modules to merge.
Circles and Dots
Circular modules are a popular choice. They work when the size and contrast are sufficient. Small dots are harder to recognize in small prints.
Unusual Shapes
Hearts, stars, and similar shapes are risky. Decoders expect specific geometry. Experiment only if you test the result.
Framing and Context
Border
A thin border around a QR code visually separates it from the background. Do not confuse it with the quiet zone: the border must not extend into the area needed for recognition. Leave at least 4 modules of white space between the code and any other elements.
Text and Call to Action
“Scan for a discount” or “Learn more” can increase conversions. Place the text outside the quiet zone, and make sure the font is readable on the intended medium.
Integrating into a Layout
A QR code can be part of a poster, business card, or package. Coordinate its colors with the overall design, but do not sacrifice contrast.
Output Formats
| Format | Use |
|---|---|
| PNG | Web, screens, high-resolution printing |
| SVG | Scaling without loss of quality |
| Printing, vector output | |
| EPS | Professional printing |
For printing, use a resolution of at least 300 DPI. Vector formats (SVG, PDF) are preferable for large formats.
Common Mistakes
- Size too small — a code measuring 1.5×1.5 cm on a business card may not be readable
- Low contrast — gray on light gray will not work
- Violating the quiet zone — text and graphics placed right next to the code
- Changing the corner markers — the decoder will not be able to determine orientation
- Excessive customization — “beautiful” should not come at the cost of functionality
Pre-Print Checklist
- Error correction level H for customized codes
- Sufficient contrast (4:1 or higher)
- Quiet zone preserved (4+ modules)
- Corner markers unchanged
- Logo covers no more than 30% of the area
- Tested on 3+ devices
- Print resolution of 300 DPI or higher
You can create and customize a QR code with the QR Generator on reChecker. For business use cases, see the article QR Codes for Business.
Customization Tools
Online platforms (QR Generator, QR Code Generator) offer a visual editor for choosing colors and size and adding a logo. For programmatic generation, use libraries: qrcode (Node.js), python-qrcode, phpqrcode. They let you set colors, the error correction level, and module shapes.
Printing and Materials
For printing on business cards and brochures, the minimum size is 15×15 mm. For outdoor advertising (billboards, storefront windows), use at least 200×200 mm. On glossy surfaces, use matte lamination or choose an angle without glare.
Animation
Some generators support animated QR codes (APNG). Their practical usefulness is limited: not all scanners handle animation correctly, and it can be distracting. Use them only for special campaigns, with testing.
Summary
QR customization must preserve readability. Colors, logos, and module shapes are acceptable as long as contrast and the quiet zone are maintained. Test on real devices before printing in large quantities.