カラーコントラストチェッカー
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
チェックは当サーバーから実行します。入力したURLは取得しますが、結果は保存しません。 This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. 匿名化した実行単位の結果件数を集計調査に使う場合があります。URL、ドメイン、IPアドレス、識別子は含めず、100回未満の実行から統計を公開しません。
完全にブラウザー内で実行され、貼り付けた内容はアップロードも保存もされません。 匿名化した実行単位の結果件数を集計調査に使う場合があります。URL、ドメイン、IPアドレス、識別子は含めず、100回未満の実行から統計を公開しません。
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
このツールを評価
このツールについて
WCAG 2.2のAA・AAAコントラストを確認し、合格に最も近い色を探し、ブラウザー内でCSSまたはデザイントークンのパレットを監査します。
貼り付けた色の正確な計算と、URLの実際にレンダリングされたスタイルを分けて表示します。
機能
- WCAG 2.2 AA・AAAの比率確認
- 合格に近い前景色の提案
- CSSカスタムプロパティとTailwindトークンの監査
- URLの実計算スタイルを使ったコントラスト確認
仕組み
貼り付けモードでは入力された色の相対輝度と比率を計算します。URLモードではヘッドレスブラウザーでCSSカスケード、継承、不透明度、ブラウザー既定値を解決し、axe-coreの色コントラスト規則を実際のスタイルへ適用します。
制限事項
- 色の組み合わせだけを確認し、タイポグラフィ、フォーカス状態、画像内テキスト、貼り付けモードの実際の背景は確認しません。完成したUIも別途テストしてください。
- URLモードは入力した公開ページアドレスをサーバーへ送り、メータリングされたブラウザーで取得します。
よくある質問
必要なコントラスト比はどのくらいですか？
WCAG AAでは、標準テキストに4.5:1、大きなテキストと非テキストUIコンポーネントに3:1が必要です。WCAG AAAでは、標準テキストに7:1、大きなテキストに4.5:1が必要です。
これでページのアクセシビリティが証明されますか？
いいえ。色の組み合わせだけを確認し、文字組み、フォーカス状態、画像内のテキスト、貼り付けモードで実際にレンダリングされた背景は確認しません。設計時のチェックとして使い、完成したインターフェースもテストしてください。
パレットはどこへ送られますか？
貼り付けモードではブラウザ内に留まります。CSSカスタムプロパティ、Tailwind形式の名前と値のトークン、または16進カラーの一覧を貼り付けられます。サーバーへ情報を送るのはURLモードだけで、その内容は入力した公開ページのアドレスであり、パレットではありません。
URLモードは色の貼り付けとどう違いますか？
貼り付けた色では、入力した組み合わせを正確に計算します。URLモードは従量制のヘッドレスブラウザで実際のページを読み込み、CSSカスケード、継承、不透明度、ブラウザの初期値を解決した後の各要素の前景色と背景色を読み取ります。静的HTMLからの色の推測は誤る場合があるため、公開中のページで実際のコントラスト判定を得る唯一の方法です。
よくある問題と修正方法
- エラー 色の組み合わせが標準テキストのWCAG AA基準を満たしていません 修正: 標準テキストのコントラストが4.5:1以上になるまで前景色または背景色を変更し、ホバー、フォーカス、無効、訪問済みの各状態も再テストします。
- エラー 色の組み合わせが大きなテキストのWCAG AA基準を満たしていません 修正: 通常ウェイトで24px以上、または太字で18.66px以上のテキストが3:1のコントラストに達するまで、色の組み合わせを変更します。
- 警告 色の組み合わせが標準テキストのWCAG AAA基準を満たしていません 修正: プロジェクト要件がAAAの場合、標準テキストが7:1のコントラストに達するまで色の組み合わせを調整します。
- 警告 色の組み合わせが大きなテキストのWCAG AAA基準を満たしていません 修正: AAAが必要な場合、対象となる大きなテキストが4.5:1のコントラストに達するまで色の組み合わせを調整します。
- 警告 色の組み合わせが非テキスト要素のコントラスト指針を満たしていません 修正: 重要なアイコン、フォーカス表示、コントロールの境界、図形オブジェクトと隣接色とのコントラストを3:1以上に引き上げます。