Design Tools
カラーコントラストチェッカー
WCAGアクセシビリティ準拠のためのカラーコントラスト比をチェック
前景色
背景色
プレビュータイトル
選択した色の組み合わせで読みやすさを確認するためのサンプル本文テキストです。
16px
大きいテキスト（≥18pxまたは≥14px太字）は低いコントラストが必要です。
コントラスト比
14.18:1
通常テキスト (<18px)
AA (4.5:1)AAA (7:1)
大きいテキスト (≥18px / ≥14px bold)
AA (3:1)AAA (4.5:1)
UIコンポーネント
AA (3:1)
WCAGについて
WCAG 2.1 Level AA: 通常テキスト最低4.5:1、大きいテキスト3:1。
WCAG 2.1 Level AAA: 通常テキスト強化7:1、大きいテキスト4.5:1。
なぜカラーコントラストチェッカーを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓WCAG 2.1 AA and AAA level checks
- ✓Real-time contrast ratio calculation
- ✓Text preview on background
- ✓Suggested color adjustments
- ✓Large text vs normal text standards
- ✓Color picker integration
よくある質問
What is a good contrast ratio?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text.