web-dev-qa-db-ja.com

アクセシビリティ色差のベストプラクティス

#663399および#f8f8f8を前景色および背景色として。

カラーコントラストツール は、他と同様に、WCAGで説明されているようにコントラスト比を渡しますが、438で色差に失敗します最小500のうち。

  • WCAGはコントラスト比とテキストサイズのみを使用し、色差を使用しませんか?

  • 色差はどのように計算されますか?

  • この色の違いを改善することは視覚障害者を助けるでしょうか、それともコントラストはすでに十分ですか?

<code>#663399</code> contrast ratio of 7.9:1<code>#663399</code> color difference 438 of 500<code>#663399</code> color deficient ratio of 7.9:1

6
Julian

W3C アクセシビリティ評価および修復ツールのテクニック はこう述べています:

2つの色の明るさの違いと色の違いが設定された範囲より大きい場合、2つの色は良い色の可視性を提供します。

色の明るさは次の式で決定されます:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

注:このアルゴリズムは、RGB値をYIQ値に変換する式から取得されます。この明るさの値は、色の知覚される明るさを与えます。

色差は、次の式で決定されます:(最大(赤の値1、赤の値2)-最小(赤の値1、赤の値2)) +(最大(緑の値1、緑の値2)-最小(緑の値1、緑の値2))+(最大(青の値1、青の値2)-最小(青の値1、青の値2))

色の明るさの差の範囲は125です。色の差の範囲は500です。

色の違いが大きくなると、視覚障害が発生しやすくなりますが、一般的には、コントラストを考慮することが重要です。ただし、コントラストの高い色は、特に失読症の読者にとって、問題を引き起こすこともあります。 HPの古いカラーコントラストツールで推奨範囲として400が指定されていたのはこのためです。私の意見では、バランスをとるには、コントラストを最大化するのではなく、450〜550の範囲のどこかを狙うのが最善です。

5
Roger Attrill

ロジャーが引用する参考文献は16歳です(2000年4月)。アクセシビリティに取り組んでいる場合は、元の投稿で指摘したように、WCAG 2.0と基準1.4.3を使用する必要があります(これは、アクセシビリティプログラミングの質問だったので、stackoverflowに投稿しても問題ないと思いました)。

コントラスト比は7.9で、最小4.5を満たしています。実際、AAA基準1.4.6を満たしていますが、これには7:1の比率が必要です。

だからあなたの色はアクセシビリティの点で優れています。

2
slugolicious