純粋な黒(#000)と純粋な白(#FFF)を使用しないのはなぜですか?


17

Stack Exchangeの新しいトップバーには、

最初に気付くのは、本当に黒いということ*です。

* ジンは、技術的には完全に黒ではないことを指摘しています:#212121です。

私が見るCSSでは、

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

なぜ「本当に黒」ではないのか:なぜ「全く黒くない」のが良いのでしょうか?

同様に、残りの背景については、次のようなものが表示されます。

background: #fdfdfd

純白ではないのはなぜですか?

私は具体的にStackExchangeについて質問していません-つまり、これはあらゆる/すべてのWebサイトに適した一般的なルールですか?白黒?

この「ルール」は他の色にも適用されますか(正確にはルールとは何ですか)?

ルールはデバイスに依存していますか?


Googleは常に真っ白な背景を使用します。
Pacerier

回答:


18

要するに、目には簡単です。

簡単に言えば、コントラストは2つの色の違いです。Webページでは、必要なコントラストの量はページのさまざまな部分によって異なります。通常、テキストとその背景色の間には高いコントラストが必要です。しかし、設計要素間のコントラストが高すぎると、不安定で乱雑な印象を与える場合があります。黒と白が可能な限り最高のコントラストを生み出します。」- ここから引用

これ は、UXの色の提案/例と理論に最適なサイトです。また、背景のさまざまな色のコントラストについて説明し、非常に便利な16進コードを示します。

コントラストとカラーバランスについてもここで説明します

これは、bckgrounds間のコントラストが低いため、ここここの色見られるようにテキストのコントラストが少し良くなるので、トレンドになっているようです。これらのサンプルは、ここで伝えたいことの条件。

それは必ずしも好みやスタイルのルールではありません。デバイスに依存するよりもコンテンツに依存します。それは、あなたが最も強調または焦点を合わせたい場所についてです-それが起こる場所はどこでも、最もコントラストがあるべき場所です。StackExchangeの場合、それはすべて質問と回答に関するものであるため、本文は最も関連性のある場所であるため、本文は最も対照的な場所です。

将来的にあなたの色の選択で幸運、これは考慮に入れるべき別の考慮事項です:D


1
ここでの答えは短くなければならないことを理解しているので、さらに詳細な読書のためのリンクを提供するためにあなたのものを使用していただきありがとうございます(私は完全な初心者です)。
ChrisW

助けてくれてうれしいです(少しだけ)。この質問の答えには、3つの主要な要素があります。色の理論、好み/スタイル、UXデザインです。1つの回答でそれぞれを100%網羅することは不可能です(既に述べたように)。それで、私はあなたに何を探求するかのアイデアと共にあなたに短い答えを与えたかっただけです。
ジェナ

6

真っ黒なトップバーは、多くのWebサイトで使用されている白い背景に対して非常に印象的です。これは、画面の上部に目を向けるのではなく、コンテンツに焦点を当てる必要があるためです。明るく(灰色)にすると、トップバーと体の背景のコントラストが低下します。

ただし、灰色の背景は、テキストと背景のコントラストを減らすことで読みやすさを妨げます。人間の目は明るさの違いに最も敏感であるため、50%グレーを選択することは、選択するテキストの色に関係なく、ユーザーの画面が生成できる明るさの差の最大で半分を使用することを意味します。

したがって、80%の黒を選択することは、トップバーの耳障りを少なくすることと、その内部のコントラストを維持することの間の妥協案だと思います。

本文テキストのために、あなたは一般的にないコントラストので、読みやすさを最大にするために、光を背景に、純粋な黒を使用します。(これは、スクリーンと印刷の両方に適用されます。)ボディの背景色は、純粋な白とほんの少しだけ異なることに注意してください。一般に、Webサイトは、非常にわずかにオフホワイトの背景を選択することがよくあります。目的の1つは、淡いピンクまたは青(ここではニュートラルグレー)を選択して、サイトを暖かくまたは涼しくすることです。


このサイトでは、div.post-text前景色でさえcolor: #111;純粋な黒ではありません。読みやすさや画面の明るさをブラウザ/デバイス/ユーザーのデフォルトのままにして最適化してみませんか?
ChrisW

0

私の意見では...ちょうどファッション、トレンド。

ユーザーがWebページが目を痛めていると感じた場合、画面の明るさを調整するだけです。モービルデバイスでは、人々は常にそれを行います。

「ビンテージ」画像の傾向があります。低彩度、色あせた。

ウォッシュアウトされた外観は、最も暗いまたは/および白色点を灰色にすることができます。

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih=1007

写真だけでなく、ビデオでも...「ハッピー」ビデオを含む。

https://www.youtube.com/watch?v=9HjrFnKEE8w

多くのコントラストが、白いテキストで特別に暗い背景を悩ませる可能性があることは事実です... 90年代のウェブデザイン、黒い背景と過飽和アニメーションGIFを思い出してください...

トレンドは、より「親しみやすい」ウェブサイト、より「親密な」ウェブサイトを持つことで、これは柔らかさです。また、「TV」の外観ではなく、「映画のような」外観を実現できます。

画像の正反対の傾向の1つは、コントラストとマイクロコントラストを強調する「Hdriルック」またはドラッグガンスタイルです。

場合によっては、実際のハイダイナミックレンジ画像のトーンマッピングされたコントラストと比較して、ウォッシュアウトされた画像はより内部のダイナミックレンジの外観を与えることができます。


また、パレット全体が何らかの形で制限されている場合、目のオートバランスを欺くことができます。より高いダイナミックレンジにつながります。画家は常にこれを使用します。
joojaa

1
これは有効な答えではありません。黒を使用して、白を使用して、コントラストに関する科学は、それは単なる科学であり、意見ではない。
マイクアーリー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.