QRコードの配色50組：印刷に耐えるのはどれか

この表の数字は何であり、何ではないのか

コントラスト比とは、2色のうち明るいほうの相対輝度を暗いほうの相対輝度で割り、同一色なら1:1、白地に黒なら21:1になるよう調整した値です。WCAGが文字の可読性に使うのと同じ数字で、観測ではなく計算で求めます。sRGBの各チャンネルを線形化し、赤0.2126・緑0.7152・青0.0722で重み付けし、割るだけです。

この定義を正確に述べておく価値があります。下の各行が検証可能である理由がそこにあるからです。この表を信用する必要は誰にもありません。2つのhex値と式があれば、どのマシンでも同じ数字が出ます。それは「試したら動きました」とはまったく別種の主張です。

そしてそれが限界でもあります。この表を作るためにQRコードを印刷して読み取ってはいません。 判定の列は、このサイトがすでに公表している2つの設計しきい値 - 印刷で約7:1、画面で約4:1 - を計算値に当てはめたものです。どの配色を試す価値があるかを絞る道具であって、試験の代わりではありません。

これらのしきい値がデコーダーの必要値からこれほど離れている理由はコントラストの実験で扱っています。読めるオープンソースのデコーダーは1.2:1あたりで諦めます。そこから7:1までのすべては、データが正しくなった後に印刷がコードへ加えることへの余裕です。

印刷に通る10組

これらは7:1以上に達し、ドットゲイン、紙の反射率、扱いにくい光源のための余裕がまだ残ります。いずれも白地の上のきわめて暗い色です。

このグループの実務的な読み方は、印刷できるパレットは狭くて深い、ということです。ネイビー、オックスブラッド、ワインレッド、ディープグリーン、ディープパープル。これらが機能する色であり、自社パレットのその端にアイデンティティを置いているブランドは、何も考えずに色付きのQRコードを印刷できます。

画面向きの11組

これらは4:1から7:1の間に入ります。コントラストが完璧で、光が均一で、輪郭が硬いディスプレイ上では問題ありません。印刷では、インキが乾く前に余裕を使い切っています。

実際のブランドカラーの多くはこの帯にあり、スタジオでは読めて店頭では読めなかったという例の失敗を生むのもこの帯です。スタジオでの試験はモニター上だったのです。

コードを載せるべきでない13組

4:1を下回ると、QRコードは自身の可読性ではなくデコーダーの許容度に頼ることになります。これらの配色は、良い端末で、良い光の下で、余裕のあるサイズなら読めることがあります。それは完全に失敗するより悪いことです。誰もが行う唯一の試験に通ってしまうからです。

このグループを貫く傾向こそ、持ち帰る価値のある発見です。ある色相が失敗して別の色相が通るのではありません。変数は明度であって色相ではないのです。緑は3つの帯すべてに現れます。ディープグリーンは7.68:1で合格、グリーン700は5.02:1で画面のみ、グリーン500は2.28:1で不合格。同じ発想の色が3回出てきて、変わったのは輝度だけです。

色付きの用紙に暗いコードを刷る

白以外に刷ると比率は下がります。コードの明るいモジュールが紙そのものだからです。クラフト紙、生成り、再生紙、色紙はいずれもデータが示すより低い位置から始まり、そのずれ幅をデータは教えてくれません。

最後の2行が教えてくれます。白地のフォレストグリーンは7.13:1で合格でしたが、同じ緑を淡い緑の地に置くと6.81:1に落ち、印刷のしきい値を超えなくなります。ほとんど見えない色味が、合格していた配色を境界帯へ動かしたのです。

暗い地に明るいコードは別の問題

QRコードを反転させる - 暗い背景に明るいモジュールを置く - と、高い比率は簡単に出ます。そして比率はそこでの問題ではありません。問題は、コントラスト比の式が対称であるのに、デコーダーが対称ではないことです。

QRコードは明るい背景に暗いモジュールとして規定されており、多くのデコーダーが反転極性も試すとはいえ、すべてが試すわけでも、試すと約束しているわけでもありません。これは色の問題ではなくスキャナー分布の問題で、どんな比率も答えを出しません。デザインが反転コードを求めるなら、判定の列が「要テスト」と言うのは、試すことだけが確かめる方法だからです。

比率が教えてくれないこと

合格した比率と、紙の上で読めるコードの間には4つのものが立ちはだかります。そのどれもデータの中には見えません。

• ドットゲイン。 どの印刷機も暗部をわずかに太らせます。QRコードでは明るいモジュールが細くなるということで、デコーダーが標本化するまさにその尺度で実効コントラストを下げます。
• 素材。 比率は背景がデータどおりの色であることを前提にします。非コート紙、再生紙、色紙ではそうではなく、紙が仕事の半分を担っています。
• 表面加工。 グロスラミネートは、下の配色がどれほど良くてもシンボルの一部に鏡面反射を置けます。反射の下では21:1のコードもその部分では1:1です。
• カメラの露出。 端末は場面全体を測光します。明るく広い面の上の小さなコードは面に合わせて露出され、印刷所を出たときより平坦になってデコーダーに届きます。

だから判定の列は約束ではなくしきい値として書かれています。7:1を超えるとは、コードが失敗したときの原因が配色ではないということであり、コードが失敗しないという意味ではありません。

この表にない配色を確かめる方法

たいていのブランドパレットには、この50組に入っていない色があります。確認は数秒で済み、この表を作ったのと同じ手順です。

1. 2つのhex値から比率を出す. コードの色と背景色をQRコントラストチェッカーに入れます。どの配色でも、この表と同じ数字が返ります。
2. 単一の数字ではなく用途と照らす. 印刷物なら約7:1、画面にしか出ないコードなら約4:1です。4:1を下回るなら、サイズではなく色を変えてください。
3. 不合格なら色相を変えるより暗くする. この表の失敗は明度の問題です。2.80:1で落ちるブランドオレンジには、たいてい同じパレットの中に7:1を超え、なおブランドらしく見える暗い兄弟がいます。
4. 色見本ではなく書き出したデータを測る. QRコードバリデーターは仕上がった書き出しを読み、実際に含まれているコントラストを、クワイエットゾーンとモジュールサイズとともに報告します。グラデーションや柔らかい背景は、色見本が出した答えを変えます。
5. 大量に刷る前にラダーを回す. コントラストの実験にあるコントラストのラダーは、自分の端末と自分の用紙に対するしきい値を出します。一般論ではなく自分の仕事を説明する唯一の数字です。

同じ判断のデザイン側 - コードのどの部分なら色を持てるのか、アクセントをどこに置くのか - については、カラーQRコードが算術ではなく配置を扱っています。