Colour Contrast Analyser (カラーコントラストアナライザー)
カラーコントラストのチェックといえば Colour Contrast Analyser (CCA) がよく知られています。スポイトツールがあり、簡単に背景色と文字色を取得しコントラスト比を計算してくれます。Windows版だけでなくMac版も提供されています。
ごく簡単なツールですが、実際に使用する時には少しだけ注意点がありますので、その事を紹介します。
なお、コントラスト比の計算をするサイトはいくつかありますので、色値を抜き取るスポイトツールがあれば、それらサイトを使っても問題ありません。
インストールの仕方
現在、TPGiが無償で提供しています。[Download for Windows / macOS]をクリックしダウンロードページを開いてください。Windows用であれば拡張子がexeのもの、Macであればdmgかzipのものをダウンロードしインストールしてください。いずれも日本語対応していますので、導入後はメッセージ等は日本語になります。
利用の仕方
前景色と背景色にピッカーがありますので、これで測定したい箇所の色を拾います。すぐにコントラスト比が計算され表示されます。
結果をみる
「WCAG 2.1 の結果」と書かれている箇所に結果が表示されます。いくつか注意事項がありますので、以下、参考にしてください。
- 結果に「just below 4.5:1」と表示されることがあります。古いバージョンでは四捨五入していたため、これらのケースでは適合と判断されていました。「以前、CCA を使って確認してOkだったのに、なぜ今回はダメなの?」というのは大概このケースです。規格では基準について「多少は・・・」とは言えませんので、色の修正を検討する必要があります。
- 判定は文字サイズの影響を受けますが、CCA は文字サイズまでは関知しません。微妙と思ったときは文字サイズを必ず確認してください。文字サイズを測るには、FireFox 拡張機能の Web Developer にある Display Ruler などが便利です。px単位で測定してくれます。
次よりも小さい文字は4.5:1以上、大きい場合は3:1以上
普通 18pt（24px）、日本語の場合 22pt（29px）
太字 14pt（18.5px）、日本語の場合 18pt（24px） - Macのカラーピッカーでは実際の色と異なる値を拾うことがあります。白色の部分を測定してみて、#FFFFFF にならない場合は、Mac の Digital Color Meter を使って色を測定し、その値をCCAにいれて計算させてください。(追記 2022年1月10日 : freee社のアクセシビリティガイドラインによると、カラープロファイルを変更すると良いようです。コントラスト比のチェック方法の下の方に説明があります。)
小さな文字でアンチエイリアシングの影響を強く受ける場合、判断はとても難しくなります。4.5:1を満たすドットだけをつないでみて、それで文字を認識できるか判断するのでも良いかもしれませんが、主観的になってしまい検査としては良い方法とは言えません。可能な限り、制作者にもっとコントラスト比が取れるよう配色を調整してもらいましょう。