カラーコードの変換
HEX・RGB・HSL を相互に変換し、背景と組み合わせたコントラスト比まで出します。
| 見本選んだ色そのもの | |
|---|---|
| HEXCSS・デザインツールで最も使う | #0017c1 |
| RGB各0〜255 | rgb(0, 23, 193) |
| HSL色相・彩度・明度。明るさだけ変えたいとき | hsl(233, 100%, 38%) |
背景と組み合わせて読めるか
WCAG 2.2 の達成基準 1.4.3 は、本文の文字と背景に 4.5:1 以上のコントラスト比を求めます。 大きな文字（24px 以上、または太字 18.67px 以上）は 3:1 です。
この文章がその組み合わせの見え方です。
| コントラスト比1:1 〜 21:1 | 11.10:1 |
|---|---|
| 本文の文字AA・4.5:1 以上 | 満たす |
| 大きな文字AA・3:1 以上 | 満たす |
| 本文の文字（厳しめ）AAA・7:1 以上 | 満たす |
白い背景では 11.10:1、黒い背景では 1.89:1 です。
よくある質問
コントラスト比はいくつあれば十分ですか？
WCAG 2.2 の達成基準 1.4.3（レベル AA）は、本文の文字と背景に 4.5:1 以上を求めます。24px 以上の文字、または太字 18.67px 以上の文字は 3:1 で足ります。より厳しい達成基準 1.4.6（レベル AAA）では、本文 7:1、大きな文字 4.5:1 です。
文字以外にもコントラストの基準はありますか？
あります。達成基準 1.4.11 は、ボタンの枠線や入力欄の境界など、操作に必要な部品に 3:1 以上を求めます。文字が読めても、入力欄がどこにあるか分からなければ操作できないためです。
HSL は何に使うのですか？
色相（何色か）・彩度（鮮やかさ）・明度（明るさ）に分かれているため、色味を保ったまま明るさだけを変える操作が簡単にできます。HEX では同じ操作に3つの値の同時調整が要ります。ホバー時に少し濃くする、といった配色を作るときに向いています。
#で始まる6桁は何を表していますか？
赤・緑・青の強さを、それぞれ16進数2桁（0〜255）で並べたものです。#FF8800 なら赤が255、緑が136、青が0です。3桁の #F80 は各桁を2回繰り返した省略形で、#FF8800 と同じ色になります。
色だけで情報を伝えてはいけないのですか？
達成基準 1.4.1 は、色を情報を伝える唯一の手段にしないことを求めます。赤で必須項目を示すだけでは、色の見え方が異なる人に伝わりません。記号や文言を併せて添える必要があります。この計算機の合否表示に✓と✕の記号を付けているのはそのためです。
コントラスト比の計算式
コントラスト比は、明るいほうの相対輝度を L1、暗いほうを L2 として (L1 + 0.05) / (L2 + 0.05) で求めます。値は 1:1（同じ色）から 21:1（白と黒）の範囲に収まります。
相対輝度は、赤・緑・青の各成分を 0〜1 に正規化し、ガンマ補正を戻したうえで 0.2126R + 0.7152G + 0.0722B として計算します。緑の係数が大きいのは、人の目が緑の明るさを 最も強く感じるためです。同じ「明るさ100」でも、緑は黄色く明るく見え、青は暗く沈みます。
この重みがあるために、青系の色は数値以上に暗く扱われます。 濃い青の文字は白背景で 4.5:1 を満たしやすい一方、青い背景に白文字を載せるのは難しくなります。
色の見え方は人によって違う
色の感じ方には個人差があります。日本人男性のおよそ5%、女性のおよそ0.2%は、 赤と緑の区別がつきにくい特性を持つとされています。 この割合は決して小さくありません。 利用者が100人いれば、数人はそこに含まれます。
コントラスト比は明るさの差だけを見ているため、色相の違いには依存しません。 つまりコントラスト比を満たしておけば、色の見え方が異なる人にも読めます。 逆に言えば、 赤と緑のように「色は違うが明るさが近い」組み合わせは、 コントラスト比が低く出ます。これは計算式の欠陥ではなく、 実際に区別しにくい組み合わせを正しく検出しているということです。