運用
カラーコントラストチェッカー
広告
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の十六進数値で入力するか、カラーピッカーで直接選択できます。
以下は可能です:
- Alphaを調整して前景色の透明度を変えてください。
- 明るさスライダーを使って色を明るくしたり暗く見せたりします。
その後、当社のツールはコントラスト比を計算し、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ポイント(約Px)以上
カラーピッカーのスポイトを使って、画面上のどのものからも正確な色を抽出できます。実際のデザインやボタン、背景を簡単にテストできます。
色だけで目立つリンクがある場合は、カラーコントラストチェッカーを使ってアクセシビリティ基準を満たし、誰でも読みやすいものにしてください。