Webアクセシビリティカラーコントラストガイドラインと比率の理解

ウェブサイトの色のコントラストの問題：一見マイナーな詳細は、ユーザーエクスペリエンスに大きな影響を与える可能性があります。あなたにとって完全に読みやすいように見えるものは、他の人には判読できないかもしれません。この記事では、デザインに誰もがアクセスできるようにする方法について説明します。

明るい電話画面でサイトを表示したり、グレースケールフィルターを適用したりするなど、迅速なチェックはヒントを提供できますが、それらは完全にはありません。主観的な視覚評価は信頼できません。数学的精度が重要です。

Webコンテンツアクセシビリティガイドライン（WCAG）2.1は、必要な標準を提供します。合格点（AA）の場合、ほとんどのテキストでは4.5：1、より大きなテキストでは3：1のコントラスト比を目指します。

WCAG比の背後にある科学

WCAGガイドラインは、反アライアスされたテキストのような進歩を考慮して、支援技術なしでユーザーに対応します。比率は、20/40視力を持つ個人の読みやすさをターゲットにします（80歳の視力に似ています）。アンチエイリアスは、視覚的に魅力的ですが、コントラストをわずかに減らすことができます。

WCAGは、ANSI/HFES 100-2007（コンピューターワークステーションのヒューマンファクターエンジニアリング）などの既存の標準を活用し、コンピューターユーザーの90％のアクセシビリティを目指しています。

コントラスト比の理解

コントラスト比は、最も明るい色と最も暗い色の明るさの違いを定量化します。これは相対輝度として表されます。

貧弱な例を調べてみましょう：明るい灰色（＃888888）の背景にティールテキスト（＃1ABC9C）。

<h1 id="あなたの素晴らしいサイトのタイトル">あなたの素晴らしいサイトのタイトル</h1>

H1 {
  バックグラウンドカラー：＃888888;
  色：＃1ABC9C;
}

たとえそれを読むことができたとしても、コントラスト比はわずか1.47：1であり、WCAG標準の障害です。 WordPressのような多くのプラットフォームは、このような低コントラストの警告を提供します。

コントラストを計算するには、相対的な輝度と少しの数学を理解する必要があります。

相対輝度：より深いダイビング

相対輝度は、0（黒）から1（白）のスケールでの色の明るさを表します。計算するには：

1. ヘックスをRGBに変換します： 16進コード（＃1ABC9Cなど）をRGB相当（26、188、156）に変換します。オンラインツールはこれを簡素化します。

2. RGB値を線形化：各RGBコンポーネントを255で除算します。

3. 適用ガンマ補正：これは、コンピューターと明るさの人間の認識の違いを説明します。線形化された値が0.03938未満の場合、12.92で除算します。それ以外の場合は、0.055を追加し、1.055で除算し、2.4の電力に上げます。

4. 輝度の計算：ガンマ補正R、G、およびBの値にそれぞれ0.2126、0.7152、および0.0722を掛けてから、結果を合計します。

ティールの例：最終輝度（L1）は約0.386です。灰色のバックグラウンドを繰り返すと、L2が得られます（約0.246）。

コントラスト比は（L1 0.05） /（L2 0.05）です。この場合、WCAGの最小値を大幅に下回っています。

幸いなことに、多数のオンラインツールがこれらの計算を自動化します。

適切なコントラストを確保します

いくつかのアクセシビリティツールは、サイトを監査できます。波は良い出発点であり、コントラストの問題を特定し、改善を示唆しています。許容可能なコントラスト比を達成するまで、推奨事項に従い、再テストし、反復します。

積極的なアクセシビリティ

最初からアクセシビリティガイドラインを組み込みます。事前にテストされたカラーパレットを提供することが多い確立されたフレームワーク（ブートストラップや材料デザインなど）を使用します。特にカスタム要素については、常にコントラストを確認してください。

Derek Kayのフレームワークレビューや米国のWebデザインシステムなどのリソースは、貴重な洞察とツールを提供します。

包括的なWebエクスペリエンスを作成するには、コントラスト比を理解することが重要です。アクセシビリティの優先順位付けには、すべてのユーザーに利益をもたらします。一見マイナーなコントラストの問題でさえ、読みやすさとユーザーエクスペリエンスに大きな影響を与える可能性があることを忘れないでください。

以上がWebアクセシビリティカラーコントラストガイドラインと比率の理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。