· 開発

薄いグレーの文字はなぜ読みにくいのか：WCAG のコントラスト比の計算

白背景の薄いグレーの文字がアクセシビリティチェックで不合格になる理由を、WCAG 2 の相対輝度とコントラスト比の式で説明し、4.5:1・3:1・7:1 の基準とダークモードの注意点を実際の色で整理しました。

開発アクセシビリティ

デザインカンプでは上品に見えた入力欄のプレースホルダー。白い背景に #aaaaaa くらいの薄いグレーで、画面がすっきりまとまっています。ところが、晴れた日に屋外でスマートフォンを開くと、ほとんど読めません。画面を暗くしたノートパソコンや、老眼が気になり始めた人の目でも同じことが起こります。

アクセシビリティのチェックツールは、この文字を「2.32:1」という数字で不合格にします。この数字の出どころが分かれば、グレーを勘で選ぶ必要はなくなります。

白背景に置いた6つのグレーの文字のコントラスト比。#cccccc は 1.61:1、#999999 は 2.85:1 で不合格、#777777 は 4.48:1 で大きな文字にのみ使え、#767676 は 4.54:1 で本文の AA 基準を満たし、#595959 は 7.00:1 で AAA を満たし、#1d1d1f は 16.83:1 です。下には 1:1 から 21:1 までの対数目盛りに、3:1（大きな文字・UI 部品）、4.5:1（本文 AA）、7:1（本文 AAA）の基準線が示されています。

人の目は緑にいちばん敏感

WCAG 2 が使うのは、色の**相対輝度（relative luminance）**です。その色がどれだけ明るく感じられるかを、0（黒）から 1（白）で表した値です。計算は2段階です。

まず sRGB の各チャンネル（0〜255）を 255 で割り、画面が明るさを表すための非線形なカーブを戻して線形の値にします。

c = 値 / 255
c ≤ 0.04045 なら  c / 12.92
それ以外は        ((c + 0.055) / 1.055) ^ 2.4

次に3つのチャンネルに重みを掛けて足します。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

緑の重みは青のおよそ10倍です。人の目が緑の光にずっと敏感だからです。鮮やかな青 #0000ff の上なら白い文字がよく読めるのに、黄色 #ffff00 の上の白い文字がほとんど見えないのは、このためです。

（古い版の WCAG では境界値が 0.03928 と書かれています。8ビットの色では2つの値の間に入る整数がないので、どちらで計算しても結果は同じです。）

コントラスト比は明るいほうを暗いほうで割る

2つの色の輝度が分かれば、コントラスト比は次の式で求めます。

コントラスト比 = (明るいほうの L + 0.05) / (暗いほうの L + 0.05)

0.05 は画面に映り込む周囲の光を見立てた値です。これがあるので黒どうしでも0で割ることにならず、結果は 1:1（同じ色）から 21:1（白と黒）の範囲に収まります。

このサイトの緑のアクセントカラーで実際に計算してみます。#0a7f47 は R=10、G=127、B=71 です。線形の値にするとそれぞれ約 0.003、0.212、0.063 で、重みを掛けて足すと L ≈ 0.157 になります。白の L は 1 なので、コントラスト比は (1 + 0.05) / (0.157 + 0.05) ≈ 5.07:1。本文の基準 4.5:1 を超えています。

それより少し明るい緑 #0e9e58 は 3.47:1 です。目で見ると十分濃く感じても、白背景のリンク色としては基準に届きません。このサイトがライトモードとダークモードでアクセントカラーを分けているのはそのためです。

基準は文字の大きさと役割で変わる

対象 AA AAA WCAG の達成基準
通常の本文 4.5:1 7:1 1.4.3、1.4.6
大きな文字（24px 以上、太字は約 18.66px 以上） 3:1 4.5:1 1.4.3、1.4.6
入力欄の枠線、アイコン、フォーカス表示などの UI 部品 3:1 — 1.4.11

大きな文字の基準が低いのは、線が太く大きくなるほど、コントラストが低くても読み取りやすくなるからです。仕様の元の単位は 18pt、太字なら 14pt で、これを CSS ピクセルに直したのが 24px と約 18.66px です。

覚えておくと便利な境目があります。白背景で 4.5:1 を超える最も明るいグレーは #767676（4.54:1）です。1段階明るい #777777 は 4.48:1 で届きません。デザインシステムで「補足テキストのグレー」を決めるときの目安になります。

基準の対象外になるものもあります。無効化されたボタンの文字、純粋な装飾、ロゴの中の文字です。一方、入力欄のプレースホルダーは利用者が読むべき文字なので対象に入ります。冒頭の薄いグレーが問題になるのはこのためです。

コントラストだけでは足りない

赤と緑は色相こそ正反対でも、輝度が近いことがあります。#ff0000 と #00ff00 のコントラスト比はわずか 2.91:1 です。P型・D型の色覚の人には、2つがほぼ同じ明るさのくすんだ色に見えることがあります。

そこで WCAG 1.4.1 は、色だけで情報を伝えないことを求めています。入力エラーを赤い枠線だけで示さずアイコンや「必須項目です」といった文を添える、グラフの線を色だけでなく線の種類やラベルでも区別する、といった工夫です。選んだ色がどう見えるかは色覚シミュレーターで確かめられます。

ダークモードでは計算し直す

ライトモードで合格した色を、そのまま暗い背景に置くと結果が変わります。先ほどの #0a7f47 は黒背景では 4.14:1 に下がります。このサイトがダークモードでアクセントカラーを #1ed47c（黒に対して 10.76:1）に切り替えているのはこのためです。

反対方向の失敗もよくあります。真っ白 #ffffff と真っ黒 #000000 はコントラスト比が最大の 21:1 ですが、長い文章ではまぶしく感じる人が少なくありません。そのため多くのデザインシステムでは、本文を少しグレーがかった白に、背景を濃いグレーにしています。それでも 15:1 前後あるので、基準には十分な余裕があります。

次の基準はまだ草案

WCAG 2 の式はシンプルな反面、暗い色どうしの組み合わせを実際より読みやすく評価しがちだという指摘があります。次の WCAG 3 の草案では APCA という新しい計算方法が候補に挙がっていますが、まだ作業草案（Working Draft）の段階です。JIS X 8341-3 を含め、現在の基準や調達要件は WCAG 2.x に基づいています。新しい方法を参考にする場合も、WCAG 2 の基準は合わせて満たしておくのが安全です。

色を選びながらその場で計算する

カラーコード変換ツールに HEX・RGB・HSL のどの形式でも色を入れると、白い文字・黒い文字とのコントラスト比と、AA・AAA を満たすかどうかを表示します。#777777 と #767676 を順に入れると、1段階の違いで結果が分かれるのが分かります。

参考

  • W3C「Web Content Accessibility Guidelines (WCAG) 2.2」：1.4.1 色の使用、1.4.3 コントラスト（最低限）、1.4.6 コントラスト（高度）、1.4.11 非テキストのコントラスト、用語「コントラスト比」「相対輝度」
  • W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」
  • W3C「WCAG 3.0 Working Draft」
  • JIS X 8341-3:2016

ブログへ