QR コードの色を変えても読み取れる？カラーデザインのルール
色を変えても読み取れる理由
QR コードのスキャナーは、色そのものではなく「明るい部分」と「暗い部分」のコントラストを認識しています。カメラが取り込んだ画像をグレースケールに変換し、閾値を基準に白 (明) と黒 (暗) に二値化する仕組みです。そのため、黒白以外の色でも、十分なコントラスト比があれば読み取れます。
たとえば、濃い紺色のモジュールに白い背景、または黒いモジュールに薄い黄色の背景といった組み合わせは問題なく読み取れます。ブランドカラーを取り入れたい場合でも、コントラストのルールさえ守れば自由にデザインできます。実際に、コカ・コーラの赤、スターバックスの緑など、ブランドカラーを使った QR コードは多くの企業で採用されています。
守るべき 3 つのルール
QR コードの色を変更する際に守るべきルールです。
- 暗い色をモジュール、明るい色を背景にする: スキャナーは暗い部分をモジュール (データ) として認識する。この関係を逆転させると、ファインダーパターンの検出に失敗し、 QR コード自体が認識されない。これが最も多い失敗パターン
- 十分なコントラスト比を確保する: WCAG のコントラスト比 4.5:1 以上を目安にする。薄いグレーと白、パステルカラー同士の組み合わせは避ける。コントラスト比はオンラインツール (WebAIM Contrast Checker など) で簡単に確認できる
- グラデーションは使わない: モジュール内で色が変化すると、明暗の境界が曖昧になり読み取りエラーが起きる。特にモジュールの端が薄くなるグラデーションは致命的
やってはいけない配色
以下の配色は読み取りエラーの原因になります。
- 白いモジュールに暗い背景 (反転): スキャナーが明暗を逆に解釈し、データを正しくデコードできない。デザイン的にはクールに見えるが、読み取り率が大幅に低下する
- 赤と緑の組み合わせ: 色覚多様性への配慮に加え、カメラのセンサーによってはコントラストが不足する。特に安価なスマートフォンのカメラでは認識率が下がる
- 黄色いモジュールに白い背景: コントラスト比が約 1.07:1 しかなく、ほぼ認識不可能
- 複数色のモジュール: 1 つの QR コード内でモジュールの色を部分的に変えると、コントラストが不均一になる。特にファインダーパターン (3 隅の大きな四角) の色を変えると認識率が激減する
ロゴ入り QR コードのデザイン
QR コードの中央にロゴを配置するデザインは、ブランド認知と機能性を両立する手法として広く使われています。これが可能なのは、 QR コードの誤り訂正機能のおかげです。誤り訂正レベル H (30% 復元可能) に設定すれば、 QR コードの面積の約 30% がロゴで隠れても読み取れます。
ただし、いくつかの注意点があります。まず、ロゴは必ず QR コードの中央に配置すること。 3 隅のファインダーパターンやタイミングパターン (モジュールの位置を示す線) にロゴが重なると、読み取りが不可能になります。次に、ロゴの面積は QR コード全体の 20% 以内に抑えるのが安全。理論上は 30% まで可能ですが、印刷の歪みや汚れを考慮すると余裕を持たせるべきです。
ロゴの背景は白または透明にし、 QR コードのモジュールとの境界を明確にしましょう。ロゴの色が QR コードのモジュールと同系色だと、境界が曖昧になり読み取りエラーの原因になります。
印刷とデジタルでの注意点の違い
QR コードの色は、表示媒体によって見え方が変わります。画面上では鮮やかに見える色でも、印刷すると暗くなったり、コントラストが低下したりすることがあります。
印刷物の場合: CMYK カラーモデルで色を指定し、実際の印刷物でテストスキャンを行うことが必須です。特に光沢紙への印刷では、照明の反射で QR コードが読み取りにくくなることがあります。マット紙の方が安定した読み取り結果を得られます。また、インクジェットプリンターでは細かいモジュールがにじむことがあるため、レーザープリンターの方が精度が高いです。
デジタル表示の場合: RGB カラーモデルで色を指定します。画面の明るさ設定によってコントラストが変わるため、明るさを最低にした状態でも読み取れるか確認しましょう。ダークモード対応のアプリでは、背景色が自動的に暗くなり、 QR コードの明暗関係が逆転するリスクがあります。
いずれの場合も、デザインが完成したら最低 3 種類のスマートフォン (iPhone、 Android の高価格帯・低価格帯) でテストスキャンを行い、読み取り率を確認するのがベストプラクティスです。
色の選び方ひとつで、 QR コードの印象と読み取り精度は大きく変わります。配色デザインの教科書でコントラストと視認性の基本を押さえておくと、デザインの幅が広がります。