デジタルディスプレイ向けダークモードQR Code

Dark Mode QR Codes for Digital Displays

Displaying QR codes on dark-mode websites, apps, and OLED screens requires adapting the traditional black-on-white design for dark backgrounds while maintaining scannability.

The Dark Mode Challenge

Standard QR codes (black modules on white background) look jarring on dark-mode UIs. Simply inverting the colours (white modules on dark background) creates an inverted QR code that most modern scanners can handle — but not all.

Approaches

1. Inverted colours (white on dark) The simplest approach. White modules on a dark background works on most modern scanners.

• Compatible with iOS 14+ and most Android 10+ cameras
• May fail on older devices or dedicated scanners
• Ensure sufficient contrast between white modules and dark background

2. Light container on dark background Place a standard black-on-white QR code inside a light-coloured container (card, panel) on the dark page.

• Universal scanner compatibility
• Visually clear that it is a scannable code
• The container should include the quiet zone

3. Dynamic theme switching Detect the user's colour scheme preference and display the appropriate QR code variant:

• Light mode: standard black-on-white
• Dark mode: inverted or container approach
• Use CSS prefers-color-scheme media query

OLED Considerations

OLED screens turn off pixels for true black, making white-on-black QR codes highly visible and power-efficient. However:

• Pure white on pure black can cause halation (blooming) on some OLED panels
• Slightly off-white (#F0F0F0) on black can reduce this effect
• PWM dimming at low brightness can cause flickering that affects scanning

Screen Display Best Practices

• Set the QR code to a fixed size (not responsive scaling) for consistent module resolution
• Avoid animating or transitioning the QR code
• Disable auto-brightness changes that might reduce contrast during scanning
• Set the screen brightness to maximum when displaying a QR code for scanning
• Account for Moire patterns between the screen pixel grid and QR module grid

Key Takeaways

• Inverted QR codes work on most modern scanners but not all
• A light container on a dark background provides universal compatibility
• Dynamic theme switching offers the best of both worlds
• OLED screens benefit from white-on-black for power efficiency
• Fix the QR code size and maximise brightness during scanning