web-dev-qa-db-ja.com

ウェブサイトの灰色のフォント-一部は非常に淡く、読みにくい。フォントの色についての今日のデザイン概要は何ですか?

ウェブサイトのフォントの色のデザイン基準は何ですか?

淡い灰色を使用すると、一部のテキストが非常に読みにくくなることがわかりました。

確かに読みやすさは、画面に寄りかかって目を細めなくても、テキストをはっきりと見ることができるように拡張する必要があります。

9
Margery Watson

アクセシビリティについてはW3を参照してください。

ガイドラインについては、のw3ガイドラインを参照してください SC 1.4.3:最小コントラストについて

セクション1.4.3を参照

視力の弱い人は、背景と対照的ではないテキストを読むことが困難なことがよくあります。コントラストがさらに低下する色覚異常がある場合、これは悪化する可能性があります。テキストとその背景の間の最小輝度コントラスト比を提供すると、人が全範囲の色を見ていなくても、テキストが読みやすくなります。また、色が見えないまれな個人にも有効です。

マテリアルデザインには、テキストや背景を選択したときに読みやすさを判断するカラーツールもあります。

素材色

enter image description here

オピニオンピースとして、Wiredは昨年良い記事を書きました:ウェブが判読不能になった方法

かつて鮮明で暗かったテキストは、突然淡い灰色に明るくなりました。確かに年齢は私の視力を犠牲にしましたが、私はデザインの傾向に苦しんでいたことがわかりました。

7
Mike M

アクセシビリティについてすべての設計者が知っておく必要がある 7つのこと については、十分な対照があります。

Webアクセシビリティの標準は、Webコンテンツアクセシビリティガイドライン(WCAG)2.0で、色とコントラストに関連するいくつかの「成功基準」があります。色のコントラストに関連する最も基本的な成功基準は、 SC 1.4.3 です。

テキストとテキストの画像の視覚的表現は、 コントラスト比 が少なくとも4.5:1ですが、以下を除きます(レベルAA)。

  • 大規模テキスト:大規模テキストと大規模テキストの画像のコントラスト比は少なくとも3:1です。

  • 付随的:非アクティブなユーザーインターフェイスコンポーネントの一部であるテキストまたはテキストの画像、純粋な装飾、誰からも見えない、または他の重要な視覚的コンテンツを含む画像の一部である場合、コントラスト要件はありません。

  • ロゴタイプ:ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。

この達成基準(SC)の主なターゲットグループは、色覚異常のある人ですが、この基準を満たすことで、母集団全体(または少なくともほとんどの人)のコントラストが低くなりすぎないことも確認できます。 SC 1.4.6 、7:1のコントラスト比が必要です)。

Julie Grundyが彼女の記事で指摘しているように、不十分なコントラストは非常に頻繁な問題です 開発者にとって3つの一般的なアクセシビリティの落とし穴:色のコントラスト

コントラストを確認したり、アクセス可能な色の組み合わせを見つけたりするのに役立つ多くのツールがあります。次に例を示します。

7
Tsundoku