Warum nicht reines Schwarz (#000) und reines Weiß (#FFF) verwenden?

Eine neue obere Leiste für Stack Exchange sagt:

Das erste, was Ihnen auffallen wird, ist, dass es wirklich schwarz* ist .

*Jin weist darauf hin, dass es technisch gesehen nicht ganz schwarz ist: Es ist #212121.

In seinem CSS sehe ich,

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

Warum nicht „echt schwarz“: Warum ist „nicht ganz schwarz“ besser?

In ähnlicher Weise sehe ich für den Rest des Hintergrunds so etwas wie

background: #fdfdfd

Warum nicht reinweiß?

Ich frage nicht speziell nach StackExchange - was ich meine, ist dies eine gute allgemeine Regel für alle Websites: Wenn die Designspezifikation nach Schwarz oder Weiß zu fragen scheint, sollte ich fast Schwarz und Weiß verwenden, anstatt wirklich Schwarz und weiß?

Gilt diese „Regel“ auch für andere Farben (was genau ist die Regel)?

Ist die Regel geräteabhängig?

Google verwendet immer reinweiße Hintergründe.

Antworten (3)

Kurz gesagt, es ist angenehm für die Augen;

„Einfach ausgedrückt ist der Kontrast der Unterschied zwischen zwei Farben. Auf einer Webseite variiert der erforderliche Kontrast je nach Teil der Seite. Normalerweise möchten Sie einen hohen Kontrast zwischen Text und seiner Hintergrundfarbe. Ein zu hoher Kontrast zwischen Designelementen kann jedoch einen unruhigen und chaotischen Eindruck hinterlassen. Schwarz und Weiß erzeugen den höchstmöglichen Kontrast.“ -Zitat von hier

Dies ist eine großartige Seite für UX-Farbvorschläge/Beispiele und Theorie. Und bespricht den Kontrast verschiedener Farben auf dem Hintergrund und gibt sogar den Hex-Code an, was ziemlich praktisch ist.

Kontrast und Farbbalance werden hier ebenfalls besprochen.

Dies scheint auch ein Stil zu sein, der im Trend liegt, da der geringere Kontrast zwischen den Hintergründen den Kontrast des Textes (meiner Meinung nach) etwas schöner macht, wie dies hier und hier mit der Farbe zu sehen ist. Diese Beispiele dienen eher dazu, die Farbe als ihren Inhalt zu betrachten Bedingungen dessen, was ich hier kommunizieren möchte.

Es ist nicht unbedingt eine Regel, eher eine Vorliebe oder ein Stil. Es ist mehr inhaltsabhängig als geräteabhängig. Es geht darum, wo Sie die größte Betonung oder den größten Fokus haben möchten - wo auch immer dies der Fall ist, dort sollte der größte Kontrast herrschen. Im Fall von StackExchange dreht sich alles um Fragen und Antworten, also ist der Körper dort, wo der Kontrast am größten ist, da er dort am relevantesten ist.

Viel Glück bei der zukünftigen Farbauswahl, das ist eine weitere Überlegung, die Sie berücksichtigen sollten :D

Mir ist klar, dass die Antworten hier kurz sein müssen, also danke, dass Sie Ihre verwenden, um Links für weitere detaillierte Lektüre bereitzustellen (ich bin ein absoluter Anfänger).
Ich helfe gerne (wenn auch nur ein bisschen). Die Antwort auf diese Frage besteht aus 3 Hauptkomponenten: Farbtheorie, Präferenz/Stil und UX-Design. Es ist unmöglich, alle zu 100 % in einer einzigen Antwort abzudecken (wie Sie bereits erwähnt haben). Deshalb wollte ich Ihnen nur eine kurze Antwort geben, zusammen mit einer Vorstellung davon, was Sie erkunden können.

Eine rein schwarze obere Leiste würde vor dem weißen Hintergrund, der von vielen Websites verwendet wird, sehr auffällig aussehen, was schlecht ist, da der Fokus auf dem Inhalt liegen sollte, anstatt den Blick auf den oberen Bildschirmrand zu lenken. Wenn Sie es heller (grau) machen, wird der Kontrast zwischen der oberen Leiste und dem Hintergrund des Körpers verringert.

Ein grauer Hintergrund auf irgendetwas behindert jedoch die Lesbarkeit, indem er den möglichen Kontrast zwischen Text und Hintergrund verringert. Das menschliche Auge reagiert am empfindlichsten auf Helligkeitsunterschiede. Wenn Sie also 50 % Grau wählen, bedeutet dies, dass Sie unabhängig von der gewählten Textfarbe höchstens die Hälfte des Helligkeitsunterschieds verwenden, den der Bildschirm des Benutzers erzeugen kann.

Daher denke ich, dass die Wahl von 80 % Schwarz ein Kompromiss ist, um die obere Leiste weniger störend zu machen und den Kontrast darin zu bewahren.

Für Fließtext möchten Sie im Allgemeinen reines Schwarz auf hellem Hintergrund verwenden, um den Kontrast und damit die Lesbarkeit zu maximieren. (Dies gilt sowohl für den Bildschirm als auch für den Druck.) Beachten Sie, dass sich die Hintergrundfarbe für den Körper nur geringfügig von reinem Weiß unterscheidet. Im Allgemeinen wählen Websites oft Hintergründe, die sehr leicht cremefarben sind. Ein Zweck besteht darin, die Website wärmer oder kühler erscheinen zu lassen, indem Sie ein blasses Rosa oder Blau auswählen (hier ist es jedoch ein neutrales Grau).

Auf dieser Seite ist sogar die div.post-textVordergrundfarbe color: #111;statt reinem Schwarz. Warum überlassen Sie die Lesbarkeit oder Bildschirmhelligkeit nicht den Standardeinstellungen des Browsers/Geräts/Benutzers, um sie zu optimieren?

Meiner Meinung nach... Nur Mode, Trends.

Wenn der Benutzer das Gefühl hat, dass die Webseiten seine Augen verletzen, kann er oder sie einfach die Helligkeit des Bildschirms anpassen. Auf Mobilgeräten machen die Leute das ständig.

Es gibt einen Trend zu "Vintage"-Bildern. Niedrige Sättigung, ausgewaschen.

Der ausgewaschene Look kann den dunkelsten oder/und den weißen Punkt grau machen.

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

Nicht nur in Fotos, sondern auch in Videos ... einschließlich "glücklicher" Videos.

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

Es ist wahr, dass viel Kontrast störend sein kann, besonders dunkler Hintergrund mit weißem Text ... Erinnern Sie sich an das Webdesign der 90er Jahre , mit schwarzen Hintergründen und übersättigten animierten Gifs ...

Der Trend geht zu "freundlicher" aussehenden Websites, "intimer", also Weichheit. Es kann auch einen "filmischeren" Look anstelle eines "TV"-Looks geben.

Ein gegensätzlicher Trend bei Bildern ist zum Beispiel der „ Hdri-Look “ oder Draggan-Stil, der Kontrast und Mikrokontrast betont.

In einigen Fällen kann ein ausgewaschenes Bild den Eindruck eines größeren internen Dynamikbereichs erwecken, im Gegensatz zu dem durch Tonzuordnung verstärkten Kontrast eines echten Bildes mit hohem Dynamikbereich.

Auch wenn Ihre gesamte Palette irgendwie begrenzt ist, können Sie die Autobalance Ihres Auges täuschen. Dies führt zu Ihrem höheren Dynamikbereich. Maler verwenden dies ständig.
Dies ist einfach keine gültige Antwort. Die Wissenschaft rund um den Kontrast, die Verwendung von Schwarz, die Verwendung von Weiß, das ist nur das – Wissenschaft, keine Meinung.