Design a QR code

1. 01Enter the content, choose colors and shape, and add your logo if you like. The code is made as you type.
2. 02The tool checks the contrast and reads the finished code. If it passes the reading test, the tool reads the PNG file once more before saving, at exactly the size you chose. If the page warns you, you save only after confirming.
3. 03Save as a PNG for screen and office use, or as an SVG for print. Test it with your own phone before printing.

Contrast: It is calculated with the WCAG 2.1 formula (relative luminance), at least 4:1 is required, with the dots darker than the background. Bright red on white is just below, at 3.99:1. Light on dark always gets a warning, even with high contrast: Some readers only recognize dark dots on a light background.

Logo: A QR code protects its content several times over (error correction). With a logo, the strongest level H applies. The modules under the logo are left out instead of covered, with some space all around. The logo area is limited to 20% of the code area and always stays between the three corners; with little content, the code gets a bit finer for this. The cut-out is made in whole modules and exactly in the center, so the area jumps in steps.

Error correction used: The tool reads the finished image module by module and counts the codewords (8 modules each) that are already wrong. A reader can repair at most half as many codewords per block as the block has check words. The display shows the worst block. Below 25% reserve, the code counts as not safely readable here, below 50% as tight; I chose these limits, they are not in any standard. A logo close to 20% often uses up the whole reserve: Then the code only reads as long as the image is flawless.

Reading test: Reading is done with jsQR, the same open-source library as in “Read a QR code”, but here without inverting and sharpening, like a simple phone reader. Three samples: sharp, printed small (3 pixels per module) and slightly blurred. If the code has passed the reading test, the tool also reads the PNG file once more before saving, at exactly the chosen size; if the reader then does not recognize it, it is not saved and you learn what helps. If it has not passed and you confirm the warning, it is saved without this second check. This is a test with one reader, not a promise for every phone camera, every paper and every light.

Limits: The background is always a solid color, transparent is not possible: Otherwise the contrast would depend on what the code lies on later. There are no gradients. Large photos as a logo are scaled down to at most 1,200 pixels on the longest edge. An SVG logo is embedded unchanged; if it contains fonts or references to other files, it may look different in other programs. An SVG logo that your browser cannot convert into an image cannot be checked and cannot be saved as a PNG. In the PNG, every module gets whole pixels so the edges stay sharp; whatever does not divide evenly at the chosen size becomes extra margin. Round shapes and the logo still have soft edges, so the SVG file is the better choice for print. The minimum size in print is a rule of thumb (half a millimeter per module from about 20 cm, twice as large from twice the distance), not a promise.