QRコードのコントラスト判定ツール

コードを描く色と、その背後の面の色を入力してください。パターンと切り出しシンボルそれぞれのコントラスト比、カメラが実際に見ている輝度差、そしてその組み合わせが印刷しても安全かどうかが返ってきます。

コードの背後にある面。ほぼ白のままにしてください。背景を明るくすることは、コードを暗くすることの代わりにはなりません。

データモジュールの色。

三隅の四角。パターンと同じくらいはっきり背景から浮き立つ必要があります。スキャナーが最初に見つけるのはここです。

プレビュー

画面なら問題ありません

6.70:1

判定の基準: パターンのコントラスト

ディスプレイでは十分で、印刷が奪う分の余裕には足りません。紙に載せる前にコードを暗くしてください。

この値の位置

デコーダーの下限印刷向けの目標

パターンのコントラスト

6.70:1

切り出しシンボルのコントラスト

6.70:1

カメラでの輝度差

176 / 255

255段階での値で、カメラのグレーチャンネルが基づくBT.601の重みづけによります。コントラスト比はセンサーよりはるかに緑を重く扱うため、2つの数字は彩度の高い色で最も食い違います。

ブランドカラーが目標に届かないときは、背景を明るくするのではなくコードを暗くしてください。2、3段階暗い色はたいてい元の印象を保ったまま、比率を倍にします。

コントラストは、誰も選んでいない唯一の変数です

モジュールの形も大きさも、QRコードのために誰かが下した判断です。しかし色は、QRコードのことなど誰も考えていなかった何年も前に書かれたブランドパレットから受け継がれます。だからこそ最も失敗しやすい性質であり、このツールが決着をつけるために存在する性質でもあります。根拠は最小コントラストの検証にまとめてあります。

デコーダーが実際に測っているもの

スマートフォンはQRコードを読むとき、色を見ていません。フレームを1つのグレーチャンネルに変換し、小さなブロックごとにしきい値を決め、各モジュールが周囲に対して暗いか明るいかを判定します。コードの色に対する許容度は、すべてこの1ステップで決まります。

  • デコーダーの下限 は1.24:1あたり、つまり一般的な二値化処理がそのブロックに内容があると見なさなくなる点で、設計の目安にすべき値からは程遠い場所にあります。
  • 画面向けの目標 は4:1で、作成ツール自身のコントラスト表示が緑に変わるのもこの値です。
  • 印刷向けの目標 は7:1です。紙の反射、インクの広がり、照明の映り込み、読み取り距離が、それぞれ余裕を持っていくからです。

食い違う2つの数字

コントラスト比は人間の目に合わせて、緑を体感的な明るさの71%として重みづけします。カメラのグレーチャンネルは緑を59%として扱い、フレアの項も持ちません。2つの指標はグレーや黒では一致し、彩度の高い色で最も食い違います。そしてQRコードが実際に失敗するのは、まさにそこです。

白地に純粋な緑がいちばん分かりやすい例です。コントラスト比は1.37:1で、デコーダー自身の下限をかろうじて上回る程度。ところがカメラのグレーチャンネルでの輝度差は255中105あります。一方の数字は絶望的と言い、もう一方はよくないと言う。印刷できると言う数字はどちらにもありません。だからこのページは両方を示します。その先にどの配色が残るのかはカラーQRコードで詳しく見ています。

QRコードの色を確かめる手順

ブランドパレットから、印刷に耐える色の組み合わせまでの4ステップ。

QRコードを作成
  1. 1

    まず背景を入力する

    コードの背後にある面で、ほぼ白であるべきです。背景を明るくすることは、コードを暗くすることの代わりにはなりません。紙の反射率は素材が上限を決めており、その側の余地はすでに使い切られているからです。

  2. 2

    パターンの色を加える

    補正をかける前の、指定どおりのブランドカラーをそのまま入れます。補正後のほうを先に確かめると、元の色が目標からどれだけ離れていたかが見えなくなります。

  3. 3

    切り出しシンボルを別に確かめる

    三隅の四角は、スキャナーが1つのモジュールを読むより先に探し当てるものです。モジュールが暗く、隅が淡いコードは最初の段階でつまずき、パターンの比率は試されることすらありません。

  4. 4

    2つのうち悪いほうを読む

    QRコードは平均ではなく、最も弱い組み合わせで読まれます。上の結論も、パターンと隅のうち余裕の少ないほうから取られています。

よくあるパレットの選択がどこに着地するか

白地に置いた5色を、2通りに測ったもの。デザインツールが示す比率と、カメラのグレーチャンネルが見る255段階の輝度差です。

深いネイビー - 17.9:1

#0f172aのようなほぼ黒に近いネイビーは17.9:1、カメラでの差は255中232です。純粋な黒の21:1と255にわずかに及ばないだけで、それでいて既定色ではなく紛れもないブランドカラーです。彩度のある色の中では最も安全な選択です。

青 - 8.6:1

白地の純粋な青は8.6:1、255中226で、どちらの指標でも印刷目標を上回ります。青は目とカメラの意見が一致する唯一の色相で、どちらの重みづけでも寄与が最小だからです。#1d4ed8のような中間の青は6.7:1まで下がり、画面には安全でも印刷にはわずかに足りません。

赤と紫 - おおむね5:1

中間の赤や紫は白地でおよそ5:1に落ち着きます。画面なら問題なく、印刷目標の7:1には届きません。2、3段階暗くすればたいてい越えられます。この系統はCMYKでの目減りも最も大きく、鮮やかなRGBの赤はモニターで見たより鈍く刷り上がります。

緑 - 2〜3:1

モックアップでは成立し、店頭で失敗する色です。#22c55eのようによくあるブランドグリーンは白地で2.28:1、何も世に出すべきでない線を下回っています。#166534まで暗くすると7.13:1になり、同じ緑と分かるまま印刷目標を越えます。

暗い地に明るいコード

反転したコード、つまり暗い地の上の明るいモジュールは正当な選択で、その分の余裕を使います。現行のスマートフォンのカメラはたいてい読めますが、古いスキャナーや一部の業務用リーダーは明るい地に暗いモジュールを前提とします。比率を7:1より十分高く保ち、印刷に踏み切る前に実機で試してください。

色を読める状態に保つルール

ブランドパレットを、デザインファイルから紙の上でも読めるコードまで運ぶ10の習慣。

  • 背景ではなくコードを暗くする

    反射率が印刷に耐えるには背景がほぼ白のままである必要があるので、調整はすべて暗いモジュール側の仕事です。2、3段階暗い色はたいてい元の印象を保ったまま、比率を2倍以上にします。

  • 印刷物は7:1で設計する

    4:1は画面の目標、7:1は印刷の目標で、その差は紙、インクの広がり、映り込み、読み取り距離が食べていきます。3:1は、どの媒体であれ下回ったら世に出さない線として扱ってください。

  • 切り出しシンボルにも同じコントラストを与える

    三隅の四角は、何かが復号される前に見つけられます。パターンより明るいアクセントカラーで装飾することは、美しいコードがいちばん最初の段階で失敗する最も多いパターンです。

  • 写真の上にコードを置かない

    しきい値は局所的に決まるため、写真はシンボルの途中で判定を裏返します。同じ暗いモジュールが、淡い空の上では暗いと読まれ、影の上では明るいと読まれるのです。代わりに平坦な面の上に置いてください。

  • グラデーションは写真より安全

    モジュールをまたぐグラデーションは、暗と明の局所的な差をどこでも保ちます。二値化に必要なのはそれだけです。平均で目標に届かせるのではなく、グラデーションの両端が目標を上回るようにしてください。

  • ブランドカラーは枠のほうに置く

    コードの背後の面、その下のラベル、隣の行動喚起は、パレットを最大の彩度で使えます。どれもコントラストを1ポイントも消費しません。

  • CMYK変換後の色を確かめる

    鮮やかなRGBの赤や緑はCMYKで彩度を失い、色相もずれます。意味を持つのは刷られた組み合わせのほうです。先に変換し、画面上の元の値ではなく変換後の値をここで確かめてください。

  • 暗いモジュールはK100%で刷る

    4版のリッチブラックは、0.4mmのモジュールの縁を保つために完璧な見当合わせを必要とします。枚葉オフセットで一般的な0.1mm前後の見当誤差はそのモジュールの4分の1にあたるので、単版の黒ならどの縁もきれいなままです。

  • 金銀や蛍光インキは測れないものとして扱う

    金、銀、箔、部分ニスには固定の反射率がありません。前にあるもの、たいていは照明器具を映すだけです。16進数の値から計算した比率では、それらを説明できません。

  • 刷った素材の上で組み合わせを確認する

    比率はファイルについての予測にすぎません。実際の素材に原寸で刷り、実際に置かれる照明の下で見て、2台の異なるスマートフォンで読み取ってから承認してください。

KoloQRの作成ツールでQRコードをデザインし、ダウンロードできる状態になっている様子

作成ツールで色を試す

円形やカスタム形状のQRコードを作れる無料のQRコード作成ツール、KoloQR。パレットを編集しているあいだ、プレビューの上で同じコントラスト判定がそのまま動きます。パターン、切り出しシンボル、背景のすべてについてです。

無料、アカウント登録なし、透かしなし。コードはブラウザ内で生成されるので、リンク先がサーバーに送られることはありません。

QRコードを作成

Questions? Answered

画面向けは4:1、印刷向けは7:1で設計し、3:1は何も世に出さない線として扱ってください。技術的にはデコーダーはずっと低い値でも動き、一般的な二値化処理は1.24:1あたりで諦めます。ただしその差はすべて、紙の反射、インクの広がり、映り込み、距離、手ぶれに費やされます。

はい。現行のスマートフォンのカメラはたいてい反転したコードを読みますが、古いスキャナーや一部の業務用リーダーは明るい地に暗いモジュールを前提とします。反転したコードは余裕も多く使うので、比率を7:1より余裕をもって高く保ち、印刷に踏み切る前に実機で試してください。

白に対して、目もカメラもともに緑を低く評価する位置にあるからです。#22c55eのような典型的なブランドグリーンは白地で2.28:1、世に出す線を下回ります。#166534まで暗くすれば7.13:1になり、色相は同じまま、余裕をもって印刷目標を越えます。

必要です。三隅の四角は、スキャナーが何かを復号する前に探し当てるものなので、パターンのコントラストが強くても隅が淡いコードは最初の段階でつまずきます。このツールは両方の数値を示し、悪いほうから結論を出します。

QRコードを読むのは目ではなくカメラだからです。コントラスト比は緑を体感的な明るさの71%として重みづけしますが、カメラのグレーチャンネルは59%として扱い、フレアの項も持ちません。両者は彩度の高い色で最も食い違い、その食い違いこそが知りたい事実です。

組み合わせが目標を越えたままなら薄いグレーでも成立しますが、何の見返りもなく余裕を削ります。背景をどこまで明るく刷れるかは紙が上限を決めており、その側はすでに使い切られています。グレーの背景が手放したコントラストは、暗いモジュール側から取り戻すしかありません。

それ自体が原因になるわけではありません。効くのは、モジュールとその背後との差を局所的に測った値です。とても暗いコードの背後の淡く平坦な色は通常問題なく、失敗するのは中間トーンのコードの背後に中間トーンのブランドカラーがある組み合わせです。それぞれ単独でどう見えるかは関係ありません。

それが上限です。比率は21:1、カメラのグレーチャンネルでは満点の255になります。これを上回るものはありません。#0f172aのようなほぼ黒に近いネイビーは17.9:1と255中232に達するので、測れる範囲でほとんど何も手放さずに、ブランドカラーとしても読めます。

変わります。彩度の高い色ではたいてい悪いほうへです。鮮やかなRGBの赤、緑、オレンジは変換で彩度を失い色相もずれるので、画面で7:1を越えていた組み合わせが印刷機で下回ることがあります。先に変換し、変換後の値をここで確かめてください。

補えません。誤り訂正は、シンボルが見つかり明暗として読まれたあとで、損傷したり覆われたりしたモジュールを復元するものです。そもそもカメラが明暗を分けられなければ、復元が働く相手のデータが存在しません。コントラストは前提条件であって、やりくりできる変数ではありません。

間接的に影響します。丸型や点状などの装飾的なモジュールは、正方形のマスに比べて各セルに置くインクが少なくなるため、切り出しシンボルの比率を探すデコーダーにとって手がかりが弱くなります。装飾されたコードは、印刷が取り分を持っていく前にすでに余裕を使っています。コントラストは減らすのではなく、増やしてください。

関連ページ

このページの続きになるページ - 同じ場面、同じ種類のコード、あるいは次に決めることについて。

KoloQRを選ぶ理由

  • ウェブサイト、メニュー、Wi-Fi、PDF、名刺用のQRコードを作成
  • 色・ロゴ・オリジナルの形をカスタマイズ
  • 高品質なPNG・SVGファイルをダウンロード
  • 印刷にもデジタルにも対応
QRコードを作成
シンプルな黒いQRコードと、同じコードをブランドカラーの円形にデザインし直したもの