QRコードの色を変える方法・背景との関係・読み取り性能を解説

QRコードといえば、黒いドットが並んだシンプルな見た目をイメージする人が多いでしょう。

QRコードの仕様上は白い背景に黒いコードが基本で、それが一番読み取りやすい状態です。

QRコードの色は基本的には白黒が一番読み取り性能は良いです。

出典: QRコードドットコム

しかし、最近ではデザイン性の高いQRコードも実生活で活用されています。

その一環として、QRコードの色を変えることは、特に以下のようなメリットがあります。

1. 視認性の向上: 黒一色のQRコードでは埋もれてしまう場面でも、カラフルなQRコードは注目を集めやすくなります。イベントポスターや広告など、他の要素が多いデザインの中でも目立つ効果が期待できます。
2. ブランドイメージとの一致: 企業のブランドカラーをQRコードに取り入れることで、統一感を演出できます。例えば、特定の色が連想されるブランドでは、その色をQRコードにも反映することで、ユーザーの記憶に残りやすくなります。
3. オリジナリティのアピール: 黒いQRコードは無機質な印象を与えることがありますが、色をカスタマイズすることで個性的で親しみやすいデザインに変えることができます。

ただし、色を変える際には注意が必要です。デザインの工夫がQRコードの読み取りに影響を及ぼす可能性があるからです。その具体的な注意点については後述します。

ではQRコードは何色でも大丈夫なのでしょうか。

早速結論ですが、スマートフォンで読み込むのであればかなりの範囲で読み取り可能です。

QRコードの規格としては背景は白、コード部分は黒とされていますが後述する実験結果ではかなりの範囲の色に対応できました。

また大手SNS等でもQRコードの色を変えているので多くのスマートフォン端末で色を変えてもQRコードの読み込みには問題ないことが推測されます。

一方で読み込むカメラやスキャナーの性能によってはQRコードの背景とコード部分にコントラストがないとうまく読み込めない可能性があります。

QRコードの色を変える場合には想定される読み込み端末でテストを行うことをお勧めします。

実際に大手企業やサービスも、カラフルなQRコードを採用しています。以下はその一例です。

• Instagram
• TikTok
• LINE公式アカウント

大手サービスでもQRコードの色を変えていることは一般的に普及しています。

QRコードの色を変えることには注意点があるものの、これらの例のように十分運用可能であることもご理解いただけるかと思います。

InstagramのQRコードについての解説

TikTokのQRコードについての解説

LINEのQRコードについての解説

前述の通り、QRコードの色を変えることは一般的に行われていますが、どの程度まで色を変えて大丈夫なのでしょうか。

ここではiPhone XRの標準カメラを使用して読み取りの独自のテストを行います。

実験手法

色のコントラスト比とは

今回テストを行うにあたり背景とコード部分の何らか基準が必要です。

そこで参考にしたのがコントラスト比です。

QRコードに限らず、デザインにおける「色のコントラスト比」は視認性の確保において重要です。

Webアクセシビリティの基準でも、テキストと背景のコントラスト比は最低4.5:1（大きなテキストの場合は3:1）が推奨されています。

コントラストチェッカー

そのコントラストを調べる際に便利なツールをご紹介します。

おすすめツール:

• Adobe Color: コントラストの他にカラーパレットの作成と調整に便利。
• Web AIMのコントラストチェッカー: 色のコントラスト比を計算し、基準に適合しているか確認可能。

今回はWeb AIMのコントラストチェッカーを使用します。

実験結果

[実験に使用したQRコードの画像]

iPhoneでは1.5:1の画像、QR TOOLの画像から検出機能を利用した場合は2:1から認識が可能でした。

Webアクセシビリティの基準に則ると機械での認識は容易でギリギリを攻めると2:1程度ということがわかりました。

上記の実験と合わせてQRコードの色を反転した場合でも実験しました。

まず背景を黒（#000000）にしてコード部分を白（#ffffff）で試しました。

※このQRコードもQR TOOLで作成できます。

結果、色を反転したQRコードの読み取りは問題ありませんでした。

ではコントラストの実験をします。前述の通り背景を黒、コントラスト比が2:1になるコード部分の色を設定しました。

[生成されたQRコード]

結果、こちらのQRコードの読み取りも問題ありませんでした。

この結果からドット部分の色は必ずしも濃い必要は無く、あくまで背景とのコントラストがQRコードの読み取りには大事であることがお分かりいただけます。

次にドット部分ではなく、背景部分に色をつけたり、背景を透過してしまっても大丈夫なのでしょうか？

QRコードの背景に色をつけると？

前述の通り大事なのは背景と前面のドット部分とのコントラストです。

よって背景に色をつけること自体は問題なく読み取れる可能性が高いです。

背景に色をつける一番極端な例が前述の黒背景に白抜きのドットで配色を反転させたパターンです。

お試しいただければわかるように読み取りに問題はありません、しかしコントラスト比で2:1以上を確保していただくのが当サイトでのおすすめです。

QRコードの背景を透過すると？

QRコードの背景を透過するということは別の何かが背景となるということです。

透けて見える先の色とQRコード部分とのコントラストを確保していただければ背景を透過すること自体は問題ありません。

QRコードの背景を透過する方法はこちらの記事で詳しく解説しています。

[QRコードの背景に色をつけた例（コントラスト比2.61:1）]

では実際に色付きのQRコードを作りたい方はどうすれば良いでしょうか。

ここでは無料のツールを含めていくつか方法をご紹介します。

方法1: 色付きのQRコードを作成する【おすすめ】

オンライン上でQRコードを作成できるサービスが多く存在しますが、その中で特におすすめはQR TOOLです。

以下のような特徴があります。

• 無料・登録不要・商用利用可能
• 目の部分・目の枠の部分・ドットそれぞれに色を変えられる
• 日本企業が提供
• その他カスタマイズ項目が豊富

STEP1: QRコード作成ページへアクセス

QRコード化したいURLなどをコピーして以下のいずれかページにアクセスしてください。

QRコードを作成

SNSアイコン付きQRコードを作成

STEP2: コピーした文字列をペースト

入力欄に文字列をペーストしてください。

オプションで目の部分・目の枠の部分・ドットそれぞれの色を設定できます。

色は一色ベタ塗りかグラデーションを選択できます。

選択すると逐次QRコードが生成されるので「ダウンロード」ボタンからダウンロードしてください。

※スマホの場合はQRコードを長押しして保存

方法2: 白黒QRコードに色付けをする

二つ目の方法は白黒ですでに作成してあるQRコードの色を変える方法です。

事前準備としてQRコードは前述のQR TOOL > [QRコードオプション]>[ダウンロード画像タイプ]で「SVG」を選択してダウンロードしてください。

1. ここではSVGファイルの編集に無料で利用できるFigmaを利用します。ユーザー登録・ログインまで済ませてください。
2. その後ホーム画面 > [New design file]をクリック
3. QRコード（svg形式をドラッグ&ドロップ）
4. 画面右のメニューをスクロール
5. Selection colorsで黒（#000000）をお好みの色に変更
6. Exportから画像タイプを選択してダウンロード

[QR TOOLの画像タイプでQRコードを選択]

[Figmaでデザインファイルを開き画像をドラッグ&ドロップ]

[色を変更]

[ダウンロード画像タイプを選択]

QRコードの画像の種類でお悩みの方はこちらの記事をご参照ください。

以上の手順で白黒のQRコードの色を変更することができます。

色を変える際には以下のような点を押さえましょう。

• 極端な明度差を避ける: 明るすぎる色や薄い色は、読み取りエラーを引き起こしやすいです。
• 複雑すぎる背景はNG: 背景に画像や模様を使う場合は、QRコード部分の視認性を確保しましょう。
• カラーブラインドへの配慮: 色覚に障害のあるユーザーでも正しく認識できる配色を選びましょう。

その他QRコード自体の注意点は以下の記事をご参照ください。

QRコードの用途別最小サイズ・推奨サイズ

QRコードには余白が必要？余白が無いとどうなる？

QRコードは情報を伝えるだけでなく、デザインの一部として活用できるツールです。

色や背景に工夫を凝らすことで、より目を引き、ブランドイメージを強化する効果があります。

今回のスマートフォンを用いた実験の結果としては色を変え、背景とのコントラストを弱くしたとしてもほぼ影響がありませんでした。

しかし、端末によっては読み取り精度を損なう可能性があるので色を変える場合にはテストを行うことをお勧めします。

この記事を参考に、オリジナルの色付きQRコードを作成してみてください！