色コード変換(HEX・RGB・HSL)とコントラスト比
#RRGGBB・RGB・HSL の色コードを相互に変換。色見本を大きく表示し、文字色と背景色のコントラスト比と、WCAG の基準(AA・AAA)を満たすかも出します。
文字の色
背景の色
あいうえお Aa 123
ふつうの大きさの文字は、このくらいの見え方です。
文字の色
#333333
rgb(51, 51, 51)
hsl(0, 0%, 20%)
背景の色
#FFF7E6
rgb(255, 247, 230)
hsl(41, 100%, 95%)
コントラスト比 11.85:1
| WCAG の基準 | ふつうの文字 | 大きい文字 |
|---|---|---|
| AA(4.5:1・大きい文字は 3:1) | ◯ 満たす | ◯ 満たす |
| AAA(7:1・大きい文字は 4.5:1) | ◯ 満たす | ◯ 満たす |
大きい文字は、18ポイント以上(太字なら14ポイント以上)の文字です。
このページを共有
計算の考え方
HEX(#RRGGBB)は、赤・緑・青の強さを 00〜FF(0〜255)の16進数で表した色コードです。RGB は同じ強さを10進数で、HSL は色相(0〜360°)・彩度・明度(0〜100%)で表します。どれかを直すと、ほかも変わります。
コントラスト比は、2つの色の明るさの比です。W3C の WCAG 2.2 の式(相対輝度を使った (明るい色 + 0.05) ÷ (暗い色 + 0.05))で、1:1 〜 21:1 になります。文字と背景では 4.5:1 以上(大きい文字は 3:1 以上)が AA、7:1 以上(大きい文字は 4.5:1 以上)が AAA の基準です。
基準をぎりぎり満たさないのに満たすと出さないよう、コントラスト比は小数第2位で切り捨てて表示しています。日本の JIS X 8341-3 も、WCAG と同じ基準を使っています。
よくある質問
- Q. どのくらいの比なら読みやすいですか?
- A. ふつうの大きさの文字は 4.5:1 以上が目安です。お年寄りや、見えにくい人も読む文書では、7:1 以上をめざすとより読みやすくなります。
- Q. 画面で見た色と印刷の色がちがいます
- A. 画面と印刷では、色の出し方がちがうため、同じ色コードでも見え方が変わります。印刷するときは、試しに印刷して確かめてください。
- Q. #f80 のような3けたの色コードは?
- A. それぞれの文字を2つにした #ff8800 と同じ色です。このページでは3けたの形も入れられます。
最終更新日:
根拠にした制度・資料