| Design choice | What to check | Practical response |
|---|---|---|
| Pale modules | Low separation from background | Darken the code |
| Inverted colors | Reader support varies | Prefer dark-on-light |
| Photo background | Local contrast changes | Add an opaque light panel |
| Glossy print | Reflected light hides modules | Test material and viewing angle |
What the ratio can tell you
The generator computes contrast from the relative luminance of the selected foreground and background. Its warning threshold uses the familiar W3C normal-text contrast value of 4.5:1 as a conservative design prompt. That threshold was not written as a QR scanner specification.
The calculation considers the chosen screen colors, not the ink, paper, illumination or camera sensor used later. A color pair can have a healthy numeric ratio and still print poorly. A low ratio is a useful reason to simplify, but a high ratio is only one piece of the evidence.
Keep the background predictable
Use a solid opaque background behind the entire code and quiet zone. Transparent exports placed on colored material can change the effective contrast without changing the original artwork. A photograph creates different local conditions across the symbol, which a single color-pair ratio cannot describe.
Avoid relying on metallic inks, varnishes or reflective finishes to supply the dark modules. Their apparent brightness can change with the viewing angle. If the brand requires such material, reserve a plain printed panel for the QR and test the finished piece.
Verify after every design change
Change one property at a time and watch the image verification result. If a code stops decoding after adding rounded modules or a logo, return to a simpler shape before making more changes. The easiest repair is often a plain square module with more clear space around the symbol.
After exporting, scan the artwork in its final layout and then on a physical proof. Test with more than your own saved browser session, especially if the destination needs a login or payment app. Good visual contrast cannot correct an incorrect payload, private page or missing domain.
Put this into practice in the QR generator, then inspect the decoded payload before printing.
Sources
Last checked: . Examples are illustrative inputs, not measured results.
- Web Content Accessibility Guidelines 2.2, W3C. Checked 2026-10-29.
- Determining the QR code area, DENSO WAVE. Checked 2026-10-29.
- Setting the module size, DENSO WAVE. Checked 2026-10-29.