カラーコントラスト診断
前景色と背景色の組み合わせから、読みやすさとWCAG目安を確認します。
色の組み合わせAAAに適合
プレビュー読みやすさを確認するテキスト
前景色と背景色の組み合わせから、読みやすさとWCAG目安を確認します。
判定AAAに適合
13.77:1
コントラスト比WCAG AA
通常テキスト適合
大きなテキスト適合
WCAG AAA
通常テキスト適合
大きなテキスト適合
パレット比較
| 文字色 / 背景色 | #1F2233 | #F5EFE7 | #78B5E4 | #79C06B |
|---|---|---|---|---|
| #1F2233 | 1.00 | 13.77 | 7.14 | 7.17 |
| #F5EFE7 | 13.77 | 1.00 | 1.93 | 1.92 |
| #78B5E4 | 7.14 | 1.93 | 1.00 | 1.00 |
| #79C06B | 7.17 | 1.92 | 1.00 | 1.00 |
このツールについて
前景色と背景色の組み合わせから、読みやすさとWCAG目安を確認します。
- このツールはブラウザ内で処理します。ファイルや入力内容をサーバーへアップロードせずに使えます。
ユースケース
- 公開前に読みやすさやアクセシビリティの目安を確認する
- デザイン変更後に問題が増えていないか見直す
- 関係者へ確認結果を共有する
よくある質問
- 何ができますか？
- 前景色と背景色の組み合わせから、読みやすさとWCAG目安を確認します。
- 入力内容はどのように扱われますか？
- 処理はブラウザ内で行われます。ファイルや入力内容は、処理のためにサーバーへ送信されません。
- この結果だけで基準を満たしたと言えますか？
- 目安として利用できます。最終判断では、実際の画面やコンテンツの文脈もあわせて確認してください。