カラー変換とコントラスト確認
HEX、rgb()、hsl()、CSS の色名 — 4種類すべて読み取れます。
階調
同じ色相を11段階の明度で。クリックすると現在の色になります。
コントラスト
2色間の比率を、WCAG の定義どおりに算出しています。
| 組み合わせ | 比率 | レベル |
|---|
しきい値：本文は4.5（AA）と7（AAA）、18pt以上または14pt太字の文字は3と4.5、UI部品と図は3。
いちばん近い合格色
動かすのは明度だけ。色相と彩度はそのままなので、色は依然としてあなたの色のままです。
プレビュー
比率は数字であって判定ではありません。4.5を超えていても、細いウェイトではなお読みにくいことがあります。
大きな見出しの文字
本文の文字。多くのページが実際に段落で使っている大きさです。
ボタンや操作部品このツールでできること
色を表記の間で変換するのは5行程度の算術です。難しいのは、その色の文字が実際に読めるかどうかで、その答えには多くのツールが省く一手間が要ります。このページにはその両方が、あなたが入力したのと同じ色で載っています。
使い方
- 1 どの表記でも構わないので色を入力するか、カラーピッカーを使います。
- 2 必要な表記をコピーするか、階調をクリックしてその色に移ります。
- 3 コントラストの表を確認します。「不合格」と付いた組み合わせは、誰かにとって読みづらいということです。
同じ色相が HSL では違って見える理由
HSL は角度もパーセントも整数に丸めるため、HSL に変換して戻すと元のバイト値に必ずしも一致しません。そのためここで表示する HEX は常に入力値から導いており、HSL を経由した往復の結果は使いません。そうしないとクリックのたびに1段ずつずれてしまいます。
コントラストの数値が意味するもの
比率は、同じ色どうしの 1:1 から、純白の上の純黒である 21:1 までの範囲を取ります。下の基準値が、このツールの判定に使っているものです。
| 4.5:1 | 通常の本文、WCAG AA |
| 3:1 | 大きい文字や太字、WCAG AA |
| 7:1 | 通常の本文、WCAG AAA |
| 21:1 | 到達しうる最大の比率：白地に黒 |
多くのツールが省く一手間
相対輝度はチャンネル値の平均ではありません。各チャンネルはまず線形化する必要があります。HEX コードの数値はガンマ符号化されており、光量に比例していないからです。この手順を飛ばしても比率はもっともらしい数字として出ますが、それは誤りです。しかも誤差は中間調で最大になり、インターフェースの色の多くはまさにそこにあります。
コントラストは必要条件であって十分条件ではない
ある組み合わせが 4.5:1 を満たしていても、良い選択とは限りません。色覚特性によっては比率が高くても見分けがつかない組み合わせがありますし、意味を色だけに担わせるべきではありません。ここでの「合格」は最低ラインを越えたという意味であって、デザインへの判定ではありません。