このツールについて
2つの不透明な色のコントラスト比を計算し、実際の文字表示をプレビューします。通常の文字と大きな文字について、AA・AAAをそれぞれ判定します。このページで確認するのは色のコントラストだけであり、Webサイト全体のアクセシビリティ評価ではありません。
使い方
- 文字色と背景色を、不透明な3桁または6桁のHEXで入力します。
- 背景上の文字が実際にどう見えるか確認します。
- コントラスト比と4つの適合・不適合の判定を確認します。
- 配色を調整して再確認し、検証結果をコピーします。
使用例
- #000000と#ffffff → 21:1。
- 同じ色同士 → 1:1。
- #777777と#ffffff → 約4.48:1。通常の文字のAA基準である4.5:1を下回ります。
計算の仕組み
sRGBの各成分を255で割ります。c ≤ 0.04045の場合、線形化した成分はc / 12.92、それ以外は((c + 0.055) / 1.055)^2.4です。相対輝度はL = 0.2126R + 0.7152G + 0.0722B、コントラスト比は(明るい方のL + 0.05) / (暗い方のL + 0.05)で求めます。判定には丸め前の値を使用し、表示時だけ四捨五入します。
WCAG 2.xの文字コントラスト基準
- AA・通常の文字：4.5:1以上。
- AA・大きな文字：3:1以上。
- AAA・通常の文字：7:1以上。
- AAA・大きな文字：4.5:1以上。
大きな文字とは、通常18pt（24 CSS px）以上、または太字で14pt（約18.67 CSS px）以上の文字を指します。基準値との比較には常に四捨五入前のコントラスト比を使用します。
主な用途
- ボタンの文字色と背景色を確認する。
- テーマ内の本文や見出しのコントラストを検証する。
- WCAGの文字コントラスト基準に合わせてデザインを調整する。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
WCAGのコントラスト比とは何ですか？
文字色と背景色の相対輝度から色の差を測る値で、1:1～21:1の範囲になります。
4.5:1は何を意味しますか？
WCAG AAにおける通常の文字の最低コントラスト比です。4.5以上で適合となります。
AAとAAAの違いは何ですか？
文字のコントラストではAAAの方が厳しく、通常の文字で7:1、大きな文字で4.5:1が必要です。
大きな文字の定義は何ですか？
通常は18pt以上の文字、または14pt以上の太字です。それぞれ約24px、18.67pxに相当します。
透明な色やグラデーションも検証できますか？
このページでは不透明な単色だけを扱います。透明色は実際の背景と合成してから計算し、グラデーションは文字が重なる領域で最も低いコントラスト比を確認する必要があります。