運用
カラーコントラストチェッカー
広告
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
以下に色の組み合わせを入力してカラー コントラスト チェッカーでテストし、アクセシビリティ基準を満たしているかどうかをすぐに確認できます。
カラーコントラストチェッカーの仕組み
RGB 16 進値を使用して前景色 と 背景 の色を入力するか、カラー ピッカー で直接選択します。
- アルファ を調整して、前景色の透明度を変更します。
- 明度 スライダーを使用して、色を明るくまたは暗くします。
次に、このツールはコントラスト比を計算し、WCAG ガイドラインに照らしてチェックします。
- WCAG 2.0 レベル AA
- 通常の本文テキストの場合は少なくとも 4.5:1
- 大きなテキストの場合は少なくとも 3:1
- WCAG 2.1 (UI とグラフィックス)
- アイコン、枠線、その他のインターフェース コンポーネントについては少なくとも 3:1
- WCAG レベル AAA
- 通常のテキストの場合は少なくとも 7:1
- 大きなテキストの場合は少なくとも 4.5:1
大きなテキスト は、次のいずれかを意味します。
- 14 ポイント (約 18.66 ピクセル) 太字、または
- 18 ポイント (約 ピクセル) またはそれ以上
カラーピッカーのスポイトを使用して、画面上のあらゆるものから正確な色を取得できます。
色だけで目立つリンクの場合は、カラー コントラスト チェッカーを使用して、リンクがアクセシビリティ基準を満たしており、誰にとっても読みやすいものであることを確認してください。