色のコントラストチェッカー
2つのHEXカラーのWCAGコントラスト比と、AA・AAAのテキスト基準を確認します。
入力
例の値が入力されています。直接確認するか、値を変更してみてください。
入力はブラウザで処理されます。再読み込みすると例の値に戻ります。
結果
入力された例値を直接使用して結果を確認するか、値を変更してみてください。
WCAG 2.0の一般テキストAA 4.5:1、AAA 7:1、大文字AA 3:1を表示します。全体的なアクセシビリティ準拠評価ではありません。
結果を共有
ツールリンクと結果テキストを一緒に共有します。結果にはURLを入れません。以下の内容を確認して共有してください。
計算・変換基準
文字色と背景色のWCAGテキスト対比度を確認します。
比較率 = (明るい相対照度+0.05)/(暗い相対照度+0.05)
入力例
黒と白 = 21:1
黒#000000と白#FFFFFFの比率は21:1です。通常のテキストAA基準では4.5:1、大きなテキストAA基準では3:1がそれぞれ別途表示されます。
使用方法
- 入力された例値を使用するか、文字HEX、背景HEX項目を変更してください。
- 結果を確認を押して下の結果を確認してください。
- 必要なら、結果をコピーして取り出すことができます。
よくある質問
比率が満たされていれば、ウェブアクセシビリティが全て満足されますか？
いいえです。不透明な単色の2つのテキスト比較のみを検査します。実際の背景画像、透明度、状態別色、キーボード操作などは別途確認が必要です。境界値は切り上げ前の比率で判定されます。
大きなテキストはどのようなサイズを意味しますか？
WCAGの大文字基準では、一般フォントは18pt以上、太字フォントは14pt以上です。約24 CSS pxまたは太字では18.67 CSS pxに相当し、実際のフォントと表示状態も確認してください。
計算基準と参考資料
- W3C－WCAG 2.2テキスト対比基準
テキストのサイズに応じたAA対比の閾値と切り上げ前の判定