Area Contrast Checker

Area Contrast Checker は、ページ上で範囲をドラッグ選択し、表示中のピクセルをサンプリングして色コントラストを確認できる Chrome 拡張機能です。WCAG 2.1/2.2 と APCA の評価に対応し、画像、グラデーション、オーバーレイなど複雑な Web コンテンツのアクセシビリティ確認に役立ちます。

AIテストQA

ウェブサイトを訪問

Area Contrast Checker とは？

Area Contrast Checker は、ページ上の範囲をドラッグで選択し、レンダリングされた Web コンテンツの色コントラストを確認できる Chrome 拡張機能です。CSS の計算値やスポイトによる手動取得だけに頼らず、表示中の実際のピクセルをサンプリングして前景色と背景色を推定します。

このツールは、画像、グラデーション、オーバーレイ、Canvas コンテンツ、その他のレイヤー化された интерфейс でコントラスト確認が必要なアクセシビリティレビュー向けに作られています。WCAG 2.1/2.2 のコントラスト結果と APCA 値を表示し、選択した範囲がコントラスト目標を満たさない場合は配色候補も提案します。

主な機能

範囲ベースのピクセル分析: ユーザーが範囲をドラッグして選択すると、拡張機能がレンダリングされたピクセルをサンプリングし、実際に表示されている内容から前景色と背景色を推定します。
WCAG 2.1 / 2.2 チェック: 通常テキスト、大きなテキスト、UI コンポーネントについて、成功基準 1.4.3 と 1.4.11 に照らしてコントラストを評価します。
APCA 対応: APCA の Lc 値を表示し、WCAG 3.0 の議論に関連する手法でコントラストを確認できます。
色相を保つ配色提案: コントラストが不足している場合、元の色相を保ちながらコントラストを改善する代替色を提案できます。
複数の色形式: 色は HEX、RGB、HSL、OKLCH で表示・コピーできます。
Manual Picker Mode: 自動の範囲分析だけでは不十分な場合に、特定のピクセルを選択して結果を微調整できます。
Page Interaction Mode: Windows では Alt、Mac では Option を押し続けると一時的にページ操作が復元され、チェックを終了せずにクリック、ホバー、移動ができます。
Retina と高 DPI 対応: サンプリング時にデバイスピクセル比を考慮し、高解像度画面での精度を高めます。

Area Contrast Checker の使い方

拡張機能アイコンをクリックしてチェックを開始します。
調べたいページ部分をドラッグします。
ツールに表示されるコントラスト比、WCAG 結果、または APCA 値を確認します。
必要に応じて、Manual Picker Mode に切り替えるか、検出された色を任意の形式でコピーします。

使用例

テキストがグラデーション、画像、またはレイヤー背景の上にあるマーケティングページや製品画面のアクセシビリティ監査。
選んだ前景色と背景色の組み合わせが WCAG の目標を満たすかどうかを確認したいデザインレビュー。
近接する背景に対してコントラスト検証が必要なボタン、ラベル、その他の UI コンポーネントのチェック。
DOM ベースのコントラストツールでは実際の描画結果を反映しにくい、Canvas やイラスト中心のページ。
元の色相に近いまま、コントラスト安全な代替色へ素早く調整したい場合。

FAQ

Area Contrast Checker はページ DOM を解析しますか、それとも描画された画面を解析しますか？選択した範囲の描画済みピクセルを解析するため、実際にユーザーが見ているものを反映しやすくなります。
WCAG と APCA に対応していますか？はい。ページでは WCAG 2.1/2.2 チェックと APCA の Lc 値への対応が記載されています。
画像やグラデーションに対応していますか？製品説明では、ピクセル分析が画像やグラデーションで信頼性高く機能するとされており、オーバーレイ、Canvas 要素、複雑な視覚レイヤーにも言及されています。
検出した色をコピーできますか？はい。コピー操作があり、HEX、RGB、HSL、OKLCH 形式に対応しています。
このツールはアクセシビリティ準拠を保証しますか？いいえ。ソースでは、色の検出はピクセル分布に基づく推定であり、最終的な準拠判断は別途確認すべきと述べています。

代替手段

スポイト型のカラーピッカー: 個別の色を手動でサンプルでき、1 組ごとの確認ではより正確な場合がありますが、繰り返しチェックには時間がかかります。
自動アクセシビリティスキャナー: ページ全体を広く監査するのに便利ですが、画像、グラデーション、その他の描画効果には弱いことがあります。
要素ベースのコントラスト検査ツール: 計算済みの HTML/CSS 値を読み取り、単純なレイアウトでは有効ですが、透明度や重なりレイヤーがあると最終的な画面描画と一致しない場合があります。
デザインツールでの手動目視確認: デザイナーがデザインツールやグラフィックツール内で色を直接確認できますが、ライブ Web ページやアクセシビリティ基準との連携は通常弱くなります。