Color is a straightforward way to make those boring QR codes special. This seems to have caught on with quite a few people, as a quick Google image search reveals. But, there’s a problem. Deviating from the ideal black-and-white makes the QR code more difficult to scan. In this article, I show a way to create color QR codes that appear to be black-and-white to a QR code scanner.
How to bring color into a QR code correctly? For a scanner, the only thing that counts is the contrast between the black and the white elements. If you want to change anything in the QR code that moves it away from the ideal black-and-white situation, the least harmful thing to do is to reduce the contrast a bit (without overdoing it!). This is illustrated below. A “gray” QR code will be a tad more difficult to scan, but the difference will be minimal, since the “black” and “white” elements still all have the same brightness. Using a single color for the dark or light (or both) elements amounts to the same (again, as long as the contrast stays large enough).
Black-and-white QR code (left). Lower contrast grayscale QR code (right)Of course, a graphical designer will never be happy with just changing the overall color. And this is where the trouble starts… If you use several different colors, those will generally not all have the same brightness. This makes it much harder for the scanner, since the dark and light elements are now more difficult to separate. But, if you do choose colors that have the exact same brightness, the scanner will handle the QR code as well as it handles the grayscale QR code from the illustration above. Some examples are shown below.
Examples of color QR codes that “fade to gray”These images were made using the “fade to gray” trick from a previous article. Now, since a scanner simply needs to determine the true brightness of the QR code, without taking human perception into account, it must simply add the red, green, and blue channels together. If this is done correctly, the color images will come out exactly like the grayscale image above. To check this starting from the image file itself, you’d have to compensate for the gamma correction first.
If you must use color in your QR codes, I think you should seriously consider doing something like this. It will limit the colors that you can use somewhat, but at least your codes will actually work… What do you think?
Add new comment