新たなウェブアクセシビリティツール「Area Contrast Checker」が登場！

ウェブアクセシビリティの新時代を切り開く「Area Contrast Checker」とは

リベロジック株式会社が開発した新しいウェブアクセシビリティツール「Area Contrast Checker」について紹介します。このツールは、ウェブサイトのフォントと背景のコントラスト比を手軽に確認できるChrome拡張機能です。近年、ウェブアクセシビリティへの関心が高まりつつあり、低いコントラスト比が視覚に障害がある人々にとって大きな障壁になることは、多くの人が認識しているところでしょう。

開発の背景

従来、ウェブサイトのコントラスト比を確認するためのツールには、自動スキャン型、ピッカー型、要素指定型の3つのタイプがあります。それぞれ利点と欠点がありました。自動スキャン型は効率的ですが、画像やグラデーションには適しません。パッとピッカー型（スポイト）は正確ですが、1箇所ずつの手作業を要します。要素指定型は簡単で手早く済む一方で、画像の検査には向いていませんでした。

そこで、リベロジックでは全く新しいアプローチとして「Area Contrast Checker」を開発しました。このツールは、調べたいエリアをドラッグで囲むだけで、そこに含まれるピクセルを解析し、前景色と背景色を自動的に検出します。従来の方法では出来なかった要素の重なりや画像に対しても対応可能なのが特徴です。

主な機能

- WCAG 2.1 / 2.2 適合判定: このツールは、WCAG（Web Content Accessibility Guidelines）で求められるコントラスト比基準を満たすかどうかを判定します。通常の文字、大きな文字、UIコンポーネントのそれぞれについて、異なる基準を用いて評価されます。
- 次世代コントラスト基準 APCA に対応: WCAG 3.0のドラフト版で取り入れられる新しいコントラスト基準である「APCA」にも対応。これにより、どのフォントサイズが適合しているのかを瞬時に確認できます。
- カラーサジェスト機能: コントラスト比が不十分な場合、元の色相を保持しつつ基準をクリアできる近似色を提案します。
- 高度な機能: HEX、RGB、HSLなどのカラーフォーマットに対応し、必要に応じてピクセル単位での再選択も可能です。支援言語として日本語と英語が使えます。

利用方法

「Area Contrast Checker」の使い方は非常に簡単です。Chromeストアからダウンロードしてインストールした後、分析したいエリアをドラッグするだけ。一瞬でコントラスト比が評価され、必要に応じてカラーサジェストも受けられます。このシンプルな操作性により、開発者やデザイナーは、手間をかけることなく迅速にアクセシビリティを向上させることができます。

リリースと今後の展望

リベロジック株式会社は、今後もアクセシビリティを身近でスムーズにするためのツールを順次リリースする予定です。このツールは、ただの特別な対応ではなく、ウェブ制作において当たり前の品質としてのアクセシビリティを提供することを目指しています。

リンク先にて「Area Contrast Checker」のダウンロードが可能です。ぜひ試してみて、あなたのウェブサイトのアクセシビリティを向上させましょう！

ダウンロードはこちら