ウェブアクセシビリティへの関心が高まる中、私たちはアクセシビリティ診断サービスを提供する中で、「もっと簡単に、もっとわかりやすく」診断をサポートするツールを開発してきました。
その第一弾としてChrome拡張機能「Area Contrast Checker」がリリースされました。
開発の背景
従来のコントラストチェッカーは、大きく分けて3種類ありますが、それぞれに一長一短があります。
- 自動スキャン型
ページ全体から機械的に抽出するため効率的ですが、背景が画像やグラデーションの場合、誤検知や検出漏れが発生しやすいデメリットがあります。 - ピッカー型（スポイト）
見たままの色を正確に測れますが、1箇所ずつ手作業で抽出するため、作業工数がかさむのが難点です。 - 要素指定型
HTML/CSSの情報を直接参照するため簡単ですが、画像は検査できず、要素の重なりや透明度など実際のレンダリング状態を正しく取得できない場合があります。
いままでにない第4のアプローチ
Area Contrast Checkerでは、まったく新しい第4のアプローチを考えました。
調べたい箇所をドラッグで囲み選択。そのエリア内のピクセルを解析し、背景色と前景色の2色を自動検出します。 ユーザーが実際に目にしている「表示そのもの」が対象になるため、要素の重なりも関係なく、画像の検査も可能です。
気になるところをドラッグするだけで簡単に調べることができます。
主な機能
▪️WCAG 2.1 / 2.2 適合判定
達成基準1.4.3、1.4.6、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）を維持したまま、基準をクリアできる近似色を提案。
▪️プロフェッショナルのための高度な機能
・HEX・RGB・HSLのカラーフォーマットに対応。
・自動検出結果を微調整したい場合、ピクセル単位でピッカーによる再選択が可能。
・日本語・英語の2言語に対応
Area Contrast Checkerのダウンロードはこちら
リベロジックでは、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。
Web制作やアクセシビリティ診断の現場で感じてきた「あったらいいな」を、このツールに詰め込みました。 これからも、アクセシビリティをより身近に、よりスムーズにするためのツールを順次リリースしていく予定です。どうぞご期待ください。
