QR コードの色を変えても読める理由と読めなくなる境界線
QR コードは白黒でなくても読める
QR コードといえば白黒のイメージですが、実は色を変えても読み取れます。赤と白、紺と白、緑と白。企業のブランドカラーに合わせた QR コードを見かけたことがある人も多いでしょう。
QR コードのスキャナーは、色そのものを認識しているわけではありません。認識しているのは「明るい部分」と「暗い部分」のコントラスト (明暗差) です。白黒の QR コードが最も読みやすいのは、白と黒のコントラストが最大だからです。
つまり、「暗い色」と「明るい色」の組み合わせであれば、何色でも QR コードは機能します。濃い赤と白、濃い青と白、濃い緑と白。いずれもコントラストが十分なので、問題なく読み取れます。
絶対にやってはいけない配色
逆に、QR コードが読めなくなる配色もあります。最も危険なのは「色の反転」です。
暗い背景に明るいモジュール: QR コードの仕様では、モジュール (データを表すマス目) は「暗い色」、背景は「明るい色」と定められています。これを逆にする (白いモジュールに黒い背景) と、多くのスキャナーが正しく読み取れません。一部のスキャナーは反転にも対応していますが、すべてのスキャナーで読めるとは限りません。
コントラストが低い組み合わせ: 黄色と白、水色と白、ピンクとオレンジ。明るい色同士の組み合わせはコントラストが低く、スキャナーがモジュールの境界を判別できません。同様に、濃い青と黒、濃い緑と濃い茶色など、暗い色同士の組み合わせも読み取りが困難です。
赤と緑の組み合わせ: 色覚多様性 (色弱) の方にとって、赤と緑は最も区別しにくい色の組み合わせです。スキャナーは読み取れても、人間の目で「QR コードがある」と認識しにくくなります。アクセシビリティの観点から避けるべき配色です。
コントラスト比の目安
QR コードが確実に読み取れるコントラスト比の目安は、WCAG (Web Content Accessibility Guidelines) の基準が参考になります。WCAG では、テキストと背景のコントラスト比を最低 4.5:1 以上にすることを推奨しています。QR コードも同様に、モジュールと背景のコントラスト比が 4.5:1 以上あれば、ほとんどのスキャナーで安定して読み取れます。
コントラスト比の確認は、Web 上の無料ツール (WebAIM Contrast Checker など) で簡単にできます。モジュールの色コードと背景の色コードを入力するだけで、コントラスト比が計算されます。
迷ったら、「モジュールは黒または濃い色、背景は白または薄い色」という基本に立ち返るのが最も安全です。デザイン性を追求するあまり読み取れなくなっては本末転倒です。
グラデーションや写真を背景にできるか
QR コードの背景にグラデーションや写真を使うことは、技術的には可能ですが、リスクが高いです。背景の色が場所によって変わるため、一部のモジュールでコントラストが不足し、読み取りエラーが発生する可能性があります。
どうしてもグラデーション背景を使いたい場合は、QR コードの周囲に白い余白 (クワイエットゾーン) を十分に確保し、QR コード自体は単色の背景に配置するのが安全です。QR コードの「外側」をデザインで飾り、QR コード「内部」はシンプルに保つ。この使い分けが、デザイン性と読み取り性を両立させるコツです。
写真の上に QR コードを重ねる場合は、QR コードの背景に半透明の白い四角を敷くテクニックが有効です。写真の雰囲気を残しつつ、QR コードの読み取りに必要なコントラストを確保できます。
色で遊ぶ QR コードの楽しみ方
ルールさえ守れば、QR コードの色で遊ぶのは楽しいものです。
ブランドカラーで統一: 企業のロゴカラーでモジュールを塗れば、名刺やチラシに統一感が生まれます。コカ・コーラの赤、スターバックスの緑、Facebook の青。ブランドの QR コードは、それだけで「どの企業のものか」が一目で分かります。
季節感を演出: クリスマスカードには赤と緑、ハロウィンにはオレンジと黒、桜の季節にはピンクと白。季節に合わせた配色の QR コードは、受け取った人の目を楽しませます (ただし赤と緑の組み合わせはコントラストに注意)。
モジュールの形を変える: 四角いモジュールを丸に変えたり、ハート型にしたりするデザイン QR コードも人気です。QR コードの誤り訂正機能のおかげで、多少の変形は許容されます。ただし、変形しすぎると読み取れなくなるため、必ずテストしてから使いましょう。
デザインと QR コードの両立に興味がある方には、配色デザインの本がおすすめです。色の基本理論からトレンドカラーまで、デザインの幅が広がります。