Last updated
Dot Style Options
- Standard squares: Maximum compatibility, most compact, traditional look
- Rounded squares: Modern appearance, slightly softer, still highly compatible
- Circles: Contemporary design, works well with logos, slightly larger file
- Diamonds: Distinctive look, good for creative applications
- Corner finder patterns can be styled independently from the main dots
Color Guidelines for Reliable Scanning
- Minimum contrast ratio: 3:1 between foreground and background
- Recommended: 4.5:1 or higher for reliable scanning in all conditions
- Dark foreground on light background works best (not reversed)
- Avoid very similar colors — the scanner needs clear contrast to detect modules
- Test with multiple scanning apps before printing at scale
- Always validate the generated code before distributing
Examples
Example 1: Brand-Colored QR Code
Configuration:
Data: https://example.com/menu
Foreground Color: #1A1A2E (dark navy — brand primary)
Background Color: #FFFFFF (white)
Dot Style: Rounded squares
Corner Style: Rounded
Error Correction: M (15%)
Result: A QR code in your brand's navy color with
rounded dots for a modern, softer appearance.
Contrast check:
Navy #1A1A2E on White #FFFFFF
Contrast ratio: 18.1:1 ✓ (excellent — well above 3:1 minimum)
Example 2: Logo-Embedded QR Code
Configuration:
Data: https://example.com
Logo: company-logo.png (200x200px)
Logo Size: 25% of QR code area (auto-limited)
Error Correction: H (30%) — required for logo embedding
Foreground: #333333
Background: #FFFFFF
How it works:
- QR codes use Reed-Solomon error correction
- Level H allows up to 30% of the code to be obscured
- The logo covers ~25% of the center area
- Remaining 5% error correction handles minor damage
- Scanner reconstructs missing data from redundant bits
Validation: Tested with 5 different QR scanners ✓
Example 3: Gradient QR Code
Configuration:
Data: https://example.com/product/123
Gradient: Linear, left to right
Color Start: #FF6B6B (coral red)
Color Stop: #4ECDC4 (teal)
Background: #FFFFFF
Dot Style: Circles
Error Correction: H
Note: Gradient is applied while maintaining sufficient
contrast throughout. The customizer verifies that the
lightest point of the gradient still has adequate
contrast against the background.