HEX・RGB・HSL色コード変換
色コードを相互変換し、2色のコントラスト比を判定します。
大きな文字は概ね24px以上、または太字で約18.5px以上が目安です。実際の適合確認では文字サイズや太さも確認してください。
よく使う値
代表的な配色のコントラスト比
| 文字色 | 背景色 | 比率 | AA通常文字 |
|---|---|---|---|
| #000000 | #FFFFFF | 21.00:1 | 合格 |
| #333333 | #FFFFFF | 12.63:1 | 合格 |
| #555555 | #FFFFFF | 7.46:1 | 合格 |
| #767676 | #FFFFFF | 4.54:1 | 合格 |
| #777777 | #FFFFFF | 4.48:1 | 不合格 |
| #FFFFFF | #0066CC | 5.57:1 | 合格 |
| #000000 | #FFFF00 | 19.56:1 | 合格 |
| #FFFFFF | #0000FF | 8.59:1 | 合格 |
この道具について
HEXカラーコードをRGBとHSLへ相互変換し、文字色と背景色の相対輝度からコントラスト比を計算します。WCAGの通常文字・大きな文字に対するAAとAAAの基準をそれぞれ判定できます。
HEXは#RRGGBBまたは短縮形#RGBで入力します。RGBは各成分0〜255、HSLは色相0〜360度と彩度・明度0〜100%で表示します。
コントラスト比は各色のsRGB値を線形化して相対輝度を求め、明るい側と暗い側から（L1＋0.05）÷（L2＋0.05）で計算します。比率の範囲は1:1〜21:1です。
WCAGのAA基準は通常文字4.5:1以上、大きな文字3:1以上です。AAAは通常文字7:1以上、大きな文字4.5:1以上です。判定では表示用に丸める前の比率を使います。
よくある質問
- HEXをRGBに変換する方法は
- #RRGGBBを赤・緑・青の2桁ずつに分け、各16進数を0〜255の10進数へ変換します。たとえば#FF8000はRGB 255, 128, 0です。
- コントラスト比4.5対1とは何ですか
- WCAGのAAで通常文字に求められるしきい値です。相対輝度から計算し、4.5:1以上ならこの道具ではAA通常文字を合格と表示します。
- #777777の文字を白背景に使えますか
- 比率は約4.48:1で、AA通常文字の4.5:1をわずかに下回ります。#767676なら約4.54:1ですが、実際の文字サイズや太さも確認してください。
- 短縮HEXの#RGBも入力できますか
- 入力できます。#ABCは各桁を繰り返した#AABBCCとして変換します。
入力した内容はブラウザの中だけで処理され、どこにも送信されません。