How Do QR Codes Work? An Interactive Demo
An interactive dive into QR codes and their various features. We explore information density, error correction, QR code sizing and branding.
I recently watched this Veritasium video on QR Codes that I thoroughly enjoyed and recommend viewing.
Click here if you would like to skip straight to the demo tool.
A QR Code (Quick Response Code) is a two-dimensional barcode, also known as a matrix barcode. Unlike traditional barcodes that store data in a series of lines, QR codes store information in both vertical and horizontal patterns, allowing them to hold significantly more data.
What are the squares?
QR codes are made up of black and white modules (square dots) arranged in a square grid. These modules represent binary data, which is interpreted by a scanner or camera. When scanned, the QR code is decoded into a string of information, such as text or a URL.
The layout of a QR code consists of:
- Data Modules: The actual data, encoded in black and white squares.
- Position Markers: Three large squares in the corners that help scanners identify the orientation of the code.
- Alignment Patterns: Smaller squares that ensure the code can be read even if it’s slightly distorted.
- Error Correction: Allows QR codes to be readable even if up to 30% of the code is damaged or obscured, thanks to Reed-Solomon error correction.
Data Capacity
The amount of data a QR code can store depends on its version and error correction level:
- Numeric Mode: Up to 7,089 digits.
- Alphanumeric Mode: Up to 4,296 characters.
- Binary Mode: Up to 2,953 bytes.
- Kanji Mode: Special mode for encoding Japanese characters (QR codes were invented in Japan by Denso Wave for labeling automotive parts).
Error Correction
QR codes also support various levels of error correction:
- L (Low): Recovers 7% of data.
- M (Medium): Recovers 15% of data.
- Q (Quartile): Recovers 25% of data.
- H (High): Recovers 30% of data.
Why Use QR Codes?
- Fast Scanning: QR codes are designed for fast readability by scanners and mobile devices.
- Versatile Data Encoding: They can store URLs, text, binary data, and more, making them versatile for various applications such as sharing information, payments, and authentication.
- Error Correction: QR codes are highly resilient, and even if part of the code is damaged or obscured, it can still be scanned due to the error correction feature.
- Mobile-Friendly: Modern smartphones have built-in QR code readers, making them easily accessible for users without additional apps.
Demo Time
Nothing like experiments to cement what we have just learnt. You will need a QR scanner app. In the demo below, try the following and click on "Generate QR Code":
- Set the version to 1 and enter some long text into the content input.
- Set content to "a", scale to 2 and gradually increase the version
- Type the letters in "QRs are magical." one at a time and see how the QR evolves.
- For a given QR content, version and scale, change the error correction level and see its impact.
- Try typing non English text into the content - e.g. आईओटीरेडी.को
- Reduce the contrast between the module and background colours.
QR Code Generator
Branding
Because QR codes include redundancy and error correction, some of the space can in fact be used to embed a brandmark or image. This is great for marketing purposes but we don't recommend this for codes used in inventory management or asset tracking. A much neater trick we have seen is the use of halftone QR codes. Click the image below to read more from the folks who invented them. Both of these techniques have an impact on QR readability. A more subtle but less error-prone way to impress your brand on the QR codes is to select the colours carefully - while keeping sufficient contrast for your scanners.
