web-dev-qa-db-ja.com

テキストの影は読みやすさを向上させることができますか?

CSSフォントシャドウは、テキストを目立たせる(またはカラフルにする、または他の多くの派手なものにする)ためによく使用されます。読みやすさを支援するために使用できるかどうか疑問に思っています。

適切なコントラストの量を見つけると、デジタル画面の読みやすさが大幅に向上します。フォントの影は常にテキストを囲んでいるため、明るさと色の両方のコントラストを制御するために使用できます。参照: 白い背景で黒いテキストを使用すると問題がありますか?

20
Gn13l

状況によっては、ドロップシャドウまたはストロークを使用して、アクセシビリティを最大化し、テキストと背景の間のコントラスト比を維持できます。非準拠の色の組み合わせを要求する厳しいブランドガイドラインを扱う場合、この方法を1〜2回使用しました。 WCAGの SC 1.4.3(コントラスト)基準を満たすための手法として言及されています

...文字が上よりも下の方が明るい場合、文字全体と文字の背景のコントラスト比を維持することが難しい場合があります。この場合、デザイナーは文字の後ろの背景を暗くするか、または文字の周りに薄い黒いアウトライン(少なくとも1ピクセル幅)を追加します。文字と背景のコントラスト比を4.5:1以上に保つため。

13
Matt Obee

与えられた答えとは別に、解決策が何も影ではない非常に重要な1つの使用例について述べたいと思います。

画像上のテキスト

テキストを書いている最上位の画像を制御できない場合は、読みやすくするために適切なコントラストを確保する必要があります。ビッグヒーローのイメージは最近激怒しているようです。暗い影が白いテキストの後ろに追加され、明るい影が黒いテキストの後ろに追加されます。

以前のNexusウェブサイト 事実を多用しました。写真で見栄えがするRobotoのバージョンはUltra Thinだからです。フォントの太さを犠牲にしたり、オーバーレイを追加したりせずに画像の上にコントラストを付けるために、暗い影の白い色のテキストです。私たちはこの事実を使用しました 私たち自身のウェブサイトで

enter image description here

[〜#〜] edit [〜#〜]OPがコメントを投稿した後、無地の背景の上に影を付ける使用例は、私たちは背景を制御していません(たとえば、CMSから来ているとしましょう)。白いテキストがある場合、黒い影を使用できます。テキストは黒い背景に表示され、多少白い背景にも表示されます。

17
Gaurav Ramanan

私にとって、特に暗いテーマのサイトの場合、答えは「はい」です。

これは私が私の兄弟の屋根ふき会社のために設計したサイトからのいくつかの画像です。彼はすべて暗いテーマを望んでいました。だから私は彼に濃い灰色の背景、いくつかはオフホワイトと灰色の本文テキスト、すべてCSS3の暗い影を付けました。

(注意点:スクリーンショットを撮ったときの画像は、実際にサイトよりも暗くなりました)

まず、ホームページ:

暗い灰色の背景。
大きなグレー、白、赤のボディテキストフォント。
影は背景よりも暗い。

Home Page

第二に、サービスページ:

暗い灰色の背景。
小さなグレーと白のボディテキストフォント。
影は背景よりも暗い。

Services

最後に、製品のランディングページ:

暗い灰色の背景。
X-ラージのライトとダークグレーの混合ロゴ。
影は背景よりも暗い。

Products

影がなければ、読むのが難しくなるだけでなく、それほど飛び出さないことがわかるでしょう。

11
Code Maverick

それは、その主な目的であるテキストと背景の間のコントラストを上げることによって可能です。

jsFiddle screen shot

jsFiddle実際のデモ...

4

テキストの影はテキストをポップにしますが、テキストを読みやすくしません。

白い背景の白いテキストの周りにテキストシャドウを追加すると、テキストが見えにくくなるより読みやすくなるので、テキストが読みやすくなります。ただし、白い背景の黒いテキストの周囲にテキストシャドウを使用すると、白い背景の黒いテキストよりも読みやすくなることに同意しません。

適切なコントラストは読みやすいテキストへの鍵です

特別なためにテキストを目立たせたい場合は、テキストシャドウを追加することで実現できます。ただし、最も読みやすいテキストを取得しようとしているだけの場合は、テキストシャドウなしのハイコントラスト行く方法です。たとえば、一部のバージョンの 白い背景に黒いテキスト です。

環境が暗いサーバールームなどになることがわかっている場合、サーバールームの担当者は、あるバージョンの 暗い背景に明るいテキスト を使用していただきありがとうございます。

2
DaveAlger