web-dev-qa-db-ja.com

WCAGアクセシビリティガイドラインに違反しているこのテキストは、合格したテキストよりも主観的に読みやすいのはなぜですか?

[〜#〜] a [〜#〜]

ここの小さいテキストは、WCAG 2.0コントラストアクセシビリティAAガイドラインに合格しています。

A

[〜#〜] b [〜#〜]

ここの小さいテキストは、WCAG 2.0コントラストアクセシビリティAAガイドラインに適合しません。

B

ユーザビリティスタディ 上の画像を比較すると、78%の参加者が白いテキスト(WCAGコントラストテストに不合格)の方が読みやすいと感じています。その差は、統計的に有意である可能性が高い99%です。これは、実際にはより良いことであり、ランダムなチャンスのためにパフォーマンスが良くないことを確信できることを意味します。

contrastchecker.com で実行されたアクセシビリティカラーテストの結果は次のとおりです。

enter image description here

enter image description here

黒いテキストが白いテキストよりも多くのWCAGテストに合格していることを明確に見ることができます(これはほとんどの人にとって読みやすくなっています)。問題はなぜですか?また、デジタル製品を設計するときに、WCAGコントラストテストにどの程度依存できますか?

4
Andrew

明るさと色は関連していますが、絶対的ではありません。

W3Cが推奨する計算では、いくつかの仮定を行い、明るさの観点から赤、緑、青の色の値に異なる重みを付けています。 (青が最も暗く、緑が最も明るい。)これらの重みは近似値であり、完全な彩度で色を表すため、遭遇する可能性のある完全な色域を完全に表すとは限りません。

一部の画面では、オレンジ色が明るくまたは暗く表示される場合がありますが、数式では、コントラストを計算するための単一の数値しか得られません。たとえば、白のような「明るい」色はデジタル画面での場合と同じようには光らないため、それらの式を印刷されたドキュメントに使用することはできません。

緑は、伝統的にほとんどの画面で不釣り合いに明るいので、より重くなります。オレンジには多くの緑が含まれているので、色をあまり変えずに、AAを渡すために少し減らすことができます。あなた(とあなたのユーザー)は違いを見ることさえできないかもしれません。

Orange color contrast calculations

1つは数学的にテストに合格するが、もう1つは合格しないことを除いて、ほぼ同じ色のトンを見つけることができます。これは主に、複雑な多次元の色空間を取り、単一の数値に簡略化することの副作用です。

これは、これらが厳格で迅速なルールというよりも単なるガイドラインであるという良い例でもあります。色のスコアが低い、または一部のテストのみに合格する場合の主なポイントは、「正しい」または「間違った」ペアがあることではなく、それらが読みづらいという端にあるため、異なる色を検討する必要がありますコントラストと読みやすさが主な関心事かどうか。デザインの美学とガイドラインの遵守のどちらを重視するかは、あなた次第です。

W3Cカラーコントラスト式

2
Nathan Rabe

それは、障害を持つ人々のために作成されたガイドラインと関係があるかもしれません。近眼または色覚異常などの視力に問題のある人。たまたまガイドラインに従うと、たいていの場合、普通の人に読みやすいと同意してもらうことになります。このような障害を持つ人々は、私が学校で覚えているとすれば、生物学的な理由により、明るい色の暗いテキストよりも暗い色の明るいテキストを読むのが困難です。

0
Jordan Reiser