色のコントラスト

白地に薄い灰色 #999999 のコントラスト比は 2.85:1 で、WCAG 2.2が本文に求める 4.5:1 を大きく下回ります。

コントラストが大切な理由

背景に対して薄いテキストは、ロービジョンの人、多くの高齢の読み手、日なたでスマートフォンを使うすべての人にとって読みにくいものです。WCAG 2.2は「薄い」を好みにまかせません。2つの色の相対輝度（黒の0から白の1までの数）を測り、コントラスト比 (L1 + 0.05) / (L2 + 0.05) で比べます。L1 は明るいほうの色です。結果は、同じ色どうしの 1:1 から、白地に黒の 21:1 までになります。色彩の講座ではこの式を一歩ずつ扱いました。ここではそれを使います。

満たすべき数値

レベルAAの達成基準1.4.3「コントラスト（最低限）」は、通常のテキストに少なくとも 4.5:1、大きなテキストに 3:1 を求めます。WCAGは大きなテキストを、18ポイント以上、または太字で14ポイント以上と定めています。レベルAAAの達成基準1.4.6はこれを 7:1 と 4.5:1 に引き上げます。達成基準1.4.11「非テキストのコントラスト」は、テキスト入力欄の枠線やグラフの線のように、見える必要があるコントロールや図の部分に 3:1 を求めます。ロゴ、純粋に装飾のテキスト、無効なコントロールの一部であるテキストは対象外です。

覚えておくとよい値がいくつかあります。灰色 #767676 は白地で 4.54:1 になり、AAに合格するいちばん明るい無彩色の灰色としてよく引き合いに出されます。#777777 は 4.48:1 で不合格です。より暗い #595959 は 7.00:1 に達し、AAAに合格します。鮮やかな色は誤解を招くことがあります。純粋な赤 #ff0000 は白地でわずか 4.00:1 ですが、深い赤 #c01c28 は 6.11:1 に達します。フォーム入力欄の中のプレースホルダーテキストはよくある不合格の例です。デザイナーがわざととても薄くすることが多いからです。

実際に色を確かめる

式を手で計算する必要はめったにありません。主なブラウザーの開発者ツールでテキスト要素を調べると、カラーピッカーが背景とのコントラスト比を示し、AAとAAAの基準を表す線も表示されることがよくあります。注意が必要な場合が2つあります。写真やグラデーションの上のテキストには背景が1つではないので、テキストが重なるいちばん明るい部分で確かめるか、後ろに単色のパネルを置きます。また、ダークテーマのあるサイトは2回確かめる必要があります。白地で合格する色が、黒に近い背景では不合格になることがあるからです。青 #1a5fb4 は白地で 6.29:1 ですが、真っ黒の上ではわずか 3.34:1 です。

色だけにたよらない

テキストと背景のコントラストは話の半分にすぎません。レベルAの達成基準1.4.1「色の使用」は、色を情報を示す唯一の手段にしてはならないとしています。赤 #c01c28 と青 #1a5fb4 はどちらも白地でよく読めますが、互いの比はわずか 1.03:1 です。グレースケールで見たり、赤と青を見分けられない人が見たりすると、同じ灰色になります。ですから、赤いラベルだけで示した必須の入力欄や、まわりのテキストと色だけで区別されるリンクには、言葉、アイコン、下線といった2つ目の手がかりが必要です。