ウェブアクセシビリティへの関心が高まる中、私たちはアクセシビリティ診断サービスを提供する中で、「もっと簡単に、もっとわかりやすく」診断をサポートするツールを開発してきました。
その第一弾として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.png
Area 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万円
URL ： https://www.liberogic.jp/
