Al diseñar un sitio web, ¿cómo sé cómo ven los usuarios los colores?

11

Al diseñar un sitio web, ¿cómo sé cómo ven los usuarios los colores? Veo los colores del sitio web de manera diferente a mi Macbook y computadora de escritorio / portátil con Windows. Especialmente no puedo ver colores claros en el escritorio, por ejemplo, los bordes grises de las tablas son invisibles.

¿Cuál debería importarme al diseñar? ¿Puedo hacer que todas las pantallas sean bastante similares con una solución de diseño?

website-design color-conversion ahmet
fuente
Duplicado relacionado y posible: graphicdesign.stackexchange.com/questions/94401/…
Vincent
1
Y solo para agregar a la confusión, casi el 10% de las personas son daltónicas, pero al menos con eso hay extensiones para Chrome que al menos te permiten (suponiendo que no lo estés) ver aproximadamente cómo será para alguien que es ...
Rycochet
... y a nivel de empresa gamma / contraste + otras configuraciones de pantalla pueden estar en todas partes en monitores en una situación de oficina (su cliente) cuando es configurado por TI que a menudo usa acceso remoto y configuraciones de grupo para controlar las redes de PC. En mi última compañía, TI estaba en un país diferente con poca simpatía por el diseño: obtuve acceso de administrador y agregué mi propio monitor y configuración. Trabajar de acuerdo con los estándares y evitar los extremos es el mejor enfoque, teniendo en cuenta que algunos clientes (como el Gobierno) tendrán una accesibilidad estricta
Solicite

Respuestas:

23

Respuesta corta: no lo haces.

Respuesta más larga: es literalmente imposible tener en cuenta todos los ajustes y calibraciones de la pantalla, las circunstancias y las capacidades visuales (des) de los espectadores. Es por eso que existen pautas para, por ejemplo, el contraste del texto y su fondo, para garantizar cierta usabilidad en al menos la mayoría de los casos.

Mi flujo de trabajo personal incluye al menos dos monitores no calibrados y algunas pruebas en diferentes dispositivos móviles en diferentes situaciones de iluminación.

El W3C ha establecido algunas pautas sobre el uso del color y el contraste necesario que puede leer aquí . Personalmente, uso esta herramienta de contraste para texto de Lea Verou para verificar si mis colores de texto cumplen con las pautas o son al menos cercanos.

Vincent
fuente
8
Me pregunto si la gente de SE lee esas pautas. Tengo una visión bastante buena, pero el contraste entre el fondo y el color de resaltado del enlace en muchos sitios SE (incluido este) es deficiente.
Barmar
1
¡Ojalá pudiera votar esto más de una vez! Yo mismo uso una extensión de navegador de lector oscuro, así que no importa cuán bonito sea su sitio, lo destruiré por completo solo por tener una vista decente cuando tenga cincuenta años.
PieBie
Según este sitio web, webaim.org/resources/contrastchecker , el contraste de color entre el fondo y los enlaces no cumple con los estándares de accesibilidad en este sitio SE. Por lo tanto, es seguro asumir que la gente de SE no lee tales pautas.
ESR
2

No lo hace, y no puede controlar ni aplicar la misma configuración en el monitor / dispositivo de todos. Lo mejor que puede hacer es utilizar un perfil de color sRGB al exportar imágenes ráster para la web.

sRGB es el espacio de color estándar mundial para la reproducción del color en la web.

Esto ayudará hasta cierto punto, pero en última instancia, las propias preferencias del usuario decidirán cómo se verán las imágenes en su dispositivo. Obviamente, esto es para imágenes ráster, no para otros elementos gráficos en una página.

Billy Kerr
fuente
Y calibre sus pantallas para sRGB, de modo que al menos sus pantallas muestren lo que se supone que debe ser
joojaa
Los comentarios no son para discusión extendida; Esta conversación se ha movido al chat .
Vincent
1

Los navegadores y las computadoras modernas de hoy en día rara vez tienen problemas para mostrar los colores correctos (consulte https://websafecolors.info/learn para obtener información al respecto).

Parece que podrían ser las pantallas mismas las que hacen que los colores se vean de manera diferente. Esto podría deberse a la configuración de brillo, contraste y nivel de luz azul del monitor, e incluso debido a la tecnología del monitor en sí misma, como el tipo de LED y panel. No hay forma de aplicar configuraciones consistentes en las pantallas, o incluso leer sus configuraciones y ajustar el sitio web.

Recomendaría usar Inspect Element y mirar el código hexadecimal de los colores en cada plataforma. Si son idénticos, entonces sabes que son las pantallas. La solución será usar colores con más contraste entre sí, para que tengan una mayor probabilidad de destacarse en todas las pantallas. ¡Alternativamente, pruebe bordes más gruesos o incluso mesas acolchadas sin bordes! La mayoría de los usuarios tienen pantallas de alta definición que abren muchas posibilidades para el diseño de tablas, que generalmente utiliza texto y formato de píxeles de espesor.

LloydTao
fuente
0

La respuesta es no, porque el color de la computadora portátil y el color del escritorio no son los mismos para cada computadora. Puede usar el código de color si desea asegurarse de que el color sea el mismo, por ejemplo, puede escribir este código en css:

background-color: #D2B48C
Sally_2891
fuente
2
Hola, Sally, arreglé la fuente en tu respuesta, pero no sé exactamente cómo es una respuesta a la pregunta. ¿Podrías dar más detalles?
PieBie
Esto no resuelve el problema real. El problema es que #D2B48C se verá diferente en diferentes monitores, y la pregunta es cómo resolverlo.
tubería