色のコントラストチェッカー（WCAG）
色を16進数（#1f2937）またはrgb(31, 41, 55)で入力してください。
結果
4.54:1コントラスト比
- AA、通常の文字（4.5:1）
- ✓
- AA、大きな文字（3:1）
- ✓
- AAA、通常の文字（7:1）
- ✕
- AAA、大きな文字（4.5:1）
- ✓
- 判定した色
- #767676 / #ffffff
入力値
- 文字色
- #767676
- 背景色
- #ffffff
計算方法
各色の相対輝度を、線形化したsRGBチャンネルから計算します。
結果
コントラスト比
- AA、通常の文字（4.5:1）
- ✓
- AA、大きな文字（3:1）
- ✓
- AAA、通常の文字（7:1）
- ✕
計算方法
- 各色の相対輝度を、線形化したsRGBチャンネルから計算します。
- 比率 =（明るいL + 0.05）÷（暗いL + 0.05）。範囲は1:1～21:1です。
- 丸める前の比率をWCAG 2の基準と比較します。
例
白地に#767676を置くと4.54:1で、通常の文字はAA適合、AAAは不適合です。
注意点
- 大きな文字は24 px以上、または太字で18.66 px以上です。
- 透明度やグラデーションは考慮されません。
使い方
- Webページの文字色と背景色の読みやすさを確認します。
- 色の組み合わせがWCAG AAまたはAAAの目標を満たすか確認します。
よくある質問
通常の文字でWCAG AAに必要な比率は？
WCAG 2では、通常の文字に少なくとも4.5:1のコントラスト比が必要です。
WCAGで大きな文字とは何ですか？
CSSで24 px以上、または太字で約18.66 px以上の文字です。
透明色やグラデーションも判定されますか？
いいえ。入力した単色の比率を計算し、透明度やグラデーションは含めません。