アクセシビリティ
カラーコントラストチェッカー - WCAG AA・AAA
文字色と背景色のコントラストを WCAG AA・AAA 基準でチェック。通常テキスト、大きなテキスト、ボタン、リンク、ダークモードの色の組み合わせをプレビューできます。
読み やすさのプレビュー
デザインを公開する前に、このプレビューで文字、コントロール、UI の面の見え方を確認しましょう。
大きなテキスト · 通常テキスト
ボタンボタンコントラストを確認
コントラスト比
17.74:1
AAA- AA 通常テキスト ≥ 4.5合格
- AA 大きなテキスト ≥ 3合格
- AAA 通常テキスト ≥ 7合格
- AAA 大きなテキスト ≥ 4.5合格
使い方
前景色と背景色の組み合わせをテストし、通常・大きなテキストでの見え方をプレビューして、WCAG AA を満たす最も近い前景色を提案します。本文、ボタン、リンク、バッジ、ダークモードの面に。
- 1 文字色と背景色を選びます。
- 2 通常・大きなテキストの AA / AAA 判定を確認します。
- 3 基準を満たさない場合は提案された色を使います。
よくある質問
WCAG AA に必要なコントラスト比は？
通常のテキストは 4.5:1、大きなテキストは 3:1 です。
WCAG AAA に必要なコントラスト比は？
通常のテキストは 7:1、大きなテキストは 4.5:1 です。
ボタンやリンクの色もチェックすべき？
はい。通常、ホバー、フォーカス、無効、訪問済みの各状態で色の組み合わせが変わるため、それぞれ確認しましょう。
透明な色もチェックできますか？
半透明の前景や背景は、最終的に見える背景と合成した色でコントラストを評価する必要があります。