Qraft

改变二维码的颜色还能扫描吗?彩色设计的规则

改变颜色也能扫描的原因

二维码的扫描器识别的并不是颜色本身,而是「明亮部分」与「暗部分」之间的对比。相机取入的图像会先被转换成灰度图,再以某个阈值为界二值化成白(明)与黑(暗)。正因为经过这一步,只要明暗对比足够,黑白以外的颜色同样可以被正确读取。

举例来说,深藏青色的模块配白色背景,或者黑色模块配浅黄色背景,都能毫无问题地扫描。想把品牌色放进二维码里也完全可行,只要守住对比度的规则,配色就可以自由设计。实际上可口可乐的红、星巴克的绿等等,使用品牌色的二维码已经被许多企业采用。

必须遵守的三条规则

更改二维码颜色时必须遵守的规则如下。

  1. 暗色用于模块,明色用于背景:扫描器把暗的部分识别为模块(数据)。一旦把这个关系颠倒过来,定位图形的检测就会失败,二维码本身无法被识别。这是最常见的失败模式
  2. 确保足够的对比度:实务上以深色模块与浅色模块的对比度 4:1 以上为目标(Web 文字可读性里用的 WCAG 4.5:1,是给人眼读文字的另一套标准)。浅灰配白色、以及两种粉彩色互相搭配这类组合要避开。对比度用在线工具(例如 WebAIM Contrast Checker)就能轻松确认,但数值合格只是参考,最后要用实机扫一次确认
  3. 不要使用渐变:模块内部的颜色发生变化时,明暗的边界会变得模糊,从而引发扫描错误。尤其是模块边缘逐渐变浅的渐变,属于致命问题

绝对不能采用的配色

以下配色会成为扫描错误的原因。

  • 白色模块配暗色背景(反转):扫描器会把明暗解释颠倒,无法正确解码数据。设计上看起来很酷,但扫描成功率会大幅下降
  • 红色与绿色的组合:除了要考虑色觉多样性,某些相机的传感器还会出现对比不足的情况。在廉价手机的相机上,识别率尤其容易下滑
  • 黄色模块配白色背景:对比度只有约 1.07:1,几乎无法识别
  • 多种颜色的模块:在同一个二维码内部分改变模块的颜色,会造成对比不均匀。特别是改变定位图形(三个角上的大方块)的颜色,识别率会急剧下降

带 logo 的二维码设计

把 logo 放在二维码中央的设计,作为兼顾品牌认知与功能性的手法被广泛使用。之所以可行,靠的是二维码的纠错功能。把纠错等级设为 H,数据(码字)丢掉约 30% 仍然可以复原,这才腾出了在中央放 logo 的余地。这里的 30% 是相对数据而言的比例,并不等于可以把二维码面积的 30% 遮起来。

不过有几点需要注意。首先,logo 一定要放在二维码的正中央。如果 logo 压到了三个角的定位图形,或者压到指示模块位置的定位线(时序图形),扫描就会变得不可能。其次,logo 的面积控制在整个二维码的 20% 左右比较安全,以纠错等级 H 为前提时 25% 左右是上限的经验值。理论上的上限相当于数据的 30%,但遮挡的位置再加上印刷的变形与污损,往往会让扫描更早就失败,所以应当留出余量。

logo 的背景请设为白色或透明,让它与二维码模块之间的边界保持清晰。如果 logo 的颜色与二维码模块属于同一色系,边界就会含糊不清,成为扫描错误的原因。

印刷与数字显示的注意点差异

二维码的颜色会随着呈现媒介的不同而改变观感。在屏幕上看起来鲜艳的颜色,印刷出来可能变暗,或者对比度下降。

印刷品的情况:必须用 CMYK 色彩模型指定颜色,并且用实际的印刷成品做一次试扫描。尤其是印在光泽纸上时,照明的反射会让二维码变得难以扫描。哑光纸更容易得到稳定的扫描结果。另外,喷墨打印机容易让细小的模块渗色,因此激光打印机的精度更高。

数字显示的情况:用 RGB 色彩模型指定颜色。由于屏幕亮度设置会改变对比度,请确认把亮度调到最低时是否仍能扫描。在支持深色模式的应用里,背景色会自动变暗,存在二维码明暗关系被反转的风险。

无论哪种情况,设计完成后都应该用至少 3 种手机(iPhone、Android 的高价位机型与低价位机型)做试扫描,确认扫描成功率,这是最佳做法。

仅仅是颜色的选择,就足以让二维码的观感与扫描精度发生很大变化。