階調

同じ色相を11段階の明度で。クリックすると現在の色になります。

コントラスト

2色間の比率を、WCAG の定義どおりに算出しています。

色を表記の間で変換するのは5行程度の算術です。難しいのは、その色の文字が実際に読めるかどうかで、その答えには多くのツールが省く一手間が要ります。このページにはその両方が、あなたが入力したのと同じ色で載っています。

使い方

1. 1 どの表記でも構わないので色を入力するか、カラーピッカーを使います。
2. 2 必要な表記をコピーするか、階調をクリックしてその色に移ります。
3. 3 コントラストの表を確認します。「不合格」と付いた組み合わせは、誰かにとって読みづらいということです。

同じ色相が HSL では違って見える理由

HSL は角度もパーセントも整数に丸めるため、HSL に変換して戻すと元のバイト値に必ずしも一致しません。そのためここで表示する HEX は常に入力値から導いており、HSL を経由した往復の結果は使いません。そうしないとクリックのたびに1段ずつずれてしまいます。

コントラストの数値が意味するもの

比率は、同じ色どうしの 1:1 から、純白の上の純黒である 21:1 までの範囲を取ります。下の基準値が、このツールの判定に使っているものです。

多くのツールが省く一手間

相対輝度はチャンネル値の平均ではありません。各チャンネルはまず線形化する必要があります。HEX コードの数値はガンマ符号化されており、光量に比例していないからです。この手順を飛ばしても比率はもっともらしい数字として出ますが、それは誤りです。しかも誤差は中間調で最大になり、インターフェースの色の多くはまさにそこにあります。

コントラストは必要条件であって十分条件ではない

ある組み合わせが 4.5:1 を満たしていても、良い選択とは限りません。色覚特性によっては比率が高くても見分けがつかない組み合わせがありますし、意味を色だけに担わせるべきではありません。ここでの「合格」は最低ラインを越えたという意味であって、デザインへの判定ではありません。