カラーコードの変換
| 見本選んだ色そのもの | |
|---|---|
| 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 は、色を情報を伝える唯一の手段にしないことを求めます。赤で必須項目を示すだけでは、色の見え方が異なる人に伝わりません。記号や文言を併せて添える必要があります。この計算機の合否表示に✓と✕の記号を付けているのはそのためです。
#rrggbbaa の最後の2桁は何ですか？
不透明度です。CSS Color Module Level 4 では、8桁の16進の最初の6桁が色、最後の2桁が不透明度で、00 が完全に透明、ff が完全に不透明です。この計算機は最後の2桁を落として、色そのものを変換します。
rgb(255 136 0) と rgb(255, 136, 0) はどちらが正しいですか？
どちらも正しい書き方です。空白で区切り、不透明度を / のあとに書く形がいまの定義で、コンマ区切りは歴史的な理由で残されている書き方です。この計算機はどちらも読めます。
HEX・RGB・HSL を相互に変換し、背景と組み合わせたコントラスト比まで出します。
コントラスト比の計算式
コントラスト比は、明るいほうの相対輝度を 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人いれば、数人はそこに含まれます。
コントラスト比は明るさの差だけを見ているため、色相の違いには依存しません。 つまりコントラスト比を満たしておけば、色の見え方が異なる人にも読めます。 逆に言えば、 赤と緑のように「色は違うが明るさが近い」組み合わせは、 コントラスト比が低く出ます。これは計算式の欠陥ではなく、 実際に区別しにくい組み合わせを正しく検出しているということです。
CSS の色の書き方は、どれも sRGB の色
W3C の CSS Color Module Level 4 は、HTML で指定した色と、色空間の情報を持たない画像を sRGB として扱うと決めています。同じ仕様が挙げる sRGB の色の書き方は、# で始まる 16 進、rgb()、hsl()、hwb()、色の名前、transparent の 6 つで、この計算機が読むのはそのうち 16 進・rgb()・hsl() の 3 つです。
16 進は 3・4・6・8 桁のどれかで、8 桁の最後の 2 桁は不透明度（00 が透明、ff が不透明）です。 rgb() は 3 つの値を空白で区切り、不透明度は / のあとに書く形がいまの書き方で、 コンマ区切りは「歴史的な理由で」残されている書き方として定義されています。 この計算機はどちらの形も読み、不透明度は落として色そのものを扱います。
色相が 360 度なのは、虹を輪にしているから
hsl() の最初の値は色相で、仕様は「色の輪の角度」と説明しています。虹をねじって輪にし、 両端の紫と赤のあいだに赤紫を足したものです。単位を付けない数は度として読まれ、 0 以上 360 未満に正規化されます。 hsl(360 0 0) の色相は 0、hsl(540 0 0) は 180 です。 0 度が sRGB の赤で（360 度や 720 度も赤）、120 度が緑、240 度が青です。
| 色 | HEX | 色相 |
|---|---|---|
| 赤 | #ff0000 | 0° |
| 黄 | #ffff00 | 60° |
| 緑 | #00ff00 | 120° |
| 青 | #0000ff | 240° |
仕様は、HSL の明度が見た目の明るさとずれることも注記しています。 青 hsl(240 100% 50%) と黄 hsl(60 100% 50%) は明度がどちらも 50% ですが、黄のほうがはるかに明るく見えます。 文字の読みやすさを見るときに、HSL の明度ではなく相対輝度から計算したコントラスト比を使うのは、そのためです。
出どころ: CSS Color Module Level 4（新しいタブで開きます）の「Color Spaces of Untagged Colors」「sRGB Colors」「The RGB hexadecimal notations」「HSL Colors」と 同じ仕様の「Hue」（新しいタブで開きます）の原文。