Area Contrast Checker - WCAG&APCAカラーアクセシビリティ

ドラッグで囲む次世代A11yコントラストチェッカー。画像やグラデーション上の文字も、ピクセル解析で「見たまま」を自動計測。ピッカーより手軽に、自動検知より確実に。WCAG 2.1/2.2に加え、次世代指標APCA（ドラフト）に対応。

Webアクセシビリティ（a11y）のチェックにおいて、コントラスト比の計測にはこれまで大きく3つの手法があり、それぞれに一長一短がありました。 1. 自動スキャン型 ページ全体から機械的に抽出するため効率的ですが、背景が画像やグラデーションの場合、誤検知や検出漏れが発生しやすいデメリットがあります。 2. ピッカー型（スポイト） 見たままの色を正確に測れますが、1箇所ずつ手作業で抽出するため、作業工数がかさむのが難点です。 3. 要素指定型 HTML/CSSの情報を直接参照しますが、要素の重なりや透明度など、実際のレンダリング状態を正しく取得できない場合があります。 Area Contrast Checkerは、これらを解決する「第4の新しいアプローチ」を採用しました。 表示中のページのスクリーンショットをキャプチャし、実際の描画ピクセルから背景色と前景色の2色を自動検出。 ユーザーが実際に目にしている「表示そのもの」に基づいた測定結果を提供します。 🔍 使い方 1. 拡張機能のアイコンをクリックしてチェックを開始 2. ドラッグで検査したい範囲を選択 3. コントラスト比とWCAG適合結果が即座に表示されます ⭐ 主な機能 ▪️エリア抽出による自動解析 測りたい範囲をドラッグで囲むだけ。エリア内のピクセルを解析し、背景と文字の2色を自動特定します。画像・グラデーション・オーバーレイ・Canvas要素・複雑な視覚レイヤー上でも正確な結果が得られます。 ▪️WCAG 2.1 / 2.2 適合判定 達成基準1.4.3および1.4.11に基づき、通常テキスト（AA: 4.5:1、AAA: 7:1）、大きいテキスト（AA: 3:1、AAA: 4.5:1）、UIコンポーネント（AA: 3:1）のしきい値でコントラスト比を評価します。 ▪️次世代規格 APCA に対応 WCAG 3.0ドラフトで検討中の視覚特性アルゴリズム「APCA（Accessible Perceptual Contrast Algorithm）」に対応。どのフォントサイズまで適合しているか（Lc値）を瞬時に表示します。 ▪️色相を保ったカラーサジェスト コントラスト比が足りない場合、元の色の色相（Hue）を維持したまま、基準をクリアできる近似色を提案。そのままカラーコードをコピーしてデザインや実装に反映できます。 ▪️ワンクリックでカラーコードをコピー（v1.2.0） 背景色・前景色それぞれのコピーボタンで、色の値を即座にクリップボードにコピー。デザインツールやコードにそのまま貼り付けられます。 ▪️プロフェッショナルのための高度な機能 ・Retinaディスプレイ対応：高DPIスクリーンでも正確に色を取得。 ・手動ピッカーモード：自動検出結果を微調整したい場合、ピクセル単位で再選択が可能。 ・複数のカラーフォーマット：HEX・RGB・HSLでの表示・コピーに対応。 ・ページ操作モード（v1.1.0）：Alt（MacではOption）キーを押している間、チェッカーを閉じずにページのクリックやホバー操作が可能。 📊 他のツールとの比較 Area Contrast Checkerは、ピクセルレベルのサンプリング精度と、範囲選択の手軽さを両立しています。カラーピッカーで1色ずつ拾ったり、DOMを探し回ったりする必要はありません。アクセシビリティ監査やデザインレビュー、そしてインクルーシブデザインのワークフローを、より確実でスピーディなものに変えます。 ⚠️ ご注意 自動検出による色の判定は、選択範囲内のピクセル分布に基づく推定値です。複雑な背景パターンや微妙な色の組み合わせでは、意図した色と異なる結果になる場合があります。正確な判定が必要な場合は、手動ピッカーモードで色を再選択してください。本ツールの結果はアクセシビリティ適合の最終判断を保証するものではありません。 🔒 プライバシー データの収集は一切行いません。外部へのネットワークリクエストも送信しません。スクリーンショットはブラウザ内のメモリ上でのみ処理され、保存や外部送信は行われません。