色コード変換・コントラスト比
HEX・RGB・HSL・CSS の色名を相互に変換し、文字色と背景色のコントラスト比が WCAG の AA・AAA を満たすかを判定します。
文字の色
- HEX
- #18202c
- RGB
- rgb(24, 32, 44)
- HSL
- hsl(216, 29%, 13%)
背景の色
- HEX
- #ffffff
- RGB
- rgb(255, 255, 255)
- HSL
- hsl(0, 0%, 100%)
- 色名
- white
コントラスト比(WCAG 2.2)
コントラスト比 16.38:1。通常の文字の AA を満たします。
16.38:1
- 合格通常の文字 AA4.5:1 以上(達成基準 1.4.3)
- 合格大きい文字 AA3:1 以上(達成基準 1.4.3)
- 合格通常の文字 AAA7:1 以上(達成基準 1.4.6)
- 合格大きい文字 AAA4.5:1 以上(達成基準 1.4.6)
- 合格ボタンの枠・アイコンなど AA3:1 以上(達成基準 1.4.11)
「大きい文字」は、18pt(約24px)以上、または太字で14pt(約18.7px)以上の文字です。比は切り捨てて表示しています(4.499:1 を 4.50:1 と表示して合格に見せないため)。
結果は、使う前にご自身で内容を確認してください。免責事項
使い方
- 「文字の色」と「背景の色」に、#2b4c9b・rgb(43, 76, 155)・hsl(222, 57%, 39%)・navy のような色を入力するか、「選ぶ」から色を選びます。
- それぞれの色の HEX・RGB・HSL の書き方が表示されるので、使う形式の「コピー」を押します。
- 下のコントラスト比と判定で、文字が読みやすい組み合わせかを確かめます。
よくある質問
コントラスト比はいくつあればよいですか?
ウェブアクセシビリティの基準(WCAG 2.2)では、通常の文字は 4.5:1 以上(AA)、より高い基準(AAA)では 7:1 以上です。大きい文字や、ボタンの枠・アイコンは 3:1 以上が目安です。
透明度のある色はどう測りますか?
半透明の文字色は背景色に重ねた見た目の色で測ります。背景色が半透明のときは、白い面の上に置いたものとして測ります。実際の背景が白でない場合は、重なった後の色を背景に入力してください。
カラーピッカーで選ぶと透明度が消えます。
ブラウザのカラーピッカーは透明度を扱えないためです。透明度は、コードの欄に #2b4c9b80 や rgb(43 76 155 / 50%) のように書いて指定してください。