色のコントラストとアクセシブルなパレット

その比が実際に測っているもの

コントラスト比は二つの色の相対輝度 — おおまかに言えばそれぞれが放つ光の量 — を比べ、同一色の 1:1 から白地に黒の 21:1 までの尺度をとります。輝度はチャンネルの平均ではありません。緑は赤よりずっと大きく、赤は青よりずっと大きく寄与します。人間の視覚がスペクトルの中央で最も敏感だからです。白地に明るい黄色の文字がひどく不合格になる一方、同じ黄色が黒地では容易に合格する理由がこの重み付けです。

その結果、色相はほとんど効かず、明るさが支配します。同じ明るさの、鮮やかで明らかに異なる二つの色相はこの尺度ではほぼコントラストがなく、デザイナーが不合格の数値に最も驚くのがまさにこの場面です。ある組み合わせが不合格なら、明るさを変えれば直りますが、色相を変えてもたいてい直りません。

基準値と、どれが適用されるか

WCAG は通常の本文に 4.5:1、大きな文字に 3:1 を求めます。ここで「大きい」とはおよそ 24px、太字なら 19px を指します。これがレベル AA で、AAA はそれぞれ 7:1 と 4.5:1 に引き上げます。大きな文字に緩和があるのは、太い線がより多くのピクセルを覆い、低いコントラストでも読めるからです — 字形の太さへの譲歩であって、抜け道ではありません。

非テキスト要素には見落とされがちな独自の規則があります。インターフェイス部品と意味を担うグラフィックは、隣接するものに対して 3:1 が必要です。入力欄の枠線、フォーカスリング、グラフの棒、それ自体で意味を伝えるアイコンが該当します。よくある違反はプレースホルダー文字と無効化されたコントロールで、「意図的に薄く見せている」という理由でどの基準値にも遠く及ばないことが多いのです。

比を満たすことと読めることは別

比は書体について何も知りません。4.5:1 の同じ配色でも、16px の標準ウェイトなら快適で、12px の細いウェイトでは苦行になります。細い線は覆うピクセルが少なく、アンチエイリアスでより多くを失うからです。基準を満たすことは目標ではなく下限であり、本文はふつう余裕をもって超えたいところです。

比は文字の背後に何があるかも知りません。写真やグラデーション、動画の上の文字は領域ごとにコントラストが異なり、標本にした一画素に対して計算した数値は残りについて何も語りません。こうした場合には、覆いの層や不透明なパネル、文字の影が必要です — 背景がそうであることを願うのではなく、既知の背景を保証する仕組みです。

色覚特性はどの組み合わせが機能するかを変える

男性のおよそ12人に1人が何らかの色覚特性を持ち、最も多いのは赤と緑の区別が difficult になるものです。コントラスト比は明るさで決まるためこの状況にかなり耐えますが、色相だけで運ばれる情報は耐えません。赤と緑の状態ドット、凡例が色しかないグラフ、下線なしで色だけで本文と区別されるリンク — どれも相当数の読者には見えていません。

そこから導かれる規則は単純です。色を唯一の手がかりにしないこと。形、アイコン、ラベル、模様、あるいは明るさの差を併せて与えます。よくある色覚特性のシミュレーションで設計を確認する作業はすぐ終わり、自動コントラスト検査が文句なく通してしまうグラフや状態表示を、まさにそこで捕まえられます。

破綻しないパレットを組む

最も信頼できるやり方は、色を一つずつ選ぶのではなく明るさの段階で設計することです。明るさの値のはしごを固定し、各色相をすべての段で生成すれば、組み合わせは予測可能になります — はしご上で十分に離れた二段なら、色相にかかわらず合格します。知覚的な色空間は HSL よりこれをずっと容易にします。HSL の明度は知覚的に均一ではなく、同じ明度値の二色がまったく違う明るさに見えることがあるからです。

実務用のチェックリスト:

• 本文 4.5:1、大きな文字 3:1、UI の枠線と意味あるアイコン 3:1。
• 不合格は色相ではなく明るさを変えて直す。
• プレースホルダー・無効・フォーカスの各状態を確認する — 最も落ちやすい。
• 情報を色相だけに載せない。形・ラベル・明るさを添える。
• 両テーマで検証する。ライトで通ったパレットが反転で落ちることがある。