Webアクセシビリティ: Firefox Developer Editionでカラーコントラストをチェックする

Firefox Developer Editionには、いくつかの本当にクールな機能がありますが、その1つは、ブラウザの開発者ツール内で簡単にWebページのカラーコントラストをチェックできることです。

私は副業のプロジェクトの一つであるReact SaaSkit DemoでWebアクセシビリティを評価するためにWAVEを使い方を学んでいました。そこで、プライマリボタンのカラーコントラスト問題が4.3:1で報告され、WCAG 2.0 AAが本文テキストに必要とする最低カラーコントラスト比4.5:1に満たしていないことがわかりました。

WCAG 2.0レベルAAでは、通常テキストのコントラスト比は少なくとも4.5:1、大きなテキストの場合は3:1が必要です。WCAG 2.1では、グラフィックとユーザーインターフェイスコンポーネント（フォーム入力の境界線など）に対して少なくとも3:1のコントラスト比が求められます。WCAGレベルAAAでは、通常テキストに対して少なくとも7:1、大きなテキストに対しては4.5:1のコントラスト比が必要です。

私はFirefox Developer Editionがその開発者ツールに組み込まれたカラーコントラストチェッカーを持っているかどうかを確認したかったのです。確かに持っていました。アクセシビリティパネルの下にあります。

開発者ツールを開いてアクセシビリティパネルに移動すると、左上の隅に問題のチェックを選択するためのセレクトボックスがあります。そこでコントラストをクリックすると選ぶことができ、Firefoxはページを評価して、現在のWebページのカラーコントラストについてのレポートを生成します。

報告によると、私のページにはカラーコントラストの問題があるボタンが2つあります。

次は、これが実際にどのように機能するかを示す短いデモビデオです。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/heybran/web-accessibility-checking-color-contract-with-firefox-developer-edition-22d1