色の変換とコントラスト比の確認
色の表記を相互に変換し、文字色と背景色のコントラスト比を測ります。変換だけでは半分です — 実際に人が詰まるのは「この背景でこの文字が読めるのか」であり、そこはアクセシビリティの検査でいちばん落ちる項目でもあります。
本文はこう見えます
大きな文字はこう
7.52 : 1
- 合格 · AA 本文 (4.5:1)
- 合格 · AA 大文字 (3:1)
- 合格 · AAA 本文 (7:1)
比率は WCAG に従います。大きな文字とは太字18.66px、または24px以上を指します。アクセシビリティの検査でいちばん落ちる項目なので、灰色の文字は一度試してみる価値があります — よく使われる #777 は白地で4.48:1、わずかに届きません。
受け付ける表記と受け付けない表記
#abc・#aabbcc、カンマか空白で区切った rgb()・rgba()、hsl()・hsla() を読みます。四つ目の値(透明度)は読みますが捨てます。コントラスト比は不透明な二色の間で定義されるもので、半透明の文字の本当の対比は背景と混ざった後でしか分からないからです。red のような名前と8桁の HEX は受け付けません。カラーピッカーで選んだ値も同じ欄に入ります。
コントラスト比の求め方
それぞれの色の相対輝度を求めます。sRGB の値のガンマを戻して線形にし、赤 0.2126、緑 0.7152、青 0.0722 の重みで足します。二つの輝度にそれぞれ 0.05 を足して割ったものが比で、1:1 から 21:1 の間に収まります。緑の重みが大きいので、黄色は白の上でほとんど見えず、青は黒の上で暗く見えます。文字色と背景色を入れ替えても値は同じです。
AA・AAA と大きな文字
本文 4.5:1、大きな文字 3:1 が AA で、本文 7:1 が AAA です。大きな文字とは 24px 以上、または太字で 18.66px 以上のことです。3:1 はアイコンや入力欄の枠線といった UI 部品の基準でもあるので(WCAG 1.4.11)、その確認にも使えます。プレビューには本文の大きさと大きな文字の両方を描いているので、数字が際どいときは目でも見比べられます。
HSL を並べて出す理由
基準に届かないときは、たいてい明度を少し動かすだけで超えられます。HEX ではどの桁をどれだけ変えればいいか分かりにくく、HSL なら色相を保ったまま三つ目の値を下げるだけです。だから三つの表記を一緒に出しています。HSL は整数に丸めて表示するので、それをもう一度入れると RGB が一目盛りほどずれることがあります。
読めない値と、そのときの画面
red のような名前、#abcd の四桁、rgb(100% 0% 0%) のように百分率で書いた RGB は読めません。そのときはその欄の下に読めなかったという表示が出て、カラーピッカーは黒に戻り、コントラストの欄は両方の色が読めるまで丸ごと消えます。0〜255 を超える値は拒まずそのまま計算に入れてしまうので、入れないでください。
ピッカーと文字の欄は同じ値です
ピッカーで選ぶと六桁の HEX が欄に入り、欄に rgb() や hsl() を書けばピッカーがその色を示します。ただしピッカーは HEX しか出さないので、HSL で書いた値をピッカーで少し動かした瞬間に表記が HEX に変わります。読めている間は欄の下に三つの表記が並ぶので、必要なものはそこから取ってください。
よくある質問
基準はいくつですか
WCAGでは、本文が4.5:1、大きな文字(太字18.66px、または24px以上)が3:1でAAに達します。より厳しいAAAは本文に7:1を求めます。よく使われる灰色 #777 は白地で4.48:1、わずかにAAに届きません。
白地に使える一番明るい灰色は？
本文の AA では #767676 が 4.54:1 で通り、一段明るい #777 は 4.48:1 で届きません。AAA は #595959 が 7.00:1 でぎりぎりです。大きな文字やアイコンの 3:1 は #949494 が 3.03:1 で超えます。どれも境目に張り付いているので、一段暗くしておくほうが安全です。
貼り付けたものはサーバへ送られますか
送られません。すべてブラウザの中で動き、送信も保存もしません。だからこそ、ふつうならウェブページに貼り付けない社内の設定ファイルや本番のクエリにも使えます。通信を切ったままでも動きます。