使い方
画面の上半分がカラーコンバーター、下半分がコントラストチェッカーです。2つは別々に動き、片方を変えてももう片方には響きません。
カラーコンバーター
- 色の欄にCSSの色の値を入力するか、左のカラーピッカーで選びます。HEXは3・4・6・8桁のいずれでも読め、
#はなくても構いません。rgb(51, 102, 255)とrgb(51 102 255)のどちらの書き方にも、rebeccapurpleのような色名にも対応しています。 - 色見本の隣にあるアルファ（不透明度）のスライダーで、透け具合を変えます。見本の後ろにある市松模様の見え方で確かめられます。
- すべての形式に、HEX、RGB、HSL、HWB、LAB、LCH、OKLCHの7行が並びます。コピーは行ごとにできます。アルファが100%を下回ると、8桁で書いた「HEX（アルファ付き）」の行が1つ加わります。
コントラストチェッカー
- 文字色と背景色を入力します。「色を入れ替える」を押せば、2つが逆になります。
- コントラスト比に比率が出て、その下の4つの枠に、基準ごとの「合格」か「不合格」が表示されます。
- いちばん下のプレビューで、大きい文字と通常の文字での見え方を確かめます。
1つの色を7通りに書く
最初から入っている #3366ff を変換すると、次のようになります。
| 形式 | 結果 | 数字の意味 |
|---|---|---|
| HEX | #3366ff |
赤・緑・青を2桁の16進数で |
| RGB | rgb(51, 102, 255) |
赤・緑・青を0〜255で |
| HSL | hsl(225, 100%, 60%) |
色相角、彩度、明度 |
| HWB | hwb(225 20% 0%) |
色相角、混ぜる白の量、混ぜる黒の量 |
| LAB | lab(47.4 26.93 -82.47) |
明度、緑から赤への軸、青から黄への軸 |
| LCH | lch(47.4 86.76 288.08) |
明度、彩度、色相角 |
| OKLCH | oklch(0.5726 0.2338 265.28) |
明度、彩度、色相角 |
HEXとRGBは、同じ数字を別の進法で書いただけです。HSLとHWBは、その数字を人が扱いやすい軸に組み直しています。LAB・LCH・OKLCHは人の色の感じ方に合わせて作られた色空間で、なかでもOKLCHは、LCHを知覚の面でより均等になるように整えたものです。CSSでは oklch() としてそのまま書けます。ここで気をつけたいのは色相角で、同じ青なのにHSLでは225、LCHでは288.08、OKLCHでは265.28と、ばらばらの値になります。角度の基準が色空間ごとに違うためで、ある形式の数字を別の形式にそのまま持ち込むと、違う色になってしまいます。
HSLの明度とOKLCHの明度
HSLの明度は、赤・緑・青のうちいちばん大きい値といちばん小さい値の平均です。そのため、目で見た明るさとはあまり一致しません。純粋な黄色 hsl(60 100% 50%) と純粋な青 hsl(240 100% 50%) は、HSLの明度がどちらも50%です。この2色をコンバーターに入れると、次のようになります。
- 黄色は
oklch(0.968 0.211 109.77)で、OKLCHの明度は0.968です。 - 青は
oklch(0.452 0.3132 264.05)で、OKLCHの明度は0.452です。
白い背景に載せて測れば、この差がそのまま出ます。コントラストチェッカーで背景色を #ffffff にすると、黄色の #ffff00 は1.07:1でほとんど見えず、青の #0000ff は8.59:1です。色相だけを変えて明るさのそろった配色を作りたいときは、HSLの明度ではなくOKLCHの明度をそろえるほうが、むらなく仕上がります。
WCAGのコントラスト比の求め方
計算にはWCAG 2の式を使っています。まず、それぞれの色の相対輝度（relative luminance。線形に直した赤・緑・青の値に重みを掛けて足し合わせた値）を求めます。次に、明るいほうをL1、暗いほうをL2として、(L1 + 0.05) ÷ (L2 + 0.05) を計算します。2色が同じなら1:1、黒と白なら21:1です。
| 画面の基準 | 必要な比率 |
|---|---|
| AA・通常テキスト | 4.5:1 |
| AA・大きいテキスト | 3:1 |
| AAA・通常テキスト | 7:1 |
| AAA・大きいテキスト | 4.5:1 |
「大きいテキスト」にあたるのは、通常の太さなら18pt（約24px）以上、太字なら14pt（約19px）以上の文字です。AAは多くのアクセシビリティ指針が求めている水準、AAAはそれよりも厳しい水準です。
- 最初から入っている文字色
#1f2937と背景色#ffffffの組み合わせは14.67:1で、4つの基準すべてに合格します。 - グレーの
#767676は、白い背景で4.54:1となり、AA・通常テキストに合格します。これより1段階明るい#777777は4.47:1で、不合格です。
画面に出る比率は、小数第2位より下を四捨五入せず、切り捨てています。4.499:1の組み合わせが4.50:1と表示されているのに不合格、という食い違いを避けるためです。合否そのものは、切り捨てる前の値で判定します。
半透明の色のコントラスト
WCAGの式が想定しているのは不透明な色だけです。そこでアルファのある色は、実際に画面に見える色へいったん合成してから計算します。
- 背景色が半透明なら、白い下地に重ねたときの色として扱います。
- 文字色が半透明なら、そうして決まった背景色に重ねたときの色として扱います。
文字色 rgb(0 0 0 / 50%)、背景色 #ffffff の場合、文字はグレーになって3.97:1となり、合格するのはAA・大きいテキストだけです。実際のページで、半透明の背景の下に白以外の色や写真が敷かれていれば、結果は違ってきます。そのときは、最終的に画面に見えている背景色を、不透明な値で入力して測ってください。
sRGBの色域に収まらない色
LAB・LCH・OKLCHでは、一般的なsRGBの画面では出せない色まで書き表せます。oklch(70% 0.3 150) がその一例です。この値を入れると色域の外であることを知らせる案内が出て、結果は次のようになります。
- HEXは
#00cb00、RGBはrgb(0, 203, 0)です。これは入力した色そのものではなく、sRGBの範囲に収まるように丸めた色です。 - LAB・LCH・OKLCHの行には、丸める前の元の色がそのまま出ます。
- HSLとHWBの行は、HEX・RGBと同じく、丸めた色をその形式に移した値です。
hsl(120, 100%, 39.84%)とhwb(120 0% 20.32%)になり、範囲を外れた数字は出ません。
色見本とカラーピッカーに出ている色も、丸めたあとの色です。