色のコントラストチェックツール
チェックイン WCAG AA と AAA のテキストは、不透明の六角色のコントラストです。 ペアをプレビューし、色を交換し、より高いコントラストのテキストの代替を適用します。
対照報告書
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
出力テキストは英語のままです。入力内容はそのまま保持されます。
サインアップはありません。 AIクレジットなし。 このツールは、お使いのブラウザで出力を組み立てます。
アイデアから何か役に立つものまで。
- 01
テキストと背景色を入力します。
- 02
計算された比率および普通または大きいテキストのしきい値を確認します。
- 03
提案されたテキストカラーを試し、結果をエクスポートします。
小さな文脈。
コントラスト比は、 WCAG 不透明のsRGB色のための相対的な内腔の方式。 AAの通常のテキストは4.5:1とAAの大きいテキストは3:1を必要とします。 大文字は一般的に少なくとも24を意味します CSS ピクセル、またはおよそ 18.67 CSS 太字のピクセル。 生の比率は、丸みを帯びる前に結果を決定します。 アクセシビリティ監査ではなく、色チェックです。
よくある質問
透明色を入ることはできますか?
いいえ。 不透明な3桁または6桁の六角値を使用します。 測定する前に、最終的な背景に透明色を合成します。
合格率は、私のページがアクセス可能か?
いいえ。 キーボードナビゲーション、セマティクス、フォーカス、読みやすいサイジング、その他の要件はテストを必要としています。 ツールは、このテキスト/背景のペアだけを評価する。