web-dev-qa-db-ja.com

非常に飽和した行動を促すフレーズのボタンのテキストのコントラスト

デザインの領域がアクセシビリティガイドライン、特にWCAG2.0カラーコントラストに準拠していることを確認することは、私の作業方法の一部になります。

現在、新しいカラーパレットの作成に取り組んでいます。私が実験している原色は比較的飽和しています(例として#25AB2B)。

「行動を促すフレーズ」のこれらの飽和色(ボタン)は、コントラスト比のガイドライン4.5:1を満たす/超えるために、通常、暗いテキスト色(たとえば、黒)と組み合わせる必要があることに気づいています。

Comparison of white and black text on #25AB2B

これらのボタンのテキストサイズは16pxを超えません。

これらの種類の色がボタンの前景/テキストの明るい色と常にペアになっている例を見つけています Spotifyの例 (「アクセシビリティに最適化された」緑について言及していますが、それでもなお短くなっています)上記の私の例よりもガイドラインの)。

私の質問は...

私は非常に主観的な意見に貢献しているデザイン/人間の視覚/生理学的考慮事項があるかどうかを理解しようとしています。考慮に入れていないことはありますか、それとも数字だけを信頼すべきですか?

2
Zenon

はい、色のコントラストは非常に主観的に感じることがあります。少なくとも私の視力のこの段階では、白いテキストの方が読みやすくなりますが、 コントラスト比の式はかなり正確です です。あなたはそれを信頼するべきです。

テキストは16px/12ptを超えないため、4.5:1の比率が必要です。

ビジョンがぼやけていると想像してください。次のスクリーンショットシミュレーションは、中程度のぼやけを示しています。ボタンではテキストを読み取ることができませんが、黒い「スマッジ」は白い「スマッジ」よりも目立つので、そこにテキストがあることがわかります。そこでコントラスト比が役立ちます。

enter image description here

おもしろいことに、ISOは世界全体の最小色比(交通標識など)の基準を3:1に設定していますが、これは20/20ビジョン用です。 20/40までの視力低下を説明すると、コントラスト感度は1.5低下します。これを補うために、3:1の比率に1.5を掛けて4.5:1の比率にします WCAG 1.4. 標準。

20/80ビジョンの場合、コントラスト感度の損失は約2.3になるため、3:1 ISO推奨を2.3倍すると、7:1の比率が得られます。これは、WCAG AAAの要件である 1.4。 6

3
slugolicious

MIT年前からいくつかの人間の知覚研究に遭遇しました(それはMIT知覚研究室から来たかもしれないと思います!!))そしてそれは私たちの方法について話しました脳は実際に私たちが目にするものを私たちが経験するものに規範的なパターンとして解釈します。

たとえば、白と黒のテキストは、これらの同じフォントの太さを「チョーク」または「スプレッド」として認識する方法の優れた例です。

つまり、暗い背景の白では、フォントの太さは暗い色よりも狭く感じられます。または窒息。黒のフォントが太く、エッジが柔らかく見えるところ。または広がる。つまり、これは単純な目の錯覚です。

ソース

1
Colin Eyre