コントラスト比のチェック方法

ロービジョン者でもコンテンツを知覚できるよう、テキストやUIコンポーネントにはそれぞれコントラスト比の基準を満たす色が使われることが求められます。

実際のWebページから色のコントラスト比が不足している場所を発見するにはaxeのようなチェックツールを使用し、具体的な色同士のコントラスト比の計算にはWebAIM: Contrast Checkerのような計算ツールを使用します。

アクセシビリティー・チェックツールの使用

axeを使用すると、Webページ全体から（コントラスト比以外にも）アクセシビリティー上の問題のある場所を発見することができます。

Google Chromeの場合、開発者ツールの Audits タブに Lighthouse が搭載されていますが、これで採点できるもののうち、 Accessbility については axe が使用されています。また、axe の Google Chrome 拡張を使用すると、結果を日本語で読むこともできます。

コントラスト比の計算ツールの使用

コントラスト比の計算式は非常に複雑であるため、WebAIM: Contrast Checkerのような計算ツールを使用することが一般的です。contrast.appのように、インストールして常駐させるタイプのチェッカーも存在します。

このようなコントラスト比計算ツールを使用する場合は以下の点に注意が必要です。

  • コントラスト比の計算ツールによって小数点以下の丸め方に差異があり、計算結果がバラつくことがある。

    • 計算結果は目安として、コントラスト比に余裕のある色を選ぶのが望ましい。

  • カラーピッカーを使用する場合、macOSではディスプレイのカラープロファイルの影響を受けることがあるため、これを防ぐ必要がある。

    • macOSのカラープロファイル設定で、「このディスプレイのプロファイルのみを表示」のチェックを外してからSRGB IEC61966-2.1を選択。

    • SketchではPreferences➝General➝Color Profileで「SRGB IEC61966-2.1」を選択。

      • 上記はデフォルト設定なので、既存のドキュメントのカラープロファイルは異なったままになっている可能性があります。ファイルのカラープロファイルを変えたい場合はFile ‣ Change Color Profileから変更します。

      • 参考：Sketch : Color Management

    • Adobe XDはOSの設定を引き継ぐので、カラープロファイルの設定を変更した場合は再起動。

参考：コントラスト比確保の重要性