リベロジック株式会社、Webアクセシビリティ確認を支援する新ツール「Area Contrast Checker」をリリース

ウェブアクセシビリティへの関心が高まる中、私たちはアクセシビリティ診断サービスの提供を通じて、「もっと簡単に、もっとわかりやすく」診断をサポートするツール開発を進めてきました。その第一弾としてChrome拡張機能「Area Contrast Checker」がリリースされました。開発の背景従来のコントラストチェッカーは、大きく分けて3種類ありますが、それぞれに一長一短があります。1. 自動スキャン型ページ全体から機械的に抽出するため効率的ですが、背景が画像やグラデーションの場合、誤検知や検出漏れが発生しやすいデメリットがあります。2. ピッカー型（スポイト）見たままの色を正確に測れますが、1箇所ずつ手作業で抽出するため、作業工数がかさむのが難点です。3. 要素指定型HTML/CSSの情報を直接参照するため簡単ですが、画像は検査できず、要素の重なりや透明度など実際のレンダリング状態を正しく取得できない場合があります。「簡単に、精度が高く、どこでも検出ができる。そのような方法はないだろうか？」という現場での思いから、開発がスタートしました。いままでにない第4のアプローチその「答え」として形にしたのが、Area Contrast Checkerにおける「エリア解析」という第4のアプローチです。調べたい箇所をドラッグで囲み選択。そのエリア内のピクセルを解析し、背景色と前景色の2色を自動検出します。ユーザーが実際に目にしている「表示そのもの」が対象になるため、要素の重なりも関係なく、画像の検査も可能です。気になるところをドラッグするだけで簡単に調べることができます。画像 : https://newscast.jp/attachments/lWzmBorAifXTZYOpzawT.png主な機能▪️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言語に対応画像 : https://newscast.jp/attachments/QlKOvJu0z4ryIPA2xIgI.pngArea Contrast CheckerのダウンロードはこちらArea Contrast Checker - Chrome Web Store : https://chromewebstore.google.com/detail/area-contrast-checker/kjemflinmhiljcdnngbacdddbhappdkgリベロジックでは、アクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。Web制作やアクセシビリティ診断の現場で感じてきた「あったらいいな」を、このツールに詰め込みました。これからも、アクセシビリティをより身近に、よりスムーズにするためのツールを順次リリースしていく予定です。どうぞご期待ください。本件に関するお問い合わせ先お問い合わせ | リベロジック株式会社 : https://www.liberogic.jp/contact/会社概要リベロジック株式会社は、モダンなフロントエンド開発、ヘッドレスCMS構築、UI/UX設計、Webアクセシビリティ支援を強みとする制作・開発会社です。Next.js、Astro、React、Vueなどの技術を活用した実装に加え、プロトタイピング型の開発手法によるサービス立ち上げ支援、Supabaseを活用した内部管理アプリケーション開発、既存インフラの見直しやモダン環境への移行支援など、幅広い領域のデジタル支援を行っています。商号 ： リベロジック株式会社代表者 ： 代表取締役 森本忠典所在地 ： 〒108-0073 東京都港区三田1-3-37板金会館2F 設立 ： 2007年2月資本金 ： 3,000万円フロントエンド, UI/UX, アクセシビリティのリベロジック株式会社 : https://www.liberogic.jp/