QR code

A QR code is a square matrix barcode: a grid of light and dark modules with three heavy squares in its corners, invented at Denso Wave in 1994 for tracking car parts and now the standard way a screen hands something to a phone. In an interface it is almost never decoration. It is a transfer, and what it transfers is usually a URL, a pairing token, or a one time credential that the reader’s second device is meant to read off the first device’s display. Ant Design ships it as a component called QRCode, which is the right instinct: the thing has states, and a picture does not.

What makes it a design problem rather than a graphic is that three physical properties decide whether a camera can read it at all. The quiet zone, the empty margin of at least four modules on every side, is what lets a decoder find the symbol’s edges, so a code cropped flush to its container or laid over a busy background is a code that fails silently. Contrast has to be high and in the conventional polarity, dark modules on a light field, which is why a code inverted for a dark theme is a common and expensive mistake. And the module has a minimum size: below roughly two device pixels per module the camera cannot resolve the grid, so a code that shrinks with its layout stops working long before it looks too small to a designer.

Then there are the states. A code carrying a short lived pairing token expires, and the expiry has to be visible, because a reader whose scan silently fails has no way to tell a stale code from a bad camera angle. Show the remaining life and offer a refresh rather than swapping the matrix out from underneath. A code also needs a path for anyone with one device: printing the same value as characters to type by hand, which is what pin input is for at the receiving end, keeps the flow usable for a reader on a desktop with no phone in reach, and for anyone who cannot aim a camera steadily. The code is never the only route, in the same way that one time code login and magic link are alternate doors into the same account rather than replacements for the password field.

Accessibility is the part most implementations skip. The matrix is an image of data, so it needs an accessible name that says what it is for and, where the payload is short, the payload itself in text nearby rather than only inside the pixels. Screen reader users, and sighted readers on the device that is showing the code, cannot scan it at all. “2D barcode” is the generic term worth knowing, since Data Matrix and Aztec codes solve the same problem with different geometry, and a spec that says QR when it means any square code will eventually be built wrong.