コントラストを抑える: アクセシブルなドキュメントの色とフォントを選択する方法

白地に明るいグレーのテキストは、一見するとエレガントでミニマリストに見えますが、視覚障害のあるユーザー、画面に強い日差しが当たっているユーザー、または一日の終わりに目が疲れているユーザーにとってはまったく読めません。色のコントラストはアクセシビリティにおいて最も「技術的な」基準の 1 つであり、満たさなければならない正確な数値がありますが、事前にテストして修正するのが最も簡単な基準の 1 つでもあります。

WCAG が要求する比率

WCAG は、コントラスト比を 1:1 (コントラストがまったくない - 同一の色) から 21:1 (可能な最大のコントラスト - 純粋な白の上に純粋な黒) の間の数値として定義します。レベル AA (イスラエルを含むほとんどの場所で必須レベル) では、通常のテキストとその背後にある背景の比率が少なくとも 4.5:1 であることが要件となります。より厳格な AAA レベルでは、要件は 7:1 に上昇します。

大きなテキストがコントラストを低くしても許可される理由

大きなテキストはコントラストが低くても読みやすいため、WCAG はより簡単なしきい値を設定します。レベル AA では (4.5:1 ではなく) 3:1、レベル AAA では (7:1 ではなく) 4.5:1 です。 「大きなテキスト」とは、18 ポイント以上 (約 24 ピクセル)、太字の場合は 14 ポイント以上 (約 18.7 ピクセル) のテキストとして定義されます。たとえば、大きな見出しでは、通常の本文段落よりもわずかに低いコントラストを「許容」できますが、それでも要件を満たすことができます。

実際にコントラスト比を確認する方法

手動で計算する必要はありません。WebAIM コントラスト チェッカーのような無料ツールを使用すると、テキストと背景のカラー コードを入力して、正確な比率と各レベルの合否スコアをすぐに取得できます。単色の背景上のテキストだけでなく、背景画像やグラデーション上のテキストもチェックする価値があります。同じ画像の異なる領域間でコントラストが異なる場合があるため、最も「問題のある」箇所をテストするのが最善です。

アクセシブルなカラーパレットを事前に選択する方法

最も効率的なアプローチは、すべてのドキュメントを個別にチェックするのではなく、テンプレートの設計段階でコントラストをチェックすることです。見出し、本文、リンクのブランドカラーを選択するときは、実際に使用するすべてのテキストと背景の組み合わせが少なくとも 4.5:1 を満たすことを事前に確認する価値があります。このようにして、テンプレートから作成されたすべての新しいドキュメントは、既に作成されたドキュメントを個別にチェックするのではなく、適切なコントラストを自動的に「継承」します。