背景が黒いWebページにQRコード載せるときは注意が必要

QRコードを配置したページの背景が黒い場合、携帯電話のQRコードリーダーの認識が悪くなることがあるようです。これは良く考えれば当たり前なのですが、画面が暗いとQRコードを読み取るカメラが明るさを勝手に調整して白い部分が光ったようになってしまうからです。

以下は背景が黒い場合と白い場合のQRコードを読み取った画面の比較画像です。背景が黒いと左のように光って、QRコードがほとんど見えなくなっています。


 
実際に試したい場合は以下のサンプルページから。
画面クリックで黒いページと白いページが切り替わるので、携帯電話をかざしたままクリックすると、カメラが自動的に明るさを調整する様子が良くわかると思います。
※トリニトロンのモニターだと輝度が低いため、この現象が起こらないようです。

サンプルページ01 (画面クリックで切り替わります)
 
以下のように、QRコードの明度を下げたり色をつけたりしてコントラストを低くくすれば回避することができます。

サンプルページ02 (画面クリックで切り替わります)
 
もちろんQRコード自体を大きくすることでも認識を上げることができます。ただ多少大きくするよりかは、明度を下げる方が認識度が高いです。

携帯の機種やモニターの明度にも関係して必ず起こる現象ではありませんし、QRコードリーダーの明るさ調整で調整すれば読み取ることもできますが、背景が黒いWebページにQRコードを載せる時はデザインに注意が必要そうです。