Firefox 64 の開発ツールでテキストのコントラスト比が計測可能に

12月11日にリリースされた Firefox 64 ではテキストのコントラスト比が計測できるようになりました。 Chrome では今年3月にリリースされたバージョン65ですでに同じような機能が実装されています。

開発ツールのアクセシビリティ インスペクタ(developer.mozilla.org)を表示し、ウェブページの適当なテキストを選択すると、ツールチップのような形でアクセシビリティプロパティとともにコントラスト比が表示されます。充分なコントラスト比のあるテキストの場合、それが WCAG の適合レベル AA ないし AAA を満たしているかも分かるようになっています。

一方、コントラスト比が不十分なテキストは ⚠ アイコンとなります。

同じコントラスト比でも文字サイズによって適合レベルが異なるケースがありますが、文字サイズも認識したうえでチェックされるため、例えばコントラスト比が 3:1 以上 4.5:1 未満でもフォントサイズが 18pt 以上のケースは AA✔ になります。このあたりは（外部ツールでなく）ブラウザ組み込み機能の強さですね。

なお、中国語、日本語、韓国語の場合は最低フォントサイズの基準値が異なるのですが（AAの基準値(waic.jp), AAAの基準値(waic.jp)）、CodePen に簡単なテストページ(codepen.io)を作って試してみたところ、現状言語を認識してのチェックまではしてくれないようです。これはChrome のコントラスト比計測機能も同様ですが、これらの言語のページを作成する場合は注意が必要ですね。