新発想のWebアクセシビリティツール「Area Contrast Checker」が登場
リベロジック株式会社は、Webアクセシビリティ確認を支援する新ツールとしてChrome拡張機能「Area Contrast Checker」をリリースしました。
近年、ウェブアクセシビリティへの関心が高まる中、より簡単で分かりやすい診断ツールの必要性が指摘されていました。この背景から、「Area Contrast Checker」は開発されました。
従来のコントラストチェッカーの課題と新たなアプローチ
従来のコントラストチェッカーには、主に以下の3種類があり、それぞれに課題がありました。
-
自動スキャン型: ページ全体を効率的にスキャンする一方で、背景が画像やグラデーションの場合に誤検知や検出漏れが発生しやすい傾向がありました。
-
ピッカー型（スポイト）: 見たままの色を正確に測定できますが、1箇所ずつ手作業で抽出するため、作業工数が増大する点が課題でした。
-
要素指定型: HTML/CSS情報を直接参照するため容易ですが、画像は検査できず、要素の重なりや透明度など、実際の表示状態を正確に取得できない場合がありました。
「Area Contrast Checker」は、これらの課題を解決する第4のアプローチを提案します。調べたい箇所をドラッグで囲んで選択すると、そのエリア内のピクセルを解析し、背景色と前景色の2色を自動で検出します。これにより、ユーザーが実際に目にしている「表示そのもの」が対象となるため、要素の重なりや画像の検査も可能となり、気になるところを簡単に調べることができます。
主な機能
「Area Contrast Checker」は、Webアクセシビリティの確認を効率化するための複数の機能を搭載しています。
-
WCAG 2.1 / 2.2 適合判定: 達成基準1.4.3（コントラスト：最低限）、1.4.6（コントラスト：高度）、1.4.11（非テキストのコントラスト）に基づき、通常の文字、大きな文字、UIコンポーネントのコントラスト比を評価します。
-
次世代規格 APCA に対応: WCAG 3.0ドラフトで検討中の新しいコントラスト基準「APCA（Accessible Perceptual Contrast Algorithm）」に対応しており、どのフォントサイズまで適合しているか（Lc値）を瞬時に表示します。
-
色相を保ったカラーサジェスト: コントラスト比が不足している場合、元の色の色相（Hue）を維持したまま、基準をクリアできる近似色を提案します。
-
プロフェッショナルのための高度な機能: HEX、RGB、HSLのカラーフォーマットに対応し、自動検出結果を微調整したい場合にはピクセル単位でのピッカーによる再選択が可能です。また、日本語と英語の2言語に対応しています。
今後の展望
リベロジック株式会社は、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。Web制作やアクセシビリティ診断の現場で得られた知見を基に開発されたこのツールに続き、今後もアクセシビリティをより身近に、よりスムーズにするためのツールを順次リリースしていく予定です。
Area Contrast Checkerのダウンロードはこちら
リベロジック株式会社について
リベロジック株式会社は、モダンなフロントエンド開発、ヘッドレスCMS構築、UI/UX設計、Webアクセシビリティ支援を強みとする制作・開発会社です。Next.js、Astro、React、Vueなどの技術を活用した実装に加え、プロトタイピング型の開発手法によるサービス立ち上げ支援、Supabaseを活用した内部管理アプリケーション開発、既存インフラの見直しやモダン環境への移行支援など、幅広い領域のデジタル支援を行っています。
商号：リベロジック株式会社
代表者：代表取締役 森本忠典
所在地：〒108-0073 東京都港区三田1-3-37板金会館2F
設立：2007年2月
資本金：3,000万円
-
お問い合わせフォーム：https://www.liberogic.jp/contact/
コメント