¿Por qué no usar negro puro (# 000) y blanco puro (#FFF)?


17

Una nueva barra superior para Stack Exchange dice:

Lo primero que notará es que es realmente negro* .

* Jin señala que técnicamente no es del todo negro: es el # 212121.

En su CSS veo,

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

¿Por qué no "realmente negro": por qué es "no completamente negro" mejor?

Del mismo modo, para el resto del fondo veo algo como,

background: #fdfdfd

¿Por qué no blanco puro?

No estoy preguntando acerca de StackExchange específicamente; lo que quiero decir es que es una buena regla general para cualquiera / todos los sitios web: cuando la especificación de diseño parece pedir blanco o negro, ¿debería usar casi blanco y negro en lugar de realmente ¿en blanco y negro?

¿Esta 'regla' se aplica a otros colores también (cuál es la regla, exactamente)?

¿La regla depende del dispositivo?


Google siempre usa fondos de color blanco puro.
Pacerier

Respuestas:


18

En resumen, es fácil para la vista;

En pocas palabras, el contraste es la diferencia entre dos colores. En una página web, la cantidad de contraste requerida varía con las diferentes partes de la página. Por lo general, desea un alto contraste entre el texto y su color de fondo. Pero un contraste demasiado alto entre los elementos de diseño puede dar una impresión inestable y desordenada. El blanco y negro crean el mayor contraste posible '. -Cita desde aquí

Este es un gran sitio para sugerencias / ejemplos de color UX y teoría. Y analiza el contraste de diferentes colores en el fondo, incluso dando el código hexadecimal que es bastante útil.

El contraste y el balance de color se discuten aquí también.

Este también parece ser un estilo que está en tendencia porque el contraste más bajo entre bckgrounds hace que el contraste del texto sea un poco más agradable (en mi opinión) como se ve con el color aquí y aquí. Estas muestras son más para mirar el color que su contenido en términos de lo que quiero comunicar aquí.

No es necesariamente una regla más de preferencia o estilo. Es más dependiente del contenido que del dispositivo. Se trata de dónde desea tener el mayor énfasis o enfoque: donde sea que sea, es donde debería haber más contraste. En el caso de StackExchange, todo se trata de preguntas y respuestas, por lo que el cuerpo es donde hay más contraste, ya que es donde es más relevante.

Buena suerte con sus elecciones de color en el futuro, esta es otra consideración a tener en cuenta: D


1
Me doy cuenta de que las respuestas aquí deben ser cortas, así que gracias por usar las suyas para proporcionar enlaces para una lectura más detallada (soy un novato completo).
ChrisW

Me alegro de ayudar (aunque sea un poco). La respuesta a esta pregunta tiene 3 componentes principales: teoría del color, preferencia / estilo y diseño UX. Es imposible cubrir cada uno al 100% en una sola respuesta (como ya mencionó). Así que solo quería darte una respuesta breve junto con una idea de qué explorar.
Jenna

6

Una barra superior de color negro puro se vería muy llamativa contra el fondo blanco utilizado por muchos sitios web, lo cual es malo porque el enfoque debe estar en el contenido en lugar de atraer la atención hacia la parte superior de la pantalla. Al hacerlo más claro (gris) se reduce el contraste entre la barra superior y el fondo del cuerpo.

Sin embargo, un fondo gris en cualquier cosa impide la legibilidad al reducir el posible contraste entre el texto y el fondo. El ojo humano es más sensible a las diferencias de brillo, por lo que elegir un 50% de gris significa que, sin importar el color de texto que elija, está utilizando como máximo la mitad de la diferencia de brillo que puede producir la pantalla del usuario.

Por lo tanto, creo que la elección del 80% de negro es un compromiso entre hacer que la barra superior sea menos discordante y preservar el contraste dentro de ella.

Para el texto del cuerpo, por lo general, no desea utilizar el negro puro contra un fondo claro, con el fin de maximizar el contraste y por lo tanto la legibilidad. (Esto se aplica tanto a la pantalla como a la impresión). Observe que el color de fondo del cuerpo difiere del blanco puro solo un poco. En general, los sitios web a menudo eligen fondos que son ligeramente blanquecinos. Un propósito es hacer que el sitio se sienta más cálido o más fresco eligiendo un rosa pálido o azul (aunque aquí es un gris neutro).


En este sitio, incluso el div.post-textcolor de primer plano es en color: #111;lugar de negro puro. ¿Por qué no dejar legibilidad o brillo de la pantalla al navegador / dispositivo / usuario predeterminado para optimizar?
ChrisW

0

En mi opinión ... Solo moda, tendencias.

Si el usuario siente que las páginas web le están lastimando los ojos, puede ajustar el brillo de la pantalla. En dispositivos móviles, las personas hacen eso todo el tiempo.

Hay una tendencia de imágenes "vintage". Baja saturación, lavado.

El aspecto desteñido puede hacer que el punto más oscuro o blanco sea gris.

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

No solo en fotos, sino también en videos ... incluyendo videos "felices".

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

Es cierto que mucho contraste puede ser molesto, especialmente un fondo oscuro con texto blanco ... Recuerda el diseño web de los 90 , con fondos negros y gifs animados sobresaturados ...

La tendencia es tener sitios web más "amigables", más "íntimos", así que esto es suavidad. También puede dar un aspecto más "cinematográfico", en lugar de un aspecto de "TV".

Una tendencia opuesta en las imágenes es el "estilo Hdri " o el estilo draggan, por ejemplo, que acentúa el contraste y el micro contraste.

En algunos casos, una imagen borrosa puede dar la apariencia de un rango dinámico más interno, en comparación con el contraste mejorado de una imagen real de alto rango dinámico.


Además, si toda su paleta está de alguna manera limitada, puede engañar el equilibrio automático de su ojo. Conduciendo a su mayor rango dinámico. Los pintores usan esto todo el tiempo.
joojaa

1
Esto simplemente no es una respuesta válida. La ciencia en torno al contraste, usar negro, usar blanco, es solo eso: ciencia, no opinión.
Mike Earley
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.