QR コードの色を変えても読み取れる？カラーデザインのルール

色を変えても読み取れる理由

QR コードのスキャナーは、色そのものではなく「明るい部分」と「暗い部分」のコントラストを認識しています。そのため、黒白以外の色でも、十分なコントラスト比があれば読み取れます。

たとえば、濃い紺色のモジュールに白い背景、または黒いモジュールに薄い黄色の背景といった組み合わせは問題なく読み取れます。ブランドカラーを取り入れたい場合でも、コントラストのルールさえ守れば自由にデザインできます。

守るべき 3 つのルール

QR コードの色を変更する際に守るべきルールです。

1. 暗い色をモジュール、明るい色を背景にする: スキャナーは暗い部分をモジュール (データ) として認識する。この関係を逆転させると読み取りに失敗する
2. 十分なコントラスト比を確保する: WCAG のコントラスト比 4.5:1 以上を目安にする。薄いグレーと白、パステルカラー同士の組み合わせは避ける
3. グラデーションは使わない: モジュール内で色が変化すると、明暗の境界が曖昧になり読み取りエラーが起きる

やってはいけない配色

以下の配色は読み取りエラーの原因になります。

• 白いモジュールに暗い背景 (反転): スキャナーが明暗を逆に解釈する
• 赤と緑の組み合わせ: 色覚多様性への配慮に加え、カメラのセンサーによってはコントラストが不足する
• 黄色いモジュールに白い背景: コントラスト不足で認識されない
• 複数色のモジュール: 1 つの QR コード内でモジュールの色を部分的に変えると、コントラストが不均一になる

デザインに凝りたい場合は、モジュールの色は単色に統一し、ロゴや装飾は中央のエリアに配置するのが安全です。