web-dev-qa-db-ja.com

使いやすさと読みやすさ/読みやすさのための灰色の背景と白の背景

多くのウェブサイトはデフォルトでコントラストを最大にするために白の背景を使用します(テキストは黒)。そのため、画面のギラつきが少なくなり、また、特定のユーザーインタラクションの微妙なハイライトとして白を使用するデザイナー。

非常に薄い灰色の背景よりも白が好まれる特定の理由はありますか?そうであれば、白の背景を持つことで既知の問題のいくつかを軽減するために使用できるいくつかの戦略がありますか?

5
Michael Lai

明るい灰色の背景よりも白い背景を選択することの唯一の利点は、使用できるテキストの色の範囲が広くなることは間違いなく、許容されるユーザビリティとアクセシビリティのガイドライン内にとどまることです。

言い換えると、青色のテキストを使用したい場合は、薄い灰色の背景よりも、白い背景の方が少し明るい青色を使用できます。

また、ユーザーの画面で知覚される色は、画面のガンマ設定に基づいて変化することにも注意してください(iOSのNight Shiftの新リリースでは特に重要です(バージョン9.3の新機能: http:// www.Apple.com/ios/updates/ )、そしてそれらが置かれている環境にも基づいています。

この最後のポイントはこの質問にとって重要です。モバイルデバイスでは、白い背景と非常に暗いテキストを組み合わせると、実際に画面の明るさをできるだけ高くする必要があるため、読書や表示のエクスペリエンスが向上します。 。

ライトグレーの画面のメリットは、白をアクセントとして使えるという点が問題だと思います。あなたのアクセントはテキストではありませんが、もちろんそれを目立たせることを望みますが、非常に薄いグレーと白の間のコントラストが小さすぎて、アクセントが役に立ち、アクセスしにくい場合があります。

これには美的側面もあります。もちろん、当然のことながら、見た目も美しく、実際には使いやすい(実際のユーザビリティの問題はありません)ので、UIは美的にも魅力的です。ユーザーエクスペリエンスは、UIだけでなく、UI、製品のブランド、およびその美しさに対する感情的な反応からも生まれます。白い背景は間違いなく、より広い範囲の配色(グラフィック機能、テキスト、およびブランディングに使用される)との互換性が高く、現在、私は個人的に、白の意味合いはライトグレー(全体)よりもミニマリズム、シンプルさ、および美しさを意味すると考えています。 。私はそれが非常に議論の余地があることを知っています:))。

ちなみに、こちらが便利なカラーコントラストチェックツールです。 http://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=3333

7

白の背景を軽減する方法についてはわかりませんが、ライトグレーが最適で、レイアウトの配色でより汎用性がある場合は、必ずそれを使用してください。白い背景よりも目立たないと思われる場合は、モックアップを作成して簡単なユーザーテストを実行し、ユーザーの好みを確認してください。そうでなければ、灰色の背景に対するあなたの論理的根拠は私には完璧に聞こえます。

ソース:常識初心者ux'er

1
Dgella89

コンテンツが簡単に読めるのであれば、健康なユーザーにとってはそれほど問題ではないと思います。ただし、色覚異常や視覚障害のあるユーザーのコントラストをテストすることを検討してください。これを行う方法は、 NoCoffee Chrome extension を使用することです。これは、多くの視覚障害をシミュレートできます。低コントラスト感度をテストする必要があります。

1