デザイン

デザイン

テキストや背景色に「濃い黒」を使うべきではない理由【ユーザーの可読性を落とすかも…】

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Why You Should Never Use Pure Black for Text or Backgrounds
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

7,929 views

読了時間 : 約2分10秒

デザインにおいて、一番濃い黒を使用すると可読性が落ちているということを知っていましたか?

 

「米国の成人の58%」がコンピュータで作業することで目に疲れを感じるという調査結果が出ています。デザイナーは、使用する色に注意を払うことによってユーザーの目が疲れてしまう可能性を減らすことができるのです。

 

 

○濃い黒のテキストと背景

濃い黒のテキストや背景は、ユーザーが長時間テキストを読んでいると目に不快感を与え、疲れを引き起こします。

 

白は100%の色の明るさを有し、黒は0%の色の明るさを有します。色の明るさにによって生じるコントラストの差は、光量の差となってユーザーの目に届きます。したがって、目は文字を読みながら明るさの調整もしなければならなくなるのです。

 

それがどういうことかと言うと、暗い部屋にいる時に明るい光を見たとします。光量の条件が急激に変化すると私たちの目は「まぶしい」と感じ、目の負担になります。しかし、暗い部屋で見たのが薄暗い光だった場合はコントラストの急激な変化が起きず、網膜が過度に刺激されることがないため光量の変化に適応しやすくなります。

 

白い背景を使用している場合、黒いテキスト色の代わりに濃いグレーのテキストを使用して、明るさの差異が大きくならないようにしましょう。網膜への刺激が緩和されて、ユーザーはより快適にWebサイトを読めるようになります。

 

 

 

○アクセシビリティの高いコントラスト

濃い黒はすべてのユーザーに悪い影響があるわけではありません。視力障害があるが盲目ではない、つまり低視力のユーザーは、高コントラストモードにすることでテキストをより読みやすくなる傾向があります。こういった視力障害があるユーザーに向けてデザインするときは、インタフェースのアクセシビリティ設定に濃い黒を使用する必要があります。通常のユーザーには濃いグレーで表示する設定を用意するのが良いでしょう。

 

 

○読みやすさのバランスがとれたコントラスト

コントラストがはっきりしている画面は可読性に優れていますが、コントラスト差が大きすぎると目に大きな影響を及ぼします。テキスト色と背景色のコントラストは、ユーザーの目に安全で優しいバランスにしましょう。

 

運営しているサイトのコントラストが不明な場合は、カラーコントラストチェッカーを使用して最適な範囲を見つけることができます。ですが、このサイトではWCAG 2.0の業界標準に基づいて色のコントラストが低すぎるかどうかを判定してくれるだけで、高すぎるかどうかは判定してくれません。最終的な決定はデザイナーに委ねられています。

 

テキスト色は必ずしも白と黒に限定されているわけではありませんが、最も一般的な色の組み合わせです。デザイナーはテキスト色を決定する際、ユーザーの目にどう影響するかを考える必要があります。目の疲れや痛みを軽減するデザインであれば、ユーザーはより長い時間をサイトに費やしてくれることでしょう。

 

 

 

※本記事はWhy You Should Never Use Pure Black for Text or Backgroundsを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです!

 

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ