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

輝度はつねに残る経路

色には設計者が頼れる成分が二つあります。色相と明度です。しかし利用者全体に対して当てにできるの は片方だけです。

色相の弁別は大きくばらつきます。男性のおよそ12人に1人が赤緑の色覚特性を持ち、その人にとっては、 あなたに明白に見える色相の差が何の情報も運ばないことがあります。明度の弁別ははるかに一様です。 色覚特性のある人、視力の落ちた人、直射日光下で白っぽくなったスマートフォンを見ている人、まったく 典型的な視覚の人。誰もが大きな明度差を大きな差として知覚します。

だからこそコントラスト比が、荷重を支えるアクセシビリティの指標になります。これは二つの色の明度の 関係を測り、色相を完全に無視します。それこそが望ましい性質です。色相という経路が当てにならない とき何が残るかを教えてくれるからです。

比率は1対1、二つの色の相対輝度が等しく、その境界が誰の目にも見えない状態から、純白の上の純黒であ る21対1まで広がります。計算はWCAGで厳密に定義されています。sRGBの各チャンネルを線形の光に変換し、 知覚される輝度への寄与に応じて各チャンネルに重みをつけ、明るいほうの結果と暗いほうの結果を比べ ます。

しきい値とその根拠

4.5対1 — 通常のテキスト（WCAG AA）。 本文の基準線です。この数値は、およそ20/40の視力に伴うコ ントラスト感度の低下から導かれています。高齢者では珍しくなく、矯正可能ですが矯正されていないこと も多い状態です。

3対1 — 大きなテキスト（WCAG AA）。 通常18ポイント以上、または太字14ポイント以上に適用されま す。大きな字形は線が太く、低いコントラストでも読めます。

3対1 — 非テキストのコントラスト（WCAG AA）。 UI部品と意味のある図形を対象とします。入力欄の枠 線、トグルの状態、フォーカス表示、情報を伝えるアイコン、図表の本質的な部分などです。最も見落とさ れる達成基準であり、視覚的に洗練された低コントラストのインターフェースが監査で落ちるのは、たいて いここです。

7対1と4.5対1 — 通常および大きなテキスト（WCAG AAA）。 より厳しい水準で、およそ20/80の視力を 想定しています。必須でなくとも長文の読み物には採用する価値があります。

コントラストは必要だが十分ではない

アクセシブルな配色の作業で最もよくある誤りは、コントラスト比を満たした時点で仕事が終わったと考え ることです。答えるべき独立した問いが二つあります。

1. 各色は背景の上で読めるか。 これがコントラストであり、このチェッカーが答えます。
2. 異なる意味を持つ色どうしは区別できるか。 これは色相の分離であり、コントラスト比は何も語り ません。

赤い系列と緑の系列がある図表は、どちらも白地に対して暗いのでコントラストを余裕で満たしながら、二 つの系列が互いに区別できないために第二色覚の人にはまったく読めない、ということがあります。そう した配色は色覚シミュレーターにも通してください。

そして色が意味を担うときはつねに、第二の手がかりを足してください。WCAGの色の使用に関する達成基準 がそれを求めており、達成方法G111が標準的 な手立てを説明しています。色を模様、形、位置、あるいは明示的なラベルと組み合わせることです。実際 には、色の凡例ではなく図表の系列に直接ラベルを置く、赤いエラーメッセージの横にアイコンを置く、本 文中のリンクに下線を引く、成功と失敗の状態を形でも変える、といったことになります。

チェッカーの使い方

前景色と背景色を入力すると、比率と満たしたしきい値が表示されます。次の習慣が有用性を高めます。

• 実際の組み合わせを確かめる。 半透明の重ね、グラデーション、背景画像があると、実効的な背景は スタイルシートの色ではありません。実際に描画されているものから取ってください。
• 両方のテーマを確かめる。 輝度はきれいに反転しません。暗い配色には独自の確認が必要です。
• グラデーションでは最悪の場合を確かめる。 平均ではありません。
• 無効状態とプレースホルダーも含める。 それらも読まれています。
• フォーカス表示は現れるすべての面に対して確かめる。 白地で3対1を満たすフォーカスリングが、カ ードの上では消えることがあります。

全体像については、色覚異常に配慮した設計が配色の組み立てを 扱い、図表をアクセシブルにするがデータ可視化 を具体的に扱います。