Perché non usare il nero puro (# 000) e il bianco puro (#FFF)?


17

Una nuova barra superiore per Stack Exchange dice:

La prima cosa che noterai è che è davvero nero* .

* Jin sottolinea che tecnicamente non è del tutto nero: è # 212121.

Nel suo CSS vedo,

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

Perché non "davvero nero": perché "non abbastanza nero" è meglio?

Allo stesso modo, per il resto dello sfondo vedo qualcosa di simile,

background: #fdfdfd

Perché non bianco puro?

Non sto chiedendo in particolare StackExchange - voglio dire, è una buona regola generale per qualsiasi / tutti i siti Web: quando le specifiche del design sembrano richiedere il bianco o nero, dovrei usare quasi il bianco e nero invece di davvero bianco e nero?

Questa 'regola' si applica anche a qualsiasi altro colore (qual è esattamente la regola)?

La regola dipende dal dispositivo?


Google utilizza sempre sfondi bianchi puri.
Pacerier

Risposte:


18

In breve, è facile per gli occhi;

'In poche parole, il contrasto è la differenza tra due colori. In una pagina Web, la quantità di contrasto richiesta varia in base alle diverse parti della pagina. Di solito si desidera un elevato contrasto tra il testo e il suo colore di sfondo. Ma un contrasto troppo elevato tra gli elementi di design potrebbe dare un'impressione instabile e disordinata. Il bianco e nero crea il contrasto più elevato possibile ". -Citazioni da qui

Questo è un ottimo sito per suggerimenti / esempi e teoria del colore UX. E discute il contrasto di diversi colori sullo sfondo, anche dando il codice esadecimale che è abbastanza utile.

Contrasto e bilanciamento del colore sono discussi anche qui .

Anche questo sembra essere uno stile che tende perché il contrasto inferiore tra i bckgrounds rende un po 'più piacevole il contrasto del testo (secondo me) come visto con il colore qui e qui Questi esempi sono più per guardare il colore che il loro contenuto in termini di ciò che voglio comunicare qui.

Non è necessariamente una regola più di una preferenza o stile. Dipende più dal contenuto che dal dispositivo. Si tratta di dove si desidera avere maggiore enfasi o attenzione - ovunque ciò che accade è dove dovrebbe esserci il maggior contrasto. Nel caso di StackExchange si tratta di domande e risposte, quindi il corpo è dove c'è più contrasto in quanto è lì dove è più rilevante.

Buona fortuna con le tue scelte di colore in futuro, questa è un'altra considerazione da tenere in considerazione: D


1
Mi rendo conto che le risposte qui devono essere brevi, quindi grazie per aver utilizzato le tue per fornire collegamenti per ulteriori letture più dettagliate (sono un principiante completo).
ChrisW,

Sono contento di aiutare (anche se solo un po '). La risposta a questa domanda ha 3 componenti principali: teoria del colore, preferenza / stile e design UX. È impossibile coprire ognuno al 100% in una sola risposta (come hai già detto). Quindi volevo solo darti la risposta breve insieme a un'idea di cosa esplorare.
Jenna il

6

Una barra superiore in nero puro sembrerebbe molto sorprendente sullo sfondo bianco utilizzato da molti siti Web, il che è un male perché l'attenzione dovrebbe essere sul contenuto piuttosto che attirare l'attenzione sulla parte superiore dello schermo. Renderlo più leggero (grigio) riduce il contrasto tra la barra superiore e lo sfondo del corpo.

Tuttavia, uno sfondo grigio su qualsiasi cosa impedisce la leggibilità riducendo il possibile contrasto tra testo e sfondo. L'occhio umano è più sensibile alle differenze di luminosità, quindi scegliere un grigio al 50% significa che, indipendentemente dal colore del testo che scegli, stai utilizzando al massimo metà della differenza di luminosità che lo schermo dell'utente può produrre.

Quindi, penso che la scelta dell'80% di nero sia un compromesso tra rendere la barra superiore meno stonante e preservare il contrasto al suo interno.

Per il corpo del testo, in genere si desidera utilizzare il nero puro su uno sfondo chiaro, al fine di massimizzare il contrasto e quindi la leggibilità. (Questo vale sia per lo schermo che per la stampa.) Si noti che il colore di sfondo del corpo differisce dal bianco puro solo di un po '. In generale, i siti Web spesso scelgono sfondi leggermente leggermente bianchi. Uno scopo è quello di rendere il sito più caldo o più freddo scegliendo un rosa pallido o blu (qui è un grigio neutro però).


In questo sito anche il div.post-textcolore di primo piano è color: #111;invece del nero puro. Perché non lasciare la leggibilità o la luminosità dello schermo al browser / dispositivo / utente predefinito per ottimizzare?
ChrisW,

0

Secondo me ... Solo moda, tendenze.

Se l'utente sente che le pagine Web gli fanno male agli occhi, può semplicemente regolare la luminosità dello schermo. Nei dispositivi mobili la gente lo fa sempre.

C'è una tendenza delle immagini "vintage". Bassa saturazione, sbiadita.

L'aspetto sbiadito può rendere il punto più scuro o / e il punto bianco grigio.

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

Non solo nelle foto, ma anche nei video ... compresi i video "felici".

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

È vero che può essere molto contrastato, specialmente uno sfondo scuro con testo bianco ... Ricorda il web design degli anni '90 , con sfondi neri e gif animate sovrasaturate ...

La tendenza è quella di avere siti Web più "amichevoli", più "intimi", quindi questa è morbidezza. Può anche dare un aspetto più "cinematografico", anziché un aspetto "TV".

Una tendenza opposta nelle immagini è il " look Hdri " o stile draggan, ad esempio, che accentua il contrasto e il micro contrasto.

In alcuni casi, un'immagine sbiadita può dare l'aspetto di una gamma dinamica più interna, rispetto al contrasto migliorato mappato sul tono di un'immagine reale ad alta gamma dinamica.


Inoltre, se la tua intera tavolozza è in qualche modo limitata, puoi ingannare l'autobilanciamento del tuo occhio. Portando alla tua gamma dinamica più alta. I pittori lo usano sempre.
joojaa,

1
Questa non è una risposta valida. La scienza intorno al contrasto, usando il nero, usando il bianco, è proprio questo: scienza, non opinione.
Mike Earley,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.