カラーコントラストチェック

仕組み

白地に薄いグレーの文字は、Webで最も多いアクセシビリティ上の不備であり、完全に避けられるものです。アクセシビリティのガイドラインはコントラストを正確な比率として定義しているため、ある組み合わせが合格かどうかは、意見ではなく計算の問題です。

比率の計算方法

各色の相対輝度は、ガイドラインが定める方法で、チャンネルごとにガンマ補正を適用して計算され、明るいほうと暗いほうの比率が求められます。同じ式なので、結果はアクセシビリティ監査が報告する内容と一致します。

基準値

通常の文字は、AAで4.5:1、AAAで7:1が必要です。大きな文字（おおよそ24px、太字なら18.7px）は、AAで3:1、AAAで4.5:1で足ります。インターフェース部品と意味のある図には3:1が必要です。ほとんどの組織とほとんどの法令が求めるのは、AAです。

大きな文字の基準が緩い理由

大きな文字は、1本の線を構成するピクセルが多いため、低いコントラストでも読みやすさが保たれます。見出しには、本文より薄いグレーを使える理由です。

比率が捉えないもの

色覚の多様性については何も示しません。それは別のチェックです。文字が十分な大きさか、書体が読みやすいかについても何も示しません。合格した比率は最低ラインであり、読みやすいデザインの証明ではありません。