パレットのコントラスト表

パレットを丸ごとチェックする理由

ブランドカラーはたいてい、ボード上で色見本として横に並べて選ばれます。一方をもう一方の上に重ねる「組み合わせ」として選ばれることはめったにありません。そのつけは後で回ってきます。開発者が、淡い背景の上のリンク色、アクセントのパネル上のキャプション、メインボタンのラベルを必要としたとき、パレットから目分量で選ぶことになるからです。

組み合わせの数はすぐに増えます。n色あれば、1色を別の色に重ねる方法はn ×（n − 1）通りで、4色なら12、6色なら30、12色なら132になります。1つずつ確かめるのは手間がかかりすぎて、誰もやりません。表ならすぐに終わり、パレットの構造も見えてきます。どの色が「インク」として使え、どの色が「紙」として使え、どの色が飾りにしか向かないかです。

表の読み方

行が文字色、列が背景色です。各セルには、その2色で描いた見本の「Aa」、小数点以下2桁で切り捨てたWCAGのコントラスト比、そして次の4つのラベルのどれかを表示します。

比率はどちらの色が上でも同じなので、表は対角線を挟んで鏡写しになります。それでも両半分を残しているのは、見本の見え方が違うからです。暗い色に明るい色と明るい色に暗い色では、数字が同じでも印象が変わります。表示メニューで、選んだしきい値に満たない組み合わせをすべて薄くできます。セルを選ぶと、見出し、段落、小さな文字、ボタンを使った大きなプレビューが開きます。その組み合わせをコントラスト比計算ツールに送るリンクもあり、そちらでは基準に通る近い色合いを提案できます。

表の下にある3つのリスト

通常サイズの文字

4.5:1以上の組み合わせを、強い順に最大8つ。よくある使い方に合わせて、各組み合わせは明るいほうの色を背景にして1回だけ表示します。

大きい文字と見出しのみ

3:1から4.5:1の間の組み合わせを最大6つ。40 pxのデザインカンプでは問題なく見えるので使いたくなりますが、段落に使うと基準を満たしません。

ボタンの組み合わせ

ボタンには3つの色と2つのテストが関わります。ラベルはボタンに対して4.5:1、ボタン自体はページに対して3:1が必要です。そうでないと、そこにボタンがあることにすら気づいてもらえません。ボタンの色の候補ごとに、最もコントラストの高いラベルと、両方の条件を満たす最も明るいページ背景を示します。

最初のリストが空なら、パレットに「インク」と「紙」の組み合わせがありません。#1a1a1aのような黒に近い色か、白に近い色を加えると、表が埋まります。

足りないパレットの直し方

ほとんどのパレットは同じところでつまずきます。明るさが似た中間色がいくつも並んでいるのです。ティール、コーラル、マスタード、バイオレットは見た目がまったく違いますが、どれもほかの色の上に文字を載せられません。次の3つを加えれば、ほぼどんな場合でも解決します。

1. 暗いニュートラルカラーを本文用に。メインのブランド色相を深くしたものは黒と同じ役目を果たし、しかもブランドらしさが残ります。
2. 明るいニュートラルカラーをページやカードの背景用に。ブランドの色相を少し混ぜたオフホワイトなどです。
3. アクセントカラーを一段暗くしたものをリンクとボタン用に。その上の白い文字が4.5:1に届くまで明度を下げてください。元のアクセントカラーは、大きな図形やイラストに残しておきます。

そのうえで、結果を組み合わせのルールとしてスタイルガイドに書いてください。たとえば「アクセントは白の上だけ、本文の下には使わない」です。色のリストより、使ってよい組み合わせのリストのほうが間違いが減ります。

入力、共有、制限

色はカンマか改行で区切ってください。#ありなしの16進数、rgb()、hsl()、CSSの色名のどれも使えます。重複はまとめ、13色目以降は無視します。アドレスバーには常に現在のパレットが?c=1d3557,f1faee,…の形で入っているので、コピーしたリンクを開けば同じ表が再現されます。計算はすべてブラウザーの中で行います。